Timeline 2.0 — Interaction Design for Sketch

Design Interactions and Export Code, Directly in Sketch

Anima App
Anima App
Jul 2, 2018 · 4 min read

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

Our mission is to bridge the gap between designers and developers. Enormous amount of time and effort during a product development cycle is spent on designers communicating to developers how the product should look and feel, and usually things get lost in translation.

If you’re a perfectionist that cares about the small details, that can be pretty frustrating. Enters Timeline.

Update: Timeline is now part of Anima Toolkit — Allowing designers to create Responsive and Interactive High-Fidelity Prototypes, all inside Sketch

Create Responsive and Interactive High-Fidelity Prototypes in Sketch, Adobe XD, or Figma
Click “Run Pen” and then on the top right buttons. This interactive component was done by our designer, Michal. No manual coding was needed.

One of the things that can create a great user experience are animated interactive components woven into our design.

But in today’s world we are limited in the ways we can explain these complex designs elements to developers. Common practices are creating GIFs or waiving our hands to explain how a button should behave when the user clicks it.

Interactive Components in a website designed by Stripe — https://stripe.com/us/billing

Today we are excited to announce that we have reached the second stage in our secret plan of Anima. Interactive Components are here to completely change the game for designers and developers.

For the first time, designers can create interactive components and export them as code.

So what are Interactive Components?

That’s a good question.

An Interactive Component:

  • Has States.
  • Has Transitions between States.
  • Has Actions that users can perform, such as click and hover, that triggers Transitions between States.
Buy Now — Interactive Button with Hover

With these 3 simple concepts of States, Transition, and Actions, anyone can create fully-functional Interactive Components.

Some examples of Interactive Components are Buttons, Loaders, Tabs, Switches, Checkboxes, etc.

✏️ Interaction Editor in Sketch

Anima Interaction Editor
Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

The Timeline Editor is where the magic happens.

Starting from your Sketch design, an Artboard or a Group can be selected and loaded into the Timeline Editor.

For a component to become interactive, we’ll add one or more States where in each state layers can be shown or hidden, re-positioned, or rotated.

Next, we’ll add Actions which are a combination of a Layer, an Event (click/hover) and a Target State. In our example, when a user hovers over the pink background layer, a transition to state1 is triggered.

Selecting the pink background reveals its Actions panel

The animations within Transitions can be completely customized using the easing panel on the bottom right.

Transition animations can be fully customized

🔍 Preview Component

Once you’ve set up everything, you can preview the component.

In Preview mode, you can hover and click and see how the component behaves right inside Sketch.

👊 Export Code

Now this is where it gets interesting!

Creating amazing components is just the first step of the journey for your design. There is one more important step before users can feel and appreciate all your hard work. And it involves actually coding the component and integrating it into the final product.

With Export Code, instead of waving hands trying to explain components behavior, developers can actually interact with it, and inspect the actual code the make it run.

Code is a universal language. We are breaking the language barrier by translating design into code.

❓FAQ

Q: Does it support nested components?

A: Yes.

Q: Which code does Anima export?

A: Today Timeline exports vanilla HTML/CSS/JS with no dependencies. Our roadmap includes React, VueJS, Angular, Lottie, iOS and Android.

Q: How much does Anima cost?

A: It starts free, and it’s free for a single project, check out the plans page.

Create Responsive and Interactive High-Fidelity Prototypes, All Inside Sketch

Head over to our website and start creating amazing interactive components and prototypes for your products today: www.animaapp.com

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store