How to create interactions in Sketch prototypes - Anima Blog
Design

How to create interactions in Sketch prototypes2 min read

Reading Time: 3 minutes Prototyping with Anima Tip #1 out of 5

How to Create Interactions in Sketch Prototypes

How to create interactions in Sketch prototypes2 min read

Reading Time: 3 minutes

Part #1 of a 5 part series: prototyping with Anima in Sketch

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

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 > CreateAnima 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 (Creating interactions on Sketch with Anima)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)

Creating interactions in Sketch with Anima: Define action and eventDefine 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

Creating interactions in Sketch with Anima: Adjust the transition timing and curvesAdjust the transition timing and curves

5. Run in Sketch

  • Use ‘▶ Run Component’ in the toolbar to watch the magic unfold ✨

6. Preview in Browser

Ready to see the whole thing?

Creating interactions in Sketch with Anima: To see it live in browser 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.

Discover more tips for prototyping with Anima in Sketch:

What is Anima?

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

Join the discussion or show off your designs on FacebookTwitterSlackInstagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima Team

|

Co-founder & CPO

UI/UX master with a keen eye for user journeys. Working on improving the handoff from design to code and creating better interfaces. A huge fan of music festivals and a chocolate lover.

Leave a comment

Your email address will not be published. Required fields are marked *