Web Design » Figma » How Do You Use Lottie in Figma?

How Do You Use Lottie in Figma?

Last updated on November 25, 2022 @ 6:03 pm

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

For the web, we use a Lottie-Web Player which is a player backed by Greensock that runs in any browser.

PRO TIP: Lottie is a great tool for animating vector graphics, but it can be tricky to use in Figma. Here are a few things to keep in mind:

– Make sure your Lottie files are compatible with Figma ( they need to be exported as .json files)
– You’ll need to use the Lottie Player plugin to preview your animations
– Pay attention to the frame rate of your animation – it needs to match the frame rate of your Figma project

Lottie is built by @airbnb engineers for Airbnb Design. It is open source, so you can use it for anything you want!

How Do You Use Lottie in Figma?

Using Lottie in Figma is simple! Just add the Lottie Player to your project and then add your JSON animation files to the player.

  • Step 1: Add the Lottie Player to your project
  • Step 2: Add your JSON animation files to the player
  • Step 3: That’s it! Your animations will now play in Figma!
Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.