Figma: Animating Design Prototypes

Figma: Animating Design Prototypes

1h 47mIntermediate2024-10-08

Authors

Joseph Labrecque

Joseph Labrecque

University Professor, Adobe Educator, Studio Head

Course details

In this course, move beyond Figma's basic design tools into more complex and involved prototypes and mockups. While static prototypes can be very helpful, adding animation to your screen transitions and individual user interface interactions can take the realism of your designs to the next level. Instructor Joseph Labrecque starts with a look at how animations and transitions are designed in a Figma prototype. Learn about the Smart Animate feature for quick motion and transitions, how to customize the parameters of animation—like duration, delay, and even custom ease and spring settings—in Figma, and how to create and animate common UX design patterns like splash screens, loading animations, transitions, component states, and progress bars.

Skills covered

User Interface PrototypingFigmaInteraction DesignUser ExperienceDeep Dive (X:Y)

Concepts

Introduction

  • Animating prototypes with Figma
  • Working with the exercise files
  • Design project overview

Animated Transition Basics

  • Figma animation prerequisites
  • Instant transitions in Figma
  • Dissolve transitions in Figma
  • Smart Animate transitions in Figma
  • Move in and move out transitions in Figma
  • Push transitions in Figma
  • Slide in and slide out transitions in Figma

Modifying Animation Properties

  • Adjusting transition duration
  • Applying a delay interaction
  • Resetting scroll position
  • Animating matching layers
  • Examining linear transitions
  • Designing ease effects
  • Designing spring effects
  • Applying motion presets

Designing Common UI Animations

  • Animating a button press
  • Animating a toggle switch
  • Animating an energetic button
  • Wiring a progress bar to variables
  • Using overlay animations
  • Creating a looping indicator

Animating Additional Experiences

  • Launching from the home screen
  • Creating splash screen states
  • Animating splash screen states
  • Using videos to add motion
  • Designing with animated GIF files

Conclusion

  • Next steps for animating in Figma
40,000 Toman