Prototyping in Sketch: Everything you need to know

We’ve covered all the basics in our guide to getting started with prototyping, but here we’re taking things a step further! Today, we’ll learn how to turn your static Artboards into interactive prototypes, bring them to life with Overlays, add movement with Smart Animate 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 viewport — 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 Тarget. That way, if you click, hover or press 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 W. 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!

To remove an Interaction, click on the Trash icon or select the layer and choose Prototyping > Remove Links from Selection from the menu.

Custom Layer Visibility

When setting your interactions, you can choose to selectively show and hide layers, groups, and Symbols when a user interacts with them in the prototype. There’s also a third option where you can toggle between showing and hiding every time someone clicks or taps it — perfect when designing switches or different states for icons.

You’ll find these options in the Prototype tab in the Inspector. Select a layer, a group or a Symbol and select Custom in the Layer Visibility panel. Then, in the Action options, choose whether you want to show, hide or toggle the element. If you choose to show or hide your layer, select what interaction will trigger the action in the Trigger On menu.

Customizing your interactions

You can use the Target dropdown in the Interaction section 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 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.

A key part of making your prototypes more realistic is defining how interactions should feel. You’ll find several options to choose from in the Animation options in the Inspector, but you can also opt for no animation.

Bringing movement to your prototypes with Smart Animate

Smart Animate looks for changes in the position, size, rotation or shape of layers with matching names and animates them. You can use Smart Animate in multiple scenarios, such as giving a sense of progress or moving a navigation menu into view. If you need some inspiration, check out our guide to learn four ways you can use Smart Animate in your prototypes.

To set up Smart Animate, make sure the layers you want to animate have the same name across multiple Artboards. Press W to create an interaction from one Artboard to another (your interaction can start from a layer, Hotspot or an entire Artboard), then choose Smart Animate as the Animation type in the Prototype tab of the Inspector. You can then customize the duration and easing settings to the timing of your animations and make interactions work just like you want.

Hotspots: what they are and when to use them

In some cases, you may want the clickable area of an interaction to be bigger or smaller than the layers on the Canvas. This is where Hotspots come in — a dedicated interaction layer that can be sized and positioned freely

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 I to start drawing one right on the Canvas (make sure you don’t have a layer selected).

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 — or view our documentation.

How to trigger Overlays on hover, press, and toggle

By default, Overlays appear when you tap/click on the trigger layer, but you can change the type of interaction to hover or press as well, depending on what you need.

• Hover is great when you’re prototyping tooltips or dropdown menus, for example.
• Press triggers are great when you need additional information appearing only while pressing and holding the element — for example, when you want to mimic the action of holding an image’s thumbnail to preview it larger.
• Lastly, with the toggle option you can show or hide an overlay whenever you tap/click on it — handy when designing pop up menus, for example.

You’ll find all these options in the Prototyping tab in the Inspector once you’ve created an interaction. In the video below, we run through everything step by step so you can practice along.

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.

Creating scrolling areas and prototypes

You can create both scrolling prototypes or make specific areas in your Artboard scroll in any direction you want — this is great for things like cards or interactive maps.

Creating 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 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 Fix position when scrolling box in the Prototype tab.

Creating scroll areas

Scroll areas are great when you want to make a specific part of your design scrollable, like a map or a row of cards. You can make elements inside these areas scroll in any direction you want. To make an area scrollable, simply select the elements you want to scroll, head to the Prototype tab in the Inspector and hit Make Scrollable. Sketch will automatically recognize the direction and make your area scroll vertically, horizontally or both. Then, use the orange handles to adjust the scroll areas to show exactly what you want.

We recommend using scroll areas along with Symbols, this will make it easier to edit content inside scroll areas. Check out the video below for a detailed walkthrough on how to do this.

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. Check out our docs to learn more on how to preview your prototypes on the web app and iPhone app.

Share your prototypes

You can share your prototypes on the web app where anyone with the link can view and play them — 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 Document Details.

To share a prototype from the web app, open the prototype and click the Copy Link icon on the upper right side of the toolbar. From here you can also toggle the checkboxes to hide Hotspots and hints, and/or the toolbar and navigation — great when sharing with clients so they can fully focus on the prototype. You can also share prototypes directly from the Preview in the Mac app. Hit the Share button, choose whether you want to hide or show Hotspot hints and navigation items.

You can also enable comments to let viewers leave feedback directly within the prototype player — perfect for collaborating with colleagues or getting feedback from clients right away. To find more share options, click on the ⋯ in the top nav bar.

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 excited to get started on your next prototyping project. And if you need any or have feedback for us, you’ll find us in our Community Forum.