How to Create Interactive Design in Sketch, and Export HTML

Anima for Sketch — Tutorial & Freebie

Anima App
Anima App
Jul 24, 2018 · 4 min read
Image for post
Image for post
Create High-Fidelity Prototypes in Sketch or XD, and Export HTML
Image for post
Image for post

Open Interaction Editor

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

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

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.

Image for post
Image for post
Click the lightning icon to add action
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.


Image for post
Image for post
Require login or make it public

Image for post
Image for post
After Timeline’s `Code Export` — link
Image for post
Image for post
Create High-Fidelity Prototypes in Sketch or XD, and Export HTML

Design + Sketch

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

Anima App

Written by

Anima App

Empowering designers. Changing the game.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Anima App

Written by

Anima App

Empowering designers. Changing the game.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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