We’ve heard your feedback loud and clear on our recent survey. On this 6 tips series, we will cover the top topics you asked to learn about.
If you haven’t already, get Anima toolkit for Sketch.
A lot has been said about the value of interactions in User-experience.
With Anima, you may build Interactions without leaving Sketch, and it would magically work on your Prototype. Let’s dive in and learn how to add interactions to your prototype!
1. Interaction Mode
Select a symbol or an Artboard and click
Anima Panel > Prototype > Interaction > ‘Create’
2. Two-State Interaction
- In Anima interaction editor, you will see two artboards.
- Each artboard represents a different state of your interaction.
- Drag & drop elements you wish to change and adjust both states.
- In this example, move the toggle selector from ‘one-way’ to ‘roundtrip’.
- Show and Hide the correct text colors from the layer’s properties.
3. Adding Actions
- Select the ‘One Way bg’ layer on State1
- Add action by using the lightning button on the layer ⚡
- Choose the target state (State2)
- Choose ‘On Click’
- Do the same the other way around (‘Roundtrip’ to State1)
4. Timeline and Curves
- For each transition, you can now see a timeline on the bottom of the screen
- Adjust the transition timing for each layer
- Choose curves on the right panel
- You can play it in-place using ‘▶ Play Transition’ in the toolbar
5. Run in Sketch
- Use ‘▶ Run Component’ in the toolbar to watch the magic ✨
6. Preview in Browser
Ready to see the whole thing?
- Click ‘Back to Sketch’
- Select the prototype artboard
- Click ‘Preview in Browser’
- You made it! Here’s a link to a live sample.
- Once it looks good, use ‘Sync’ to sync your draft design into your project
- Share it with your clients, your team or your boss.
- You may also get a public share link for easier sharing.
That’s all for today, stay tuned for tip #2!
Have a creative week,
❤️ Anima team