An in-depth look at Prototyping in Sketch

In the past, we’ve talked about how to get started with prototyping, but now we’ll take things a step further. Today, we’ll learn how to turn your static Artboards into interactive prototypes, make them pop with Overlays, and preview them without ever leaving Sketch. We’ll also show you how to test your prototypes in context on an iOS device, so you can get a feel for how it’ll work in the wild.

Let’s get prototyping!

Getting started

To start prototyping in Sketch you’re going to need some Artboards. In this case, it’s easier to work with Artboard Templates instead of custom-drawn ones. That’s because templates help the Prototype player understand the proper dimensions of your Artboard — which will come in handy when working with more complex prototypes. But more on that later!

You’ll find a whole host of built-in Apple and Android device templates you can use to get started. Just press A and select them from the dropdown in the Inspector.

How to add Interactions

Once you have your Artboards, it’s time to start linking them. An Interaction or Link connects a layer to the Artboard you want to transition to — also known as the Target. That way, if you click on that layer while previewing your prototype, it’ll take you to the destination Artboard.

You can link Artboards by using any of the layers within them. To create an Interaction, select the layer and press I. You can also head to the Prototype tab in the Inspector and click on Create an Interaction. Now, you’ll see an unplaced link attached to your cursor, and you’ll notice we’ll highlight any linkable Artboards or layers on hover. All that’s left to do is click the Artboard you want to link to, and done!

Customizing your interactions

Once you’ve set your interaction, you can define a transition animation for it. You’ll find several options to choose from in the Animation section of the Inspector, though you can also opt for no animation.

If you want your layer to remain static in your prototype preview, even when you scroll through the rest of the content, you can check the Maintain scroll position after click box right underneath the Animation section.

At the top of the Inspector, you can also use the Target dropdown to select a different Artboard to link to — including “Previous Artboard”, which will always take you back to the last Artboard you were looking at. This function is super useful if you’re creating a prototype where a single Artboard is accessible from multiple other Artboards, like a screen with a back button.

Hotspots: what they are and when to use them

In some cases you might find adding an Interaction to a layer doesn’t give you the result you need. If you want the clickable area of an icon or menu item to be larger than the layer it’s inside, for example, an Interaction can’t do that — but a hotspot can.

Hotspots allow you to draw a target over any part of your design and link it to an Artboard. You can add a hotspot via the Insert menu, or press H to start drawing one right on the Canvas.

You can also convert an Interaction to a hotspot by selecting a layer with an Interaction and clicking the “Create Hotspot” icon in the Inspector — handy if you’ve already connected up a bunch of Artboards but decide you need to change the hit area later.

Hotspots are extra useful because you can place them inside Symbols where you can then override the Target destination. This way, you can reuse a Symbol but change the Target destination each time. You can also use this behavior to hide a hotspot by choosing “None” under “Hotspot” in the overrides panel.

How to add dynamism with Overlays

You can create menus, modals, messages and many other UI elements using Overlays, a special type of Artboard.

To turn an existing Artboard into an overlay, select it, head to the Prototype tab of the Inspector and toggle the Artboard type from Screen to Overlay. You can also create a link to any type of layer that’s smaller than the parent Artboard — we’ll create an Artboard around it and set it as an overlay for you.

You can stack multiple overlays, have them replace each other, and set animations for each of them. If you want to learn more about Overlays, check out our comprehensive guide.

Setting Start Points

Start Points are markers that let you specify which Artboard your prototype should start playing from. To set a Start Point, Control-click on the Artboard and select Set as Start Point from the menu. You’ll know it worked when you see a icon appear next to the Artboard’s name.

Usually you’ll want to set a Start Point at the beginning of a flow. However, setting multiple Start Points can be really useful — for example, if you’re building complex prototypes with many Artboards, or if you only want someone to view a particular part of your prototype.

How to create scrolling prototypes

There’s only one golden rule for creating scrolling prototypes in Sketch: make sure you use a Template. If you’re using custom-drawn Artboards, they may appear zoomed out to fit the height of the viewport rather than scrolling the way you expect them to. That’s because Sketch needs a preset ‘screen size’ to understand when your content is spilling beyond its confines.

Once you have your Template placed on the Canvas, all you have to do is change the height of the Artboard. Now, whenever you preview the prototype, you’ll get that slick scrolling effect. And remember, if you want to keep any element of your prototype static, just check the Maintain scroll position box.

Preview your prototypes in Sketch

Once you’ve created a prototype, the next step is previewing it to see if your flows work and your transitions make sense. You can preview your prototypes directly in the Mac app, the web app — where you can share your prototypes with clients and colleagues — or on your iOS devices, using our iOS app.

To play back your prototypes in the Mac app, click the Preview button in the toolbar to open the Preview window. Your prototype will begin at the currently selected Artboard, unless you set a Start Point elsewhere.

At the top of the Preview window, you’ll see a back button that will take you to the previous Artboard. You can navigate to a specific Artboard by selecting it from the dropdown menu at the top of the window.

Share your prototypes

As well as previewing in Sketch, you can also share your prototypes on the web app where anyone with the link can view and play it — from any browser or device. All you have to do is set a Start Point and save your document, and we’ll generate that prototype preview for you in the web app.

You’ll find your prototypes under Views in the web app’s right-hand sidebar. And just like any document on your Workspace, you’re in control of who can see your prototypes.

You can invite clients or colleagues via email, share the link with your team or make the document public so anyone can see it. You can also enable comments to let viewers leave feedback on individual Artboards — perfect for collaborating with colleagues or getting feedback from clients.

Test your iOS designs in context

If you’re working on mobile interfaces, there’s no better way to test them than on the devices you’re designing them for. With the iOS app, you can simply preview your prototypes as you would in the web app. When you tap to view one, you can interact with it by tapping on tap targets to transition to another Artboard. Once you’re ready to exit, tap and hold for a few seconds.

And there you have it! Hope you’re feeling pumped to get started on your next prototyping project.