The fine folks over at Bohemian Coding built Sketch specifically for designers who make things for screens, so it’s a natural for prototyping.
Here are a few tips for using Sketch to prototype that should make things smoother, faster, and easier for ya.
1. Size your artboards right
Okay, okay—this might not be the most mind-blowing tip on the list, but it’s helpful and important. Sketch provides a lot of predefined artboards to get you started right. Just type A and pick the artboard you need.
2. Get your grid on
Sketch makes it super easy to set up a layout that works for you. Just go to View > Layout Settings… to configure your layout, or press Ctrl+L to view your default layout.
3. Duplicate anything in seconds
I’ve used this trick in Illustrator for years, and it’s the same in Sketch. If you hold Option, then click and drag an element, it will copy it. Once you’ve placed it, just hit Cmd+D to do it again and again.
4. Measure distances
If you want to make beautiful things, you have to be intentional about details. To measure an element’s distance from other items on the page, select it on screen and hold Option. Then get ready to feel really OCD.
5. Use shared styles now, thank yourself later
You’re 100 screens in, on your 3rd round of reviews. The finish line is in sight. And then your client says, “Can we change all the buttons to blue?”
Instead of flipping your table, you just say “Ok”—because you used shared styles on all those buttons. When you’re creating UI elements you’ll use again and again, set their style by clicking No Shared Style, then Create New Shared Style, and give it a memorable name.
6. Totally abuse symbols
Symbols are a really helpful aspect of Sketch—and while what I propose here is probably an abuse of them, it’s pretty much invaluable.
If you’ve got a screen with a lot of states, modals, or options that go on top of it, make that whole screen a symbol, duplicate the artboard, and create your alternate versions. This way, if you need to update the underlying screen, you won’t be kicking yourself when you have to change all those other versions, too.
7. Move shapes while you draw them
This tip is just super practical. When you’re drawing a shape (say, a circle), it’s tough to get the placement just right on the first go. But if you hold the spacebar while drawing, you can move your shape as you create it, then continue sizing it before committing it to your artboard.
8. Change opacity on the fly
This works just like it does in Photoshop, but a lot of people still don’t know about it. Use the number keys (1–0) on your keyboard to set opacity levels in 10% intervals.
9. Save frustration with “Scale”
We all make mistakes—let’s say you designed a button, but made it way too big. You’ve got a border radius of 20px and a 4px outline. If you just drag the corner to shrink it, you’re going to be unhappy with the result. So instead, click Scale and resize to the dimensions you need.
10. Maximize your workspace
If you’re working on a smaller screen, just about any app can start to feel cramped, and Sketch is no exception. To hide the left and right panels, press Ctrl+Option+Cmd+3. Or, show / hide the left and right panels individually with Ctrl+Option+Cmd+1 or Ctrl+Option+Cmd+2.
11. Drop Sketch files into InVision
Handily, you can drop Sketch files right into InVision to automatically turn your artboards into screens. If you want to exclude a certain artboard or page, just add a minus sign in front of the layer or page name, like so: “-modal exploration”
Sound too easy? Here’s proof:
What do you think? Have a tip we should add? Tell us the one thing you wish you’d known about when you first started using Sketch.
by Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.
