How to Create Interactive Design in Sketch, and Export HTML

Anima for Sketch — Tutorial & Freebie

Anima (was Timeline) is a tool for interaction design, right inside Sketch.
After crafting your interaction, you can actually share it as a live HTML, embed it in your site, or handoff to the development team.

Create High-Fidelity Prototypes in Sketch, Adobe XD, or Figma and Export HTML

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

On this tutorial, we’ll start from this basic interaction.

First, if you don’t have Anima plugin download it here👈
Then, you can download the Sketch file here👈

Open Interaction Editor

To enter the Interactions editor, select the Artboard, and click Prototype Tab > Interaction > ‘Create’ button in the plugin panel.

Select symbol and click Prototype Tab > Interaction > Create for Interaction Editor

Once in Interaction Editor, you can see that a second State was already created for you. States start from your original artboard or group design, but allow you to change the properties of the layers you wish to animate. In other words, you can override the original state of the artboard.

Create an Action

In order to add an Action, choose the layer you want to add action from, and then click the little lightning icon. In our example, choose the purple round button.

Click the lightning icon to add action

When the Event menu appears, choose the event On Click.

Choose action: On Click

Design the Second State

In the next step, edit the second state: turn the arrow into the Checkmark sign by rotating the arrows head by 135°, and the arrows line by 45°.
Using the bottom animation panel, set both animations duration to 3 sec by selecting the corresponding blue bands.

Next, hide the ‘Subscribe’ layer, and set the animation duration to 2 seconds. Add a delay of 3 seconds by dragging the corresponding blue band or by selecting it and entering the value in the right panel.

Reveal the ‘Thank You!’ layer and set the animation duration to 4 seconds. Add a delay of 4 seconds by dragging the corresponding blue band or by selecting it and entering the value in the right panel.

Here’s how it should look after you edit `state2`

Run it

Once you’ve set everything up, you can preview the component by clicking Run Component. While running a component, you can click or hover it to see how the component behaves right inside Sketch.

Hit `Run Component` to try it

Export Code

Now that the design part is done, click on Export Code.
After a few seconds of upload, a popup with a link to share will appear.

This is the link for our example: http://bit.ly/SubscribeSample

Tip: If you want your link to be password protected, you can leave the Require Login checkbox checked. Otherwise, if you want you link public, uncheck it.

Require login or make it public

After clicking Open, you can play with the live component in your browser, share it or even download the code.

After Timeline’s `Code Export` — link

That’s all for today!
More tutorials are coming soon.

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.

Design to code, automated.

As always, we’re excited to hear your feedback!

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

Stay creative!
❤️ Anima team