How to easily get a prototype for your Sketch design up and running
What is Sketch?
Sketch is a professional design tool for Mac that utilises a fully vector-based workflow. Its simple layout, features and plugins make it a very capable replacement to other design tools like Photoshop. Here at Impression, we use it for creating UI, mobile, web, icon and wireframe design.
The new Prototyping update
To many Sketch advocates across the web, the latest update has proven to be one of the most memorable to date. Prototyping has long been a sought-after feature in the much loved design tool, and the latest installment has yet to disappoint the expanding fan base currently here at Impression.
Filling the grey areas between design and development have sometimes proven difficult up until this point. Static designs often fall short of expectations when trying to imagine the details of how a website, app or project is going to interact. That’s where prototyping steps in!
With a few quick tricks, that static collection of artboards can start to take shape and become a simple and effective way to showcase an interactive demo to clients and colleagues alike.
To get started with prototyping, I’ve created a very simple Sketch file, with a basic structure, that we will use as the foundations of our prototype – go ahead and take a look. Yup, nothing too fancy, but setting up your structure correctly is the key to creating a fast prototype, with the help of artboards and symbols.
Artboards & Symbols
The best approach to most designs in Sketch is to use Artboards & Symbols, and prototyping is no different. In prototyping, Artboards act as pages, and the power of symbols can be used to instantly create the same links across all artboards, just like you would refresh a symbol currently. In order to ensure a flexible working prototype, getting your Sketch designs set up in this structure will ensure a swift and easily adaptable prototype.
The magic of Sketch prototyping is within links and hotspots. Before we get stuck in, I recommend customising your Sketch toolbar to better put to use these new tools. As you’ve probably noticed, a few new icons have appeared in the top right corner of your GUI, looking something like this.
We will look more closely at Preview and Cloud later, but for now, let’s concentrate on adding all the required tools to our toolbar. To do so, right click in the space either side of these icons, and select ‘Customise Toolbar’. In the drop down that follows, find and drag the two tools ‘Show Prototyping’ and ‘Hotspot’ to sit alongside the others, like so:
Now that we have all our tools in place, lets start linking our artboards.
Linking & Hotspots
In the Sketch file, navigate to the Symbols page, and select the Navigation symbol, in here, we will start creating our links and hotspots.
To quickly summarise, both linking and hotspots navigate to a new artboard, but only hotspots can be overruled outside of the symbol view. If you are looking to create a link that always navigates to the same artboard e.g. about text always goes to about page, then ‘linking’ is the ideal solution. However, if you are looking to potentially override that link, on different artboards, then hotspots will allow this. One example could be changing the Contact Us button destination, depending on what artboard you are currently on.
To set up a direct link, highlight the element you are adding the link to, and either click on the link icon, or in the right panel, click the plus icon next to the ‘Prototyping’ block.
Once clicked, a new sub block ‘Target’ will appear, navigate in the dropdown and select your destination artboard, like so:
Once activated, navigate back to your page view, highlight your navigation symbol, and you should see an arrow showcasing which artboard your link will take you too, like so:
Apply this to your logo, and other two links, and we’ve almost got a fully working navigation in place.
For hotspots, click on the contact us button inside the navigation. You may notice this button is a symbol inside a symbol, but not to worry, this will allow us to use the button across the Sketch file and always give us the option to override the prototype link. Double-click the button, and it will focus on the independent symbol, now click the hotspot icon in the top right, hover over the button (you should see the link symbol) and click. You should notice an orange border around the button, and in your left panel, a new ‘hotspot’ element inside your button symbol.
You can assign the target just like linking (in the right-hand panel under target). Now navigate back to your page view, and click on the Navigation symbol, and if you look to the right, you should see the option under override to change the contact us hotspot, pretty cool ay?
If you decide not to override the contact us hotspot, then the predefined target in the symbols area will be used, so you only need to use the override when necessary.
Quick tip – link colours
It’s worth noting, that you can always update the link colours in your Sketch preferences, just in case you have a colour clash in you design, or don’t like orange.
Now it’s time to take a look at the links in action, once you’re happy with your links and hot spots, click on the preview icon!
Clicking anywhere in the preview box will give you a flashing indicator of the links, and there is also the ability to resize the preview box if you are presenting the prototype, or want a better idea of the scale.
Quick tip – Flagging your starter page
The flag icon next to the select drop down is a great way to indicate which of the Artboards in your prototype is your home page. Once selected, every time you open the prototype, this Artboard will be the first page. This will also set the home page when sharing the prototype in the cloud!
You may have noticed underneath the target area on the right panel the option to add animations between your Artboards.
Using animations is a great way to add more life to your prototype, however, at the moment these are definitely more tailored towards app prototypes, and don’t offer much flexibility if demonstrating a website design. That being said, I expect this list to grow in future updates of Sketch, and if you intend to slide across your content, then fire away!
Sharing your prototype & the Cloud
I must admit, Sketch have outdone themselves with the free sharing and cloud feature. Once you’re happy with your prototype, click on the Cloud icon, sign up with an account, and upload your designs to the cloud.
The dashboard on the cloud is pretty self explanatory, with prototypes, Artboards and symbols available to view in order. Sketch figures out the flagged page from earlier, and gives us the option to open the prototype straight away.
Comments & Sharing
If you are looking to get feedback on your prototype or designs, or want to share the prototype on a public link, click on the cog icon in the top right corner of your cloud dashboard.
Here, you can enable comments (which will appear once viewing a design by clicking the bottom right icon), and create a public link for your designs for sharing. You can, of course, keep the designs private, and give access via email, to those lucky few.
Quick tip – Share your prototype via URL
If you are looking to share a direct link to your prototype, without the user having to navigate in Sketch cloud, adding ‘play’ or grabbing the URL in prototype mode and enabling a public share link will work, e.g.
So there you have it, a pretty straight forward way of creating a prototype of your designs using Sketch cloud! With some extended customisation on your designs, you could create a working prototype that demonstrates transitions between all areas of your Artboards.
Features for the future
I think we can all agree that this prototype feature is very useful, and acts as a great foundation to build on for future prototyping. However, here’s just a few features I would love to see in future versions, that could make a massive difference when showcasing to colleagues and clients.
- More animations: Having the ability to fade, would be invaluable.
- Hover states: Although complex, I do feel being able to add hover states to show elements such as a drop-down would be an incredibly useful addition.
- Limited cloud view: At the moment, I am yet to see an option to hide symbols and Artboards on Sketch cloud, which could cause issues when sharing your designs.
Got any thoughts on Sketch prototyping? Let me know!