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, bring them to life 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 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 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!
To remove an Interaction, simply set its Target to “None” or select the layer and choose Prototyping > Remove Links from Selection from the menu.
To remove an Interaction, simply set its Target to “None” 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 groups or a Symbol and select Custom in the Layer Visibility panel. Then, in the Action section, 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.
Custom layer visibility helps you recreate life-like interactions that help you test how interacting with your design feels.
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.
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 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.
Animations help you quickly make your prototypes feel smooth — great when you don’t want to go high fidelity yet but still want things to feel polished.
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.
Want to learn more about Overlays? Check out our lesson on Overlays{: target=
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.
When your content needs more space than what fits on the display, you can use scrolling Artboards and keep anything you need in view.
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. There’s also an option to hide these controls, if you’re looking for a more immersive and focused experience.
Preview your prototypes often to check how things are feeling as you design — this will help you spot flaws faster and iterate right away
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 Document Details panel. And just like any document on your Workspace, you’re in control of who can see your prototypes. You can also share prototypes directly from the Preview in the Mac app. Hit the Share button and choose whether you want to hide or show Hotspot hints — ideal when testing your prototypes. From here, you can also choose to hide the web app’s UI and links back to the design file. This is great when sharing with clients so they can fully focus on the prototype.
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 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.
