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.
- Download Anima plugin for Sketch, Anima plugin for Adobe XD, or Anima for Figma
- Download Sketch file
- You can see here the final result: Visit live prototype
How to Add Links
We will link the login screen to the dashboard.
- Select the Login button
- Prototype Tab > Flow > Links
- 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.
- Select the "Change Payment.." layer and link it to "Payment Popup"
- 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:
Learn more about Smart Layers:
Entrance Animations, Hover Effect, Fixed Position, GIFs & Videos, Forms, Embedded Code.