Design better experiences Get started free
InVision Enterprise Learn more
The world's smartest companies use InVision

The world's smartest companies use InVision Enterprise Edition

Design Resources

11 tips for prototyping with Sketch

by

on

View all posts

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

artboards

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

layout

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

duplicate

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.

Note: If this doesn't work as shown above, go to Preferences > Layers and uncheck Offset pasted & duplicated objects

4. Measure distances

measurement

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

styles

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

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

drag

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

transparency

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”

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

maximize-space

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.


Curious how the GIFs in this post were made? Check out our tutorial.
Author

Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 1 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 1 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 1 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 1 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 1 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.