Advertisement
  1. Web Design
  2. Sketch
Webdesign

A Walkthrough of the Prototyping Tools in Sketch

by
Difficulty:BeginnerLength:MediumLanguages:

Earlier this year, Sketch 49 was released, and along with it some long-anticipated prototyping features. In today’s walkthrough, I will go over everything you need to know about prototyping in Sketch, from must-know shortcuts, all the way through to getting feedback and collaborating with your team on designs and prototypes.

New Prototyping Icons

Along with the release of protoyping features came four new icons in Sketch’s toolbar. Perhaps most importantly is Hotspot which, when selected, will allow you to drop an interactive hotspot on the artboard. Next is Link to an Artboard which enables you to link and connect a hotspot to a destination artboard or target. The Show Prototyping icon allows you to toggle the yellow/orange prototyping UI on and off in Sketch. This is great if you’re still designing and don’t want to see all the links and hotspots in the app. Lastly is the Preview icon which enables a preview window to open up so you can use your prototype right there in Sketch. We’ll talk about that one in a lot more detail later.

Shortcuts

Naturally, Sketch implemented a few keyboard shortcuts with the release of their prototyping features. Personally, I love using shortcuts–I hope you’ll find them useful as well!

  • Press H to insert a Hotspot
  • Press W to add a link 
  • Press Control + F to toggle to hide/show the overlaying yellow/orange prototyping UI
  • Press Command + P to open Preview
  • You can also copy and paste hotspots (with links if they have them) between artboards the same way you would with any other design element.

Hotspots, Links and the Inspector Tab

To get a good understanding of how both hotspots and links work let’s take a look at their properties in the Inspector Tab. If you click on any element, you will notice a small tab for Prototyping with a plus symbol (+) to its right (exactly the same as with Fill, Borders, and Shadows). If you click the +, it will turn the element into a hotspot, and will automatically let you add a link for that hotspot too. If you click away from the elemnt you will lose the hotspot. But if you do add a link, you will then have access to prototyping properties for that hotspot.

The prototyping properties are relatively easy, as Sketch prototyping hasn’t yet become too complicated or extensive.

First is the Target dropdown. This is where the hotspot links to and where tapping on the hotspot will take you next. The default is what you’ve already selected but at this point you can:

  • change it to another aboard (they are organized by pages)
  • remove the hotspot altogether by selecting None 
  • choose Previous Artboard. This means that in the prototype flow, it will take you back to the artboard you came from. This is fantastic for “back” buttons. 

The last thing to know about properties in the Inspector is Animations. This dictates the transition which takes place when the hotspot is clicked. You have several options here:

  • No Animation
  • Animate Artboard from right
  • Animate Artboard from top
  • Animate Artboard from left
  • Animate Artboard from bottom

Working With Hotspots and Symbols

Hotspots can be created in one of two ways. You can manually create a rectangle on an artboard the same way you’d manually draw a rectangle or a text layer. Alternatively, you can select a specific layer or element. Any design element can be turned into a hotspot, including symbols!

Hotspot in sketch prototyping
A hotspot in action

When it comes to symbols specifically, a hotspot can be placed inside a symbol, instead of using one symbol instance as a hotspot. If you have a hotspot inside a symbol it will be repeated with every symbol instance, but you can override it just like any other symbol property such as changing an image, an icon or text. You can also override the hotspot altogether, effectively removing it from a symbol. This way you get to reuse symbols till the cows come home without worrying about unnecessary hotspots.

Icon in the Layers List

One cool little detail that Sketch included with prototyping is an icon in the Layers list. This is the same concept they have going on with Symbols and Exportable Slices. The presence of a Hotspot icon in amongst the layers makes the prototyping experience a little more comprehensible.

Scrolling Artboards

This feature is especially useful for longer pages for mobile designs! Sketch automatically enables scrolling for longer artboards. In the video example below you’ll see the article view for the dummy UI I’m using for this walkthrough. You don’t have to worry about setting anything up to get pages to scroll.

 

Setting up a “Start Point”

A Start Point is the default artboard from which your prototype begins. By default, there isn’t one, which means that if you choose to preview your prototype it will open on the artboard which was selected at the time of previewing. 

Defining a start point is a lot more useful once you’re ready to share it with someone. To select one, navigate to the desired starting artboard and open it in Preview. At the top of the preview window, select the little Flag icon. Every time you preview the prototype from now on it, it will begin from that starting point artboard. 

Deselect the Flag Icon (turning it gray again) will remove it as the starting point, however you can have more than one start point. Selecting the flag icon on another artboard will not remove it from any others! 

“It’s likely you would want to define a Start Point at the very beginning of a flow, but you can also define multiple Start Points — a feature that will be very useful when you’re building more complex prototypes that contain many Artboards, or if you only want others to view a particular part of your Prototype.” — Sketch docs

Previewing and Sharing your Prototypes

Currently, you can preview your prototype in Sketch with the help of the Preview feature. We’ve discussed this a one few time already. A window will pop over your Sketch app, and you can click around and make sure you have things set up correctly. 

There is another way to preview your prototype. If you’re specifically working with mobile designs, you can use it in Sketch Mirror. On both your iPhone and iPad, you can connect your device to Sketch. You can then preview the prototype more natively and in a proper setting. The hotspots will automatically be there, interactive and all.

Exporting and Collaborating

Neither Sketch Mirror nor the Preview window, make it easy to share your prototypes with other people. So if you’re looking to send it around to your team, or to run a quick usability test, you must do so through Sketch Cloud. A prototype can be viewed and used through Sketch Cloud by anyone who has a link. You cannot export a prototype like you would any other design or element from within the app.

You upload the prototype by default when you upload the current document to Sketch Cloud. It simply gets exported with the document.

If you have defined a start point, the prototype will be placed under its own prototype section in documents on Sketch Cloud. This is the only extra step you need to take to make sure your prototype is easily accessible to you through Sketch Cloud. Once you click on your prototype it will, naturally, start at the start point and will be interactive, all ready to go! 

Share the link to the prototype for anyone to access and use it. 

Comments on Sketch Cloud prototype

To aid collaborating, you can have people leave comments on your prototype (if you have comments enabled in Sketch Cloud). They will be able to leave comments for you on individual artboards within the prototype.

Prototyping Template

For more help, take a look at Sketch’s premade Prototyping Template. 

It’s under File > New from Template > Prototyping Template and has a bunch of side notes in it that explain the features. 

Conclusion

The new Sketch prototyping feature is rudimentary (for example, it only has four animation properties). However, it should make quick prototyping much easier. You no longer have to export your designs and then import them into an external tool such as UXPin or even Marvel.

I do think it can improve the workflow for designers who don’t need anything fancy or powerful. It should fit in seamlessly into their workflows; especially so if they are already using Sketch Cloud. If you need to quickly and swiftly put something together to show the user flow of your designs, this will definitely do the trick. It will help your team perform an initial flow or usability test as well. At this point, I don’t think it’s life-changing, but I can definitely see myself using Sketch’s prototyping in sharing with clients UI designs for upcoming projects.

Have you used the Sketch prototyping feature already? What do you think of it? How does it fit into your workflow? Share with us a link to a prototype you exported to Sketch Cloud so we can have a look too!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.