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.

How to Add Links

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:

Learn more about Layout

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.

Learn more about Interactions

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:

Learn more about Overlays

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:

Learn more about Smart Layers:
Entrance Animations, Hover Effect, Fixed Position,  GIFs & Videos, Forms, Embedded Code.

Learn More

Did this answer your question?