Timeline 2.0 — Interaction Design for Sketch

Design Interactions and Export Code, Directly in Sketch


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.


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


✏️ Timeline Editor in Sketch

Timeline Component Editor

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 Timeline 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 Timeline Components cost?

A: During the introductory period it is free.

Head over to our website and start creating amazing interactive components for your products today: https://timeline.animaapp.com