How to Create a High-Fidelity Prototype with Sketch
Using Anima Toolkit to design realistic prototypes faster
Presentation-like static prototypes are great to see a product flow. But when it comes to really feel the product, and do usability testing, we usually need to have a developer in the process.
High-fidelity prototypes allow us to test user experience, without going through a development process.
Anima Toolkit is a Sketch Plugin for creating live web pages. It is the perfect tool for crafting high-fidelity prototypes as well.
Responsive layout, Interactive Components, Animations, Videos, Forms & more, all created with visual tools. And it’s all in Sketch 💎
The Very Basics in 20 seconds
Start by installing Anima Toolkit for Sketch.
- Create a link — Select a layer, click ‘Prototype>Flow>+Link’, select the target artboard. Oh, you can use Sketch native links too.
- Preview in Browser — Select your home artboard, click ‘Preview Website’.
Now you can see your live design in the browser. Boom.
On this article, we’ll use a Dashboard example to go over the major features, and how to create impressive prototypes that feels real in minutes.
Select a layer to add it a link. Click the Links button in Anima Panel, then select the target artboard.
Tip: Links inside Symbols - If you have a repeating set of links, like the left bar on our Dashboard, place Symbol Masters on the same Page with your design. Then, simply create a link from inside that symbol. The trick is to create another artboard, the turn it into a symbol. It will remain on the same page.
Set a Home Artboard
When using multiple artboards (multiple websites pages) let Anima know your homepage by expanding the panel, selecting the home artboard & clicking Prototype Tab > Flow > Set as Home.
Preview in Browser
So far, we’ve set a home artboard and created a link, time to see it comes to life. Hit ‘Preview in Browser’.
Responsive Layout with the Layout Tab
We want our design to feel real, not stretched and have it centered when browser size changes. Let’s jump to the most left tab — Layout.
If you haven’t seen our Layout tools before (Used to be Auto-Layout), here’s a quick guide:
Here’s how we’ve used the Pins to make the example above responsive. Pins works the same inside Sketch, and when you preview in browser.
Tip: Expand the panel to get more control, i.e use percent values, max width, and more.
Using the Interaction Editor, you can create awesome interactions right inside Sketch. Let’s start with the Switch example on the Dashboard ‘Settings’ page.
Best practice is to create interactions inside symbols. When used inside a symbol, you can reuse those interactions, or even create an interactive library.
Select the Switch symbol, jump to Prototype tab and click ‘Create’ on Interaction section.
Once in Interaction Editor, you can see that a second State was already created for you. States start from your original symbol design. Change the properties of the layers you wish to animate.
In order to add an Action, choose the layer you want to add action to, and then click the little lightning icon.
Using the Timeline at the bottom, you can adjust timing and curves to perfect your animations.
For this interaction, we’ve reused a single Interactive Symbol, and used Sketch overrides to chage the label content.
Using the Interaction tool on Prototype tab, we’ve created a two state interaction. The action events we’ve used here are ‘Mouse Enter’ and ‘Mouse Leave’ to make it work on hover.
When creating Interactions with Anima’s Interaction Editor, it is often useful to use a Timer event. Meaning that user performs no interaction — the transition starts by itself.
Show an Overlay
Overlays are very similar to links, except they have a transparent background and appears on top of the original page. On our example, in the settings page, the payment method is an overlay.
Just like we’ve created a link, Select a layer to add it an overlay link. Click the + Link button and select the target artboard. Now mark it as an Overlay in the Link panel.
1. Change artboard background color to a transparent color.
2. When the original screen has scrolling, but overlay has none, select the overlay artboard and make it Fixed. That’s right next to Overlay.
Live Text Field, Videos and More
Select the text layer that you’d like to make an input. Prototype Tab > Smart Layers > Forms, select Text Input.
Under Smart-Layers you’d also find Video button, allowing you to take rects and make them an embedded video. Videos only plays in browser, not in Sketch. Hover effects, entrance animations, fixed positions, an even embedding code is also possible using Smart-Layers.