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.

High-Fidelity Prototype - Created completely in Sketch, in minutes.

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Learn how to create a responsive high-fidelity prototype in Adobe XD using Anima.

The Very Basics in 20 seconds

Start by installing Anima plugin 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.

The Basics: Create Links & Preview Website

Dashboard Sample

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.

• Download Sketch file here.
• Visit live prototype here.

https://dashboard-sample.animaapp.io

Links

Select a layer to add it a link. Click the Links button in Anima Panel, then select the target artboard.

Creating a link. You may use Sketch native links as well.

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.

Select Artboard, 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.

How we set up Layout Pins on the Login form

Tip: Expand the panel to get more control, i.e use percent values, max width, and more.

Interactions

Using the Interaction Editor, you can create awesome interactions right inside Sketch. Let’s start with the Switch example on the Dashboard ‘Settings’ page.

Switch behavior on our prototype

Best practice is to create interactions inside symbols. When used inside a symbol, you can reuse those interactions, or even create an interactive library.

Creating an interaction from a Symbol

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.

Hover Effect

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.

Creating a hover effect in Anima Interaction Editor

Time-based Animations

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.

On Anima Interaction editor, use Timer event

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.

https://dashboard-sample.animaapp.io/settings

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.

Anima Links can show target artboard as a floating overlay

Tips:
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.

Prototype Tab > Smart Layers > Forms

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.

Want to Learn More?

• Team Collaboration
• How to export HTML
• Anima full documentation page: docs.animaapp.com
• More tutorials on our Support center

That’s all for today’s tutorial, we hope you liked it.

Join the discussion, or just show off your designs on Facebook or Twitter.
❤️ Anima team