Integrating Lottie Animations with Figma
1h 7mIntermediate2025-07-18
Authors
Tom Green
Teacher, Author, Professor
Course details
In this course, join expert Tom Green to learn how to integrate Lottie animations into Figma projects. Tom covers the scope and workflow for creating Lottie animations, then shows you how to install the Lottie plugin into Figma for direct integration. From there, learn how to create animations in Lottie and configure their properties, use Lottie Creator for deep editing and configuration of animations, and optimize Lottie files for handoff to developers.
Skills covered
Figma Inc.FigmaDesign ThinkingInteraction DesignUX DesignUser ExperienceGraphic DesignWeb DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Integrating Lottie and Figma
1. Lottie and Figma Integration
- 02 - What are Lottie Animations
- 03 - Creating a Lottie account
- 04 - Installing the Lottie Figma plugin
- 05 - Using the Figma plugin
2. Controlling Lottie Animations in Figma
- 06 - Frame animation
- 07 - Text transitions
- 08 - Animating shape changes
- 09 - Convert smart animations to Lottie animations
3. Using Lottie Creator
- 10 - Lottie Creator interface overview
- 11 - Preparing the workspace
- 12 - Importing content into Lottie Creator
- 13 - Using the Shape tools
- 14 - Animate a shape
- 15 - Animate a gradient
- 16 - Timeline animation
- 17 - Final tweaks
4. Lottie Creator and Figma Integration
- 18 - Interactivity
- 19 - Using Lottie files with Figma variants
- 20 - Optimizing Lottie files
Conclusion
- 21 - Next steps