How to Export Sketch to CSS Animations Code

Or how to communicate animations without waving your hands

Anima App
Anima App
Jun 14, 2018 · 3 min read

Our mission is to bridge the gap between designers and developers.

Enormous amount of time and effort during product development is being spent on designers communicating to developers how the product should look and feel. Usually things get lost in translation.

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

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

But until now we were limited in the ways we can hand off animations to developers. Common practices are creating GIFs or waving our hands to explain how an animation should look.

Trying to explain animations …

As developers, it’s time-consuming to try to reverse engineer an animation by looking at a GIF. It’s even harder to reverse engineer designers waving their hands trying to explain a custom ease-in-out timing function.

That’s why today we are starting our beta for a new feature of Timeline called Export Code.

Export Code

With Export Code, we can export our animations to actual code. This way, developers can simply inspect the keyframes, easing functions and other values that make up the animation.

The new Export Code feature is available in our latest plugin version. To try it out, update your Anima Toolkit plugin:

Here is how to prepare your animations
This is how to export code to HTML/JS/CSS

Clicking “Export Code” will generate a handoff link.

This link can be shared with developers, where they can use delightful tools like JSFiddle or CodePen to inspect and play the animation. Developers can also download the plain text HTML file that includes the CSS and Javascript inside it.

All the keyframes and easing functions values that construct the animation are easily readable through the HTML/CSS/JS code.


Design + Sketch

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

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