Member-only story
Vector animations with Figma and SVG-Animate
Have you ever gotten frustrated because you couldn’t describe complex animations to your developers? Finding references, polishing details and creating thorough handoff documentation requires a lot of time and effort. And we all know that time is money ;)
Figma is a design tool that gives you the power to design and prototype, whereas SVG-Animate allows you to take your artworks from Figma and transform them automatically into lightweight vector animations ready to use in production.
With Figma and SVG-Animate combined, there is no need for additional motion graphics software. You can create animated illustrations by just drawing static keyframes in Figma and adjusting some basic properties in a code editor of your choice. Not as scary as it sounds, trust me! This saves a ton of time and money since it doesn’t require any external animation software or developers to bring your ideas to life quickly.
Continue reading if you want to kill two birds with one stone by gaining more control over your animation implementation and making your developers happy with less work to do ;)
Design
Create illustration
For this tutorial, I have prepared a cute drawing of a kitten playing with a ball of yarn.
There are some restrictions you need to keep in mind when designing your artwork in Figma. First of all, you need to work on paths, not shapes like rectangles or ovals. Pen tool would be your best friend here. It allows you to create vector networks, which are backwards-compatible with paths. Just make sure to use basic curves and lines without multiple edges with the same end nodes.
Also, every element should be on a separate layer with a descriptive name. It is a good practice not to use spaces in your layers’ names, since it can generate some compatibility issues with several platforms and 3rd party applications.
Mark layers for animation
You will use layer names to select paths in a code editor. The elements you want to have moving…
