Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Figma: Building Animations and Interactions

Figma: Building Animations and Interactions

1h 11mIntermediate2025-01-15

Authors

Joseph Labrecque

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

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
Zarinpal
Zibal