How to Create Interactions in Sketch Prototypes

Prototyping with Anima Tip #1 out of 6

To see it live 👉Click here

Tip #1 of 6 of the anima prototype series:
Interactions| Breakpoints | External links |Overlays|Background videos|

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 the Anima plugin for Sketch, Adobe XD, or Figma.

Design to Code, Automated.

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’

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.

Edit the 2nd state of the interaction

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)

Define action and event

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

Adjust the transition timing and curves

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.

To see it live in browser 👉 Click here

7. Share

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

Design to Code, Automated.

Next tip (Breakpoints) →

What is Anima?

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima Team