Skip to main content

Create production-ready animations directly in Figma with the new LottieFiles plugin

Exciting news! LottieFiles have released an update to their Figma plugin enabling designers to easily create production-ready animation assets (LottieFiles) directly within Figma!

Try Figma Free: https://figma.com
Visit LottieFiles: https://lottiefiles.com/

What is it?

LottieFiles for Figma plugin

The updated LottieFiles for Figma plugin now enables you to create animations in Figma and export them as Lottie animations. New features include the ability to auto-animate a single frame using animation presets and convert multiple frames or prototype flows into a Lottie using smart animate.

What is Lottie?

A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. On average, a Lottie is 600% smaller than a GIF. Learn more: [https://lottiefiles.com/what-is-lottie](https://lottiefiles.com/what-is-lottie)

What does the feature matter?

1. It will allow designers (product & visual) to design and animate using the tools they’re already familiar with (Figma & Figma Prototypes), letting them create micro animations without having to learn any other tool.

2. Motion is becoming widely popular to be used in products. And more product designers are adding it as a skill to increase the engagement of the experiences they design and build. Check out our [Why Motion](https://lottiefiles.com/why-motion) page to see more reasons why motion is important.

3. Lottie is a production-ready file format, so these animations which are used in design, can be implemented in the end product with just a few clicks. Lottie is already popular with developers.

How it works!

  1. Install the LottieFiles for Figma plugin: https://www.figma.com/community/plugi…
  2. Log in/register for your account using the plugin.
  3. If you are whitelisted to use the plugin, you can see the ‘Export to Lottie ✨’ menu.
  4. Navigate to the Export to Lottie tab on the LottieFiles plugin
    1. Select a frame (or multiple frames) and click the ‘Export to Lottie’ button
    2. Select an existing prototype flow from the drop-down list
  5.  Your selection or prototype will be animated as a Lottie animation. Enjoy!

Check out more of my videos on this channel https://youtube.com/@willbrettdesign