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

Go to class Write review

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

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