StretchLearn Course

Make interfaces feel alive, one small interaction at a time

Feedback states, hover and tap transitions, loaders, and skeleton screens, prototyped in Figma with Smart Animate

Beginner9 hr 20 minSelf PacedRegistered

Course Overview

What this course is designed to develop

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.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Break any micro-interaction into Dan Saffer's four parts: trigger, rules, feedback, and loops or modes

Specify motion using real numbers: durations from roughly 100 to 500 milliseconds and named easing curves such as ease-out and standard

Design the full state set for a component, including default, hover, focus, active, loading, disabled, success, and error

Choose between a spinner, a determinate progress bar, and a skeleton screen based on wait time and whether progress is known

Prototype hover, tap, and state transitions in Figma using Smart Animate, variants, and interactive components

Document a micro-interaction with timing, easing, and trigger notes so a developer can build it accurately

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: What a Micro-interaction Is and Why It Matters

Define the micro-interaction precisely, learn the four-part model every one of them follows, and build the timing and easing instincts the rest of the course depends on.

3 lessons

The Anatomy of a Micro-interactionContent · 45 min

Preview Enabled

Timing and Easing: The Numbers That Make Motion Feel RightContent · 50 min

LMS Access

Where Micro-interactions Live in a ProductContent · 40 min

LMS Access

Module 2

Module 2: Feedback States and Hover and Tap Transitions

Design the complete state set for interactive components and the hover, focus, and tap transitions that connect them, then specify them with real timing values.

3 lessons

Designing the Full State Set of a ComponentContent · 50 min

LMS Access

Hover, Focus, and Pressed TransitionsContent · 45 min

LMS Access

Toggles, Switches, and Selection FeedbackContent · 45 min

LMS Access

Module 3

Module 3: Loading States, Progress, and Skeleton Screens

Design the right kind of waiting experience for every situation, from instant spinners to skeleton screens, so the product feels fast even when it is not.

3 lessons

Spinners Versus Progress Bars: Choosing the Right LoaderContent · 45 min

LMS Access

Skeleton Screens and the Illusion of SpeedContent · 50 min

LMS Access

Empty States, Success, and Error FeedbackContent · 45 min

LMS Access

Module 4

Module 4: Prototyping Micro-interactions in Figma

Turn your designs into working prototypes using Figma's Smart Animate, variants, and interactive components, then document them for developer handoff.

3 lessons

Smart Animate FundamentalsContent · 50 min

LMS Access

Variants and Interactive ComponentsContent · 50 min

LMS Access

Bringing in Lottie and Handing Off to DevelopersContent · 45 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

micro-interactionsFigmaSmart AnimateUI animationinteraction designloading statesskeleton screensmotion design