How to add Lottie animations to your Figma design?

While Figma has not provide native support for Lottie animations yet, you can still easily add them to your Figma designs by converting them to GIFs.

Here's how you can add the Lottie animation as GIF to your Figma designs:

1. Install the LottieFiles for Figma plugin. Follow the installation guide here
   
   

2. Once the plugin is installed, open it. You'll see four tabs:

   • Discover: Browse and choose Lottie animations from a public library.
   • Workspace: Pick animations from your workspace.
   • Export to Lottie: Export your animation as a Lottie
   • Import: Add .json files from your computer or via a URL.
     
     

3. Select your animation, open it, and click Insert as GIF
   
   

4. Choose the GIF resolution that suits your design and click Insert GIF
   
   

5. Your Lottie animations will be transformed into GIFs and added into your Figma designs.

It's as simple as that!

Updated March 22, 2024 02:58