Figma: Building Animations and Interactions
1h 11mIntermediate2025-01-15
Authors

Joseph Labrecque
University Professor, Adobe Educator, Studio Head
Course details
Did you know that Figma includes a set of features to more easily translate animations and interactions to developers for integration within native code projects? In this course, instructor Joseph Labrecque covers the basics of leveraging the power of Figma’s Dev Mode to share important aspects of a design with your development team. Along the way, learn how to import and include shared assets from a Figma project within a native development platform, program user interactions and animations that match the Figma design prototype, and trigger animations based upon user actions. Ideal for UX and interaction designers and developers working with Figma-based designs and prototypes, by the end of this course, you’ll be prepared to successfully translate animations and interactions from a Figma design project to a native code environment.
Skills covered
2D AnimationFigmaInteraction DesignUser ExperienceLearningAnimation and Illustration
Concepts
0. Introduction
- 01 - Building animations and interactions
- 02 - What you are going to build
- 03 - What you should know
1. Preparing for Development
- 04 - Figma project overview
- 05 - Sharing a design file
- 06 - Activating Dev Mode as a designer
- 07 - Accessing Dev Mode as a developer
2. Accessing Design Content for the Native Web
- 08 - Native web project overview
- 09 - Reading CSS from a shared Figma project
- 10 - Exporting images from a shared Figma project
- 11 - Completing the native web design
3. Converting Animations and Interactions
- 12 - Animating the navigation interactions
- 13 - Animating page content automatically
- 14 - Animating the button
- 15 - Animating the water girl
- 16 - Animating the nutrition label
- 17 - Animating the information text
Conclusion
- 18 - Next steps