Prototyping in Sketch: Everything you need to know · Sketch Blog

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 frames 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!
To start prototyping in Sketch you’re going to need some frames. In this case, it’s easier to work with frame 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 F and select them from the dropdown in the Inspector.
Once you’re ready, it’s time to start linking them. An Interaction or Link connects a layer to the frame 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 frame.
You can link frames by using any of the frames or layers within them. To create an Interaction, select the frame or 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 frames or layers on hover. All that’s left to do is click the frame you want to link to, and done!
To remove an Interaction, you can click on the Trash icon simply, set its Target to “None” or select the layer and choose Prototyping > Remove Links from Selection from the menu.
To remove an Interaction, click on the Trash icon or select the layer and choose Prototyping > Remove Links from Selection from the menu.
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.
Custom layer visibility helps you recreate life-like interactions that help you test how interacting with your design feels.
You can use the Target dropdown in the Interaction section to select a different frame to link to — including “Previous Frame”, which will always take you back to the last frame you were looking at. This is super useful if you’re creating a prototype where a single frame is accessible from multiple other frames, 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.
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.
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 frames. Press W to create an interaction from one frame to another (your interaction can start from a layer, Hotspot or an entire frame), 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.
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 a frame. 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 frames 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.
You can create menus, modals, messages and many other UI elements using Overlays, a special type of frame.
To turn an existing frame into an Overlay, select it, head to the Prototype tab of the Inspector and toggle the frame type from Screen to Overlay. You can also create a link to any type of layer that’s smaller than the parent frame — we’ll create an frame 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.
By default,