Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
UX Power Tools – Medium | Christian Beck 
A primer for new UX designers and design students
We’ve written a lot about Sketch tips at UX Power Tools over the last two years and I wanted to organize them in a way that would help designers who are just starting to get in UX.
I should also mention that I’m not going to debate which tool is best — I’ll just assume you’ve already realized Sketch is the best (for now) and want to know how to use it as a UX Designer 😘
I’ve broken out our articles into 5 sections that map how I think new designers progress from novice to mastery:
- Getting Ideas Out
- Getting Started
- Getting Faster
- Getting Smarter
- Getting Visual
Getting ideas out
UX design starts before you get to the tools — it starts at the point of getting ideas out of your head (…it actually starts way before that with research, but let’s keep this article under 20 minutes long).
Admittedly, I jump straight into digital tools pretty early on. But that’s largely because I do more in my head and sketch collaboratively on a whiteboard with my design team. UX designers just starting out should really stay in low fidelity while exploring the problem space and making mistakes.
Once you’re ready to get something on screen, there are two tools I think facilitate this really well. The first is an InVision tool called Freehand, which we reviewed:
InVision Freehand: A 21st Century Case for Digital Whiteboards
The second tool that facilitates this phase of design is a set of premium libraries for Sketch called Flowkit by Matt D. Smith. It’s well worth the $29 price tag.
It’s not only great for lo-fidelity wireframing, but can be used at later stages of your design when you need to map out key workflows in high fidelity to communicate your design.
Getting Started
Far and away the biggest strength of Sketch for UX Design is its emphasis on making things repeatable and fast.
It’s still pretty alarming to see how many Sketch designers don’t use things as simple and powerful as Shared Styles, or more recent advances like Nested Symbols. I’m guessing it’s because designers get impatient and just wanna get things out. I totally get it.
But great design is only as good as a designer is organized. We like the metaphor of cooking:
- 5 Ways to Keep Your Sketch Kitchen Clean
- 5 Things to Do Before You Start Your Next Design File in Sketch, or, Preparing Your Design “mise en…
- Designers: Do you know the most efficient way to chop an onion? 🔪
And we also like expanding the concept of Stylesheets from code to design (since we wrote this, design systems have really exploded onto the scene, but most of these techniques are still relevant today):
And finally for the holy grail of articles about how to start a project in Sketch, which covers it all (right down to the folder structure):
A Step-by-Step Guide for Starting a New App Design Project in Sketch
With a bonus article on how to setup layouts in Sketch responsively:
“Blockframing” and 31 Free Sketch-Ready Layouts Using Auto Layout by Anima App
Getting faster
Ok, now that you have a grasp on how to start a Sketch project effectively, it’s time to start getting faster with the tool. Personally, I find it straight up offensive to see a designer not using any shortcuts while designing — I mean, it truly hurts my soul. Don’t be that guy/gal:
Shortcuts, Hotkeys, and Gestures: 5 Ways to Become a Design Ferrari in Sketch
About a million-and-a-half new tools and plugins have come out since we wrote this article, but truthfully, the best companions for Sketch haven’t really changed in my opinion (Nudg.it is now natively supported in Sketch, Anima is still useful too even though some of it has been baked into Sketch’s layout functionality):
The UX Designer’s Best Companions For Sketch 🔑
Tips and tricks
Jon Moore has imparted his power-user wisdom in a few articles that will blow your mind in their simplicity and power:
- 10 Sketch Tricks That Would Make Owen Wilson Say “Wooow!” (tons of GIFs!)
- “I didn’t know Sketch could do that!”
- This is, without a doubt, the coolest Sketch technique you’ll see all day.
Getting Smarter
You know how to setup a project, you’ve learned how to get faster with Sketch, and now it’s time to apply all that to UX design.
As I said earlier, Sketch is perfect for UX design because it makes repetition, consistency, and modularity easy. Here are a few examples of how to use Sketch to make UI elements intelligently (and they all come with freebies 👍):
- A Better Way to Make Buttons in Sketch
- Designing a Top Nav in One Symbol
- Design a Pre-Formatted Text Box for Phone Numbers and Credit Cards
- Design a Reusable System Modal
- Passwords | UX Power Tools
Handling icons and graphics efficiently
We’ll cover the visual design side of UX in the next section, but dealing with graphics is often outside the wheelhouse of a UX designer. Instead of worrying about creating icons, get smarter at how you use them:
The Most Efficient Way to Use Icons If You’re A Designer or Developer.
Nested symbols can actually automate quite a bit:
Using Nested Symbols to Create Tons of Social Assets in Seconds.
Finally, I’d be remiss if I didn’t point out Sketch’s greatest advancement in the last 12 months — Libraries:
Sketch Libraries: How they work, and the crazy stuff you can do with them
Getting Visual
As if all that wasn’t enough, UX designers today have a much higher standard to meet when it comes to visual design.
When I was getting started in UX design, I found it challenging to get acquainted with the “materials” I needed to design with: aspect ratios, font sizes, weights, color contrast, etc.
To get better, I started by copying existing products so I could get a feel for how UI was composed.
We covered this last year and provide links to a few common products re-created in Sketch (although some of them have since been redesigned):
Getting better at design is easy…just copy people!
From there you can really start to use some small techniques to add just a bit of flair to your designs:
Dead Simple Techniques for Using Branding in UI
But don’t forget that accurate sample data is just as critical to visual design as the visuals themselves:
How to Ditch Lorem Ipsum and Start Using Real Data in Your Designs (GIF Warning!), Part 1 of 2
*we never wrote part 2
Last, but not least, at some point in your career you will have to design a dashboard and it’s often one of the biggest nightmares for a UX designer. Personally, I find that dashboards bring marginal value to the table, so I’d rather not spend days getting the charts to look good:
10 Sketch Tips for Beautiful & Maintainable Charts (GIF Warning!)
It’s been an amazing 18 months helping the design community through UX Power Tools. And while Sketch certainly isn’t the only tool a designer should have in their arsenal, it’s certainly the most powerful. I hope this appendix will help those of you who are just getting started in a UX career, or who are making the shift to Sketch for your design workflow.
If you’re interested in a vanilla design system that’s perfect for starting new projects, we’d love if you check out the ones we’ve built. They’ll save you thousands of hours of design time:
When I’m not collecting Sketch articles on Medium, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.
Follow UX Power Tools on Twitter
Follow me on Twitter
Getting Started with UX Design in Sketch was originally published in UX Power Tools on Medium, where people are continuing the conversation by highlighting and responding to this story.
