Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Designing Microinteractions with Figma

via LinkedIn Learning

Go to class Write review
Corporate Finance Institute Ad

Master Finance Tools - 35% Off CFI (Code CFI35)

Learn More → University of the People Ad

Earn Your Business Degree, Tuition-Free, 100% Online!

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Find out how to use Figma to create various microinteractions from scratch.

Syllabus

Introduction
  • Microinteractions in Figma
  • About microinteractions
1. Figma Prototyping Basics
  • Start prototyping in Figma
  • Use Figma's presentation mode
  • Test microinteractions on different devices
  • Define triggers for interaction
  • Use Figma's native animation types
  • Use smart animate for fluid microinteractions
2. Simple Microinteractions
  • Create an On Click toggle
  • Implementing dragging with On Drag
  • Create a horizontal scrolling effect
  • Create a vertical scrolling effect
  • Create a hover effect
  • Open overlays for messages and notifications
  • Set a trigger delay for your action
  • Challenge: Create a background microinteraction
  • Solution: Create a background microinteraction
3. Advanced Microinteractions
  • Create interactive components in Figma
  • Create a loading spinner
  • Implement a download button
  • Create a volume slider
  • Create a drop-down menu
  • Challenge: Create a like button
  • Solution: Create a like button
Conclusion
  • Feel confident designing your own Figma microinteraction

Taught by

Tetiana Gulei

Reviews

4.7 rating at LinkedIn Learning based on 281 ratings

Start your review of Designing Microinteractions with Figma

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.