Getting Started

LottieFiles
LottieFiles
  • Updated

What is LottieFiles Plugin for Figma?




LottieFiles for Figma optimizes your design workflow so that you can focus only on designing. It helps you create realistic prototypes with animations and gives access to the world's largest Lottie animations library right within your favorite design tool, Figma. 

With the LottieFiles plugin for Figma you can:

  • Drag and drop your very own dotLottie (.lottie) and Lottie JSON (.json) files
  • Access a library of 1000s of free Lottie animations. Access all your animations previewed on LottieFiles
  • Insert animation frames as high-quality SVGs (single frame)
  • Insert Lotties as GIF animations select the background color you want for your GIF

 

Key Features

Insert animation frames as SVGs

 

We have you covered if you are looking for ready-made SVG drawings to use in Figma. Use our intuitive plugin to select the specific frame from an animation and insert it as SVG.


Insert animation frames as SVGs Image

 

Import Lotties as GIFs

Motion is one of the best ways to demonstrate complex concepts. Add a Lottie of your choice as a GIF in your prototypes with only a few clicks.



Import Lotties as GIFs Image

 

Edit Lotties before exporting

Customization is vital to creating unique designs. So why should your creations be generic? Edit the background of your Lotties to sync with your project theme.


Edit Lotties before exporting Image

 




Download LottieFiles for Figma

You can download the plugin from this Figma Community page or search Lottiefiles on the Community > Plugin

Screenshot_2022-02-23_at_11.32.05_PM.png

Installation Guide

You can install the Lottiefiles plugin in Figma for the Figma web platform or on the Figma Desktop app.

 

Figma web platform


Simply go to this link https://www.figma.com/community/plugin/809860933081065308/LottieFiles and click on the Install button on the right-top of the page.

Once you clicked on the Install button, you will be prompted to log in to Figma and it will automatically add the plugin to your profile.

 

Figma Desktop App


 1. On the menu bar, click on Plugins --> Manage Plugins...
2. Click on Browse Plugins in Community
3. Search Lottiefiles and click on the Install button


Was this article helpful?

1 out of 1 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.