What is LottieFiles for Figma?
LottieFiles for Figma is a powerful plugin that brings motion to your Figma designs. It allows you to create production-ready Lottie animations directly within Figma, access a massive library of pre-made animations, and seamlessly hand off animated assets to developers.
Getting Started in 3 Simple Steps
Step 1: Install & Run the Plugin
Install the LottieFiles plugin from the Figma Community:
- Design Mode Plugin: Install on Figma
- Dev Mode Plugin: Install Dev Mode plugin
Once installed, run the plugin from your Figma file by going to Plugins > LottieFiles.
Step 2: Search or Create Your Own
The plugin offers three main tabs:
Discover Tab
- Search through 100,000+ free ready-to-use Lottie animations
- Access 400,000+ exclusive premium animations
- All free animations can be used for personal and commercial projects
Workspaces Tab
- Access your private files
- Browse your team's shared animation library
- Insert animations you've created or saved
Figma to Lottie Tab
- Create your own animations using Figma's native tools
- Convert designs or prototypes into production-ready Lottie animations
- Choose between animated presets or connect multiple frames
Step 3: Insert or Export Your Animation
For Designers (Design Mode)
- Open and personalize animations to match your brand
- Insert animations as GIFs on the Figma canvas
- Download animations in multiple formats (dotLottie, Lottie JSON, GIF, MP4, WebM, MOV)
- Add animations to Figma prototypes for realistic presentations
For Developers (Dev Mode)
- Select an animation inserted from any of your workspaces
- Choose your desired file format (Optimized dotLottie or Lottie JSON)
- Copy the animation's asset link or auto-generated embed code
- Ship animations directly without switching tools
Learning Resources
Get Certified
- Become a certified Figma to Lottie expert
- Access video tutorials and online courses
- Join the LottieFiles community
Try the Playground
- Experiment with Figma to Lottie Playground
Additional Resources