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

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.

Tips for Links

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

Time to see it comes to life! 

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

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
​

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.

Learn more about Overlays

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.
​