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.
Anima Toolkit is a tool for creating Responsive and Interactive High-Fidelity Prototypes, all Inside Sketch! 💎
High-Fidelity Prototype - Created completely in Sketch, in minutes
Some of Anima's High-Fidelity Prototyping Features
- Responsive Layout
- Interactive Components
- Text Input and Forms
- And a lot more more, all created with visual tools, inside Sketch
👷♀️ Let's Build One!
We’ll use a Dashboard example to go over the major features, and how to create impressive prototypes that feels real in minutes.
🔗 Adding Links
We will link the login screen to the dashboard.
- Select the Login button
- In Anima Panel, select the Prototype tab, expand the Flow section and click on Links
- Point the arrow towards the target: Dashboard artboard
ℹ️ Tip I: Sketch native links will also work in Anima
ℹ️ Tip II: Links inside Symbols
If you have a repeating set of links, like the left bar on our Dashboard, you want to create a Master Link with Symbols:
- Make the Left Bar into a Symbol
- Place the Left Bar Master Symbol on the same Sketch Page with your artboards
- Create a link from the Master Symbol to its target artboard (Dashboard)
Now, the link will work anywhere you place the Left Bar Symbol!
🏠 Set a Home Artboard
When using multiple artboards (multiple prototype pages) let Anima know your homepage by selecting the home artboard & clicking 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 first 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.
This is how we set up Pins on the Login form.
ℹ️ Tip: Advanced Pins Options
- Expand the panel to get more control such as use percent values, min-max width and height, and more.
The Dashboard sample is designed for desktop only, so we don't demo breakpoints here.
If you designed for different screen sizes, we have to tell Anima "These artboards are the same web page but in different screen sizes".
Select the artboard for Desktop, and using Prototype Tab > Flow > Breakpoints, connect it to the Mobile version of the same page.
Using the Interaction Editor (Prototype tab > Interaction), you can create awesome interactions right inside Sketch. Let’s start with the Switch example on the Dashboard ‘Settings’ page.
ℹ️ Best practice is to create interactions inside symbols. When used inside a symbol, you can reuse those interactions, or even create an interactive library.
Select the Switch symbol, jump to Prototype tab and click Create on Interaction section.
States start from your original Symbol design and you can change the properties of the layers you wish to animate or interact with.
In our toggle switch example, we need to create ON and OFF States:
- The ON state is already done (State1) ✔️
- For the OFF state, move the Knob layer to the left and hide "On Background"
Now, let's connect these two States:
- Select State1
- Click on the blue lightning icon and connect it to State2
- Choose "On Click" from the Action options
Using the the Transition timeline at the bottom, you can adjust timing and curves to perfect your animations.
For this interaction, we’ve reused a single Interactive Symbol, and used Sketch overrides to change the label content.
Using the Interaction tool, 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.
⏳ 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.
🔳 Create 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, Payment Method overlays the Settings page.
See this example live.
Overlays are as as easy as creating two links:
- Select the "Change Payment Method Group" and link it to "Payment Popup"
- Check the Overlay box in Links
Now, to allow user to dismiss the overlay, select the layer you wish to be a dismiss button, and link it to the "Dismiss Overlay" option at the top of the all the artboards.
ℹ️ Overlay Tips:
- Change the artboard background color to a transparent color by moving the transparency slide to the left, or as you see in this example, set it at 70% transparent. Make sure that "Include in export" is checked.
Live Text Input Field, Forms, Videos and More
With Anima tools you can create real Text Input fields, making your prototype feel more alive!
In our example, select the text layer with the Card's information. Under Prototype Tab > Smart Layers > Forms, select Text Input.
As you can see, there are many other great Smart Layer features: Videos/GIFs, Embed Code, Entrance Animation, Fixed Position.
👫 Time to Collaborate!
You can share a Project, create Teams, receive feedback as Comments, and more, all in one place.