All Collections
Designer's Guide to Anima
Tutorials by Design Tool
Anima for Sketch - How to Create a High-Fidelity Prototype
Anima for Sketch - How to Create a High-Fidelity Prototype

Creating a Prototype That Feels Real, Right Inside Sketch

Or avatar
Written by Or
Updated over a week ago

Anima Toolkit is a tool for creating Responsive and Interactive High-Fidelity Prototypes, Right Inside Sketch!

Let's Build a Prototype

We’ll use a Dashboard example to go over the major features, and how to create impressive prototypes that feels real in minutes.

We will link the login screen to the dashboard.

  1. Select the Login button

  2. Prototype Tab > Flow > Links

  3. Select the target: Dashboard artboard

Tips for Links

  • Sketch native links will also work in Anima

  • Create links inside Symbols when using bars across your designs:

Set a Home Artboard

Let Anima know your homepage by selecting home artboard & clicking:
Prototype Tab > Flow > Set as Home.

Preview in Browser

Time to see it comes to life! 

Responsive Layout

We want our design to feel real on different screens sizes.
Let’s jump to the first tab — Layout.

Here’s how we’ve used the Layout Pins to make the example above responsive:

Interactions

Using the Interaction Editor (Prototype tab > Interaction), you can create amazing interactions right inside Sketch. Let’s create a Switch on the Dashboard ‘Settings’ page:

Select the Switch symbol, click:
Prototype Tab > Interaction > Create

States start from your original Symbol design and you can change the properties of the layers you wish to animate or interact with.

Creating an Overlay

Overlays are very similar to links, except they have a transparent background and appears on top of the original page. 

In our example, Settings page has an Overlay for Payment Method.

  1. Select the "Change Payment.." layer and link it to "Payment Popup"

  2. Turn on Links > Overlay:

Live Forms, Videos and More

With Anima tools you can create real Text Input fields, making your prototype feel alive!

In our example, select the text layer with the Card's information. Select Prototype Tab > Smart Layers > Forms > Text Input:

❗️Please note:

  • Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.


Get involved in our Anima Community Forum!

Learn More

Did this answer your question?