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
()
Ex_Files_Designing_Microinteractions_with_Figma.zip
(10.7 MB)