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
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.
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.
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
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.
The animations within Transitions can be completely customized using the easing panel on the bottom right.
🔍 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.
Head over to our website and start creating amazing interactive components and prototypes for your products today: www.animaapp.com
