How to Design Micro-Interactions

Micro-interactions are the small animations and responses that happen when you interact with a UI — a button press that gives tactile feedback, a toggle that slides to confirm a state change, a loading skeleton that communicates something is happening.

Done well, they make a product feel responsive and trustworthy. Done badly — too many, too slow, too decorative — they make a product feel slow and attention-seeking.

The test for any micro-interaction: does it communicate something, or does it just look interesting?

What micro-interactions are for

Micro-interactions serve four purposes. If an animation you're considering doesn't serve at least one of these, cut it.

Feedback: Confirming that an action happened. A button that doesn't visibly respond when pressed creates uncertainty — did my click register? A subtle press state (brief darkening, slight scale reduction) closes that loop instantly.

Status: Communicating the current state of something. A progress indicator, a loading spinner, a success checkmark — these tell users what the system is doing.

Transitions: Helping users understand spatial relationships. When a modal opens, a slide or scale animation from the trigger point communicates that this content is related to what was clicked. When items are added to a list, an animate-in effect shows where the new item appeared.

Guidance: Directing attention. A gentle pulse on a first-use element draws the eye. A shake animation on an invalid password input communicates "wrong" without text.

The four parts of a micro-interaction

Dan Saffer's model from his book "Microinteractions" is still the most useful framework:

Trigger: What initiates the micro-interaction. User-triggered: a click, tap, hover, swipe. System-triggered: a status change, a completed process, a time-based event.

Rules: What happens when it's triggered. The logic of the animation. "When the toggle is tapped, it slides to the right and the background color transitions to green over 200ms."

Feedback: What users see, hear, or feel in response. The visual, audio, or haptic output.

Loops and modes: Does the micro-interaction repeat? Does it behave differently over time? A loading spinner loops. A "shake" on error plays once. An NPS survey appears once after a trigger, then never again. These are the rules that govern the duration and recurrence.

Timing guidelines

Timing is where most micro-interaction design fails. Animations that are too slow feel laggy. Animations that are too fast aren't perceptible as intentional.

100-150ms: Hover states, immediate feedback. Quick enough to feel instant, just long enough to register.

200-300ms: Most UI transitions. Button presses, toggle switches, focus states, tooltip appearances. This is the sweet spot for feeling "right."

300-500ms: Larger transitions. Modals opening, panels sliding in, page transitions. Anything longer starts to feel slow unless there's a genuine reason to direct attention to the transition itself.

Over 500ms: Rare. Use only when the animation itself communicates something important — like a progress animation that reflects a real process duration, or an onboarding animation designed to draw attention to a new concept.

The easing curve matters as much as the duration. Standard ease-in-out is appropriate for most transitions. For elements entering the screen, ease-out (starts fast, slows to stop) feels more natural. For elements exiting, ease-in (starts slow, accelerates) works well. Avoid linear easing for UI animations — it feels mechanical and unnatural.

Designing with purpose vs designing for show

The difference between good and gratuitous micro-interactions often comes down to asking why.

Purposeful: When you click "Add to Cart," the cart icon briefly scales up and shows a count increase. This confirms the item was added and shows where to find it.

Gratuitous: Every card in a grid bounces when you hover, with no additional information conveyed by the animation.

Purposeful: The form submit button shows a loading spinner while the server processes, then transitions to a checkmark on success. Users know something is happening and when it's done.

Gratuitous: The submit button pulses with a glow effect for three seconds before anything happens.

If you can describe the user benefit of an animation in one sentence, it's probably purposeful. If you can't, it's probably decorative.

Prototyping with ProtoPie and Principle

Figma's native prototyping handles simple transitions but breaks down for multi-state interactions, conditional logic, and complex sequencing.

ProtoPie is the better choice for most complex micro-interactions. It uses a trigger → response logic system that maps directly to how you think about micro-interactions. You can prototype:

• Multi-state toggles with different animation behavior per state
• Form validation feedback with conditional logic
• Scroll-driven animations
• Interactions that respond to variables (like a progress bar that fills based on user input)

ProtoPie has a free plan that covers most use cases. The paid plans ($17/month and up) add cloud sharing and team features.

Prototype micro-interactions in ProtoPie

Principle is faster to learn and better for sequential timeline animations. If you're prototyping a specific transition between two states rather than a complex multi-state interaction, Principle is often quicker. It imports Figma files directly and handles layer-level animation properties simply.

Principle costs $129 (one-time purchase, Mac only). It's more limited than ProtoPie for complex interactions but better for quick, high-fidelity motion explorations.

Animate transitions in Principle

Documenting specs in Figma

Once you've prototyped and validated a micro-interaction, document the motion specs for handoff.

In Figma, create a dedicated documentation section in your design file. For each micro-interaction, include:

• Before state (static frame)
• After state (static frame)
• Duration in ms
• Easing curve (with a visual of the curve)
• Any delays
• Notes on trigger and behavior

For complex interactions, link the ProtoPie prototype directly from the Figma frame using a comment or annotation. Developers need to see the motion as well as the specs.

Animation tokens are worth establishing if your team ships multiple products or has a design system: define your duration scale (50ms, 100ms, 200ms, 300ms, 500ms) and your easing curves as named values. Developers can implement them as CSS custom properties or design tokens that everyone references consistently.

Micro-interactions are most powerful when they're consistent. A product where every interaction responds in the same way feels refined. A product where each feature was designed independently — some with animations, some without, all with different timing — feels unfinished.