We need to rely on vector graphics whenever it's possible. Use a regular expression shortcut to keep the current name and type in _animate at the end.Working with SVG files is not an option anymore. With a huge amount of high definition devices out there, it's not sustainable to export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. To batch edit layer names and add suffixes, select them from the layers panel and press Cmd+R. The elements you want to have moving must have an “animate” at the end of their layer name. You will use layer names to select paths in a code editor. 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. Just make sure to use basic curves and lines without multiple edges with the same end nodes.Īlso, every element should be on a separate layer with a descriptive name. It allows you to create vector networks, which are backwards-compatible with paths. First of all, you need to work on paths, not shapes like rectangles or ovals. There are some restrictions you need to keep in mind when designing your artwork in Figma. 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.Ĭontinue 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įor this tutorial, I have prepared a cute drawing of a kitten playing with a ball of yarn.

You can create animated illustrations by just drawing static keyframes in Figma and adjusting some basic properties in a code editor of your choice. With Figma and SVG-Animate combined, there is no need for additional motion graphics software. And we all know that time is money )įigma 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. 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.

Download animated svg