Designing Microinteractions with Figma

Course details

Figma is one of the go-to tools for UX designers to design microinteractions. In this course, expert Tetiana Gulei shows learners how Figma can be used to create various microinteractions from scratch. Learn what microinteractions are and why they are crucial to good UX design. Find out how to prototype and create animation in Figma. Explore ways to create simple microinteractions like drags, scrolls, overlays, and more. Plus, dive into creating more complex microinteractions, including loading spinners, dropdowns, buttons, and volume sliders. Test your understanding as you go with the challenges that accompany each chapter!

Concepts

0. Introduction

01 - Microinteractions in Figma
02 - About microinteractions

1. Figma Prototyping Basics

03 - Start prototyping in Figma
04 - Use Figma's presentation mode
05 - Test microinteractions on different devices
06 - Define triggers for interaction
07 - Use Figma's native animation types
08 - Use smart animate for fluid microinteractions

2. Simple Microinteractions

09 - Create an On Click toggle
10 - Implementing dragging with On Drag
11 - Create a horizontal scrolling effect
12 - Create a vertical scrolling effect
13 - Create a hover effect
14 - Open overlays for messages and notifications
15 - Set a trigger delay for your action
16 - Challenge - Create a background microinteraction
17 - Solution - Create a background microinteraction

3. Advanced Microinteractions

18 - Create interactive components in Figma
19 - Create a loading spinner
20 - Implement a download button
21 - Create a volume slider
22 - Create a drop-down menu
23 - Challenge - Create a like button
24 - Solution - Create a like button

Conclusion

25 - Feel confident designing your own Figma microinteraction

Designing Microinteractions with Figma

Authors

Tetiana Gulei