Once you open the plugin, you’ll be asked to log in with your LottieFiles account. If you don’t have an account yet, you can create one for free.

<aside> 💡 Please ensure that you only use supported Figma features.

</aside>

1. Open your design file in Figma.
2. From the top toolbar or Resources button, navigate to Plugins > LottieFiles. This will open the LottieFiles plugin on the right-hand side.
3. Click on the Figma to Lottie button within the LottieFiles plugin window. There are three methods of animation available within the plugin.
   1. Single frames (to animate logos and icons with a preset animation)
      1. Select the frame you want to animate and click the Export to Lottie button. The plugin will automatically identify possible animations.
      2. You can choose an animation preset as well as adjust the animation speed.
   2. Prototype flows (export existing prototype flows as Lottie animations)
      1. Select your prototype flow from the drop-down menu to preview it as a Lottie animation.
   3. Multiple frames (quick way to animate multiple frames into a single Lottie animation)
      1. Select the frames you wish to animate and click the "Export to Lottie" button.
4. Once you're happy with the result, click on Save to Workspace to store your animation in your LottieFiles workspace. Or you can insert the animation as a GIF in your Figma file.

🔽 Here is a sample Figma file to get you started.

https://www.figma.com/file/2lUSwCT0AMLUlqTwjQveG9?embed_host=notion&kind=&node-id=0:1&t=mIcPhF6jYdlUG3jO-1&type=design&viewer=1

Saving the animation to your workspace enables you to download the Lottie animation file. Learn more

← How to install the plugin

How to get the best results →