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

Designing Microinteractions with Figma

via LinkedIn Learning

Write review

Coursera

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Scrimba

Free courses from frontend to fullstack and AI

Overview

Google, IBM & Meta Certificates – 40% Off

One plan covers every Professional Certificate on Coursera.

Unlock All Certificates

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 466 ratings

Start your review of Designing Microinteractions with Figma