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

Overview

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

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.