UI Micro-interactions
Make interfaces feel alive, one small interaction at a time
About this course
This beginner course teaches you to design and prototype the small interactions that carry most of an interface's personality: button presses, toggles, hover reveals, loading spinners, progress bars, skeleton screens, and success or error feedback. You will work from Dan Saffer's trigger, rules, feedback, and loops model, apply real motion specifications from Google Material, Apple Human Interface Guidelines, and the IBM Carbon motion system (durations measured in milliseconds and named easing curves), and build everything in Figma using Smart Animate, variants, and interactive components. By the end you will have a documented micro-interaction kit and three polished, prototyped flows ready for developer handoff.
Curriculum
Module 1: What a Micro-interaction Is and Why It Matters
- The Anatomy of a Micro-interactionPreview
- Timing and Easing: The Numbers That Make Motion Feel Right🔒
- Where Micro-interactions Live in a Product🔒
Module 2: Feedback States and Hover and Tap Transitions
- Designing the Full State Set of a Component🔒
- Hover, Focus, and Pressed Transitions🔒
- Toggles, Switches, and Selection Feedback🔒
Module 3: Loading States, Progress, and Skeleton Screens
- Spinners Versus Progress Bars: Choosing the Right Loader🔒
- Skeleton Screens and the Illusion of Speed🔒
- Empty States, Success, and Error Feedback🔒
Module 4: Prototyping Micro-interactions in Figma
- Smart Animate Fundamentals🔒
- Variants and Interactive Components🔒
- Bringing in Lottie and Handing Off to Developers🔒