Why Micro-Interactions Matter in Modern UI Design
Micro-interactions are the subtle animations and visual responses that happen when a user interacts with your interface. Think of a button that gently changes color when you hover over it, a toggle switch that slides smoothly, or a loading spinner that keeps users informed. These tiny details make the difference between a flat, lifeless prototype and a design that feels polished and professional.
The good news? Figma gives you everything you need to design and prototype micro-interactions without writing a single line of code. In this step-by-step tutorial, you will learn how to create the most common micro-interaction patterns using Smart Animate and interactive components, even if you are a complete beginner.
By the end of this guide, you will have built three practical micro-interactions you can reuse across all your projects:
- A button with hover and pressed states
- A toggle switch with smooth animation
- A simple loading animation
What Are the 4 Parts of a Micro-Interaction?
Before we jump into Figma, it helps to understand the anatomy of a micro-interaction. Dan Saffer, who literally wrote the book on this topic, defines four essential parts:
| Part | What It Does | Figma Example |
|---|---|---|
| Trigger | Initiates the micro-interaction | A user hovering over a button (“While Hovering” trigger) |
| Rules | Defines what happens once triggered | The button background changes to a darker shade |
| Feedback | Communicates the result to the user | A color shift and slight scale-up animation |
| Loops & Modes | Determines if the interaction repeats or changes over time | A loading spinner that loops until content loads |
Understanding these four parts will help you think clearly about what you are building before you start clicking around in Figma.
Prerequisites: What You Need Before Starting
This tutorial assumes you have:
- A free or paid Figma account (everything we cover works on the free plan)
- Basic familiarity with Figma’s interface (frames, layers, the toolbar)
- About 30 to 45 minutes of focused time
If you have never opened Figma before, spend 10 minutes exploring the interface first. Create a few rectangles, group them, and try the prototype tab. That baseline knowledge will make this tutorial much smoother.
Key Figma Features for Micro-Interactions
Two Figma features power almost every micro-interaction you will create:
Smart Animate
Smart Animate is Figma’s built-in animation engine. It automatically interpolates (transitions) between two frames when matching layers share the same name. If a layer named “icon” is 20px wide in Frame A and 24px wide in Frame B, Smart Animate will smoothly scale it up during the transition.
Interactive Components
Interactive components let you define interactions inside a component set. This means your hover states, pressed states, and toggle states travel with the component everywhere you use it. You prototype once, and it works in every instance across your file.
We will use both of these features extensively in the examples below.
Example 1: Button with Hover and Pressed States (Step by Step)
This is the most common micro-interaction pattern in UI design. We will create a button component with three states: Default, Hover, and Pressed.
Step 1: Create the Default Button
- Select the Frame tool (F) and draw a frame approximately 160px wide and 48px tall.
- Set the corner radius to 8px.
- Give it a fill color, for example #3B82F6 (a medium blue).
- Add a text layer inside that says “Get Started” and center it both horizontally and vertically using Figma’s alignment tools.
- Set the text color to #FFFFFF and use a font weight of Semi Bold or Medium.
- Select both the frame and the text layer, then press Ctrl+Alt+K (Windows) or Cmd+Option+K (Mac) to create a component. Name it Button.
Step 2: Add Variants for Hover and Pressed
- Select your new Button component. In the right panel under Design, click the + next to the component name to add a variant. This creates a component set with a dashed purple border.
- You now have two variants. Rename the property values: the first is Default, the second is Hover.
- Click the + again to add a third variant. Name it Pressed.
Your component set should now contain three variants side by side.
Step 3: Style Each Variant
| Variant | Fill Color | Scale / Size Change | Shadow |
|---|---|---|---|
| Default | #3B82F6 | None | None |
| Hover | #2563EB (slightly darker) | Scale up to 102% | Subtle drop shadow (0, 2, 8, rgba 0,0,0,0.15) |
| Pressed | #1D4ED8 (even darker) | Scale down to 98% | None |
Important: Make sure the layer names inside each variant are identical. The text layer should be called “Label” in all three variants. The frame name should match too. Smart Animate relies on matching layer names to create smooth transitions.
Step 4: Add Interactions in the Prototype Tab
- Switch to the Prototype tab in the right panel.
- Select the Default variant. Drag the blue interaction handle (the small circle on the right edge) to the Hover variant.
- In the interaction details popup, set:
- Trigger: While Hovering
- Action: Change To
- Animation: Smart Animate
- Easing: Ease Out
- Duration: 200ms
- Now select the Hover variant. Drag an interaction handle to the Pressed variant and set:
- Trigger: While Pressing
- Action: Change To
- Animation: Smart Animate
- Easing: Ease In Out
- Duration: 100ms
Step 5: Test It
- Place an instance of your Button component on a regular frame (your “screen”).
- Press Play (the triangle icon in the top right) to open the prototype preview.
- Hover over the button. You should see it brighten, scale up slightly, and gain a subtle shadow.
- Click and hold. The button should darken and shrink slightly, mimicking a real press.
Congratulations, you just built your first interactive micro-interaction component in Figma!
Example 2: Toggle Switch with Smooth Animation
Toggle switches are everywhere in settings screens and preference panels. Here is how to create one that slides smoothly.
Step 1: Build the Toggle in Its Off State
- Create a frame that is 52px wide and 28px tall with a corner radius of 14px (this makes it a pill shape).
- Set the fill to #D1D5DB (a neutral gray).
- Inside this frame, add a circle (ellipse) that is 24px by 24px. Set its fill to #FFFFFF.
- Position the circle 2px from the left edge and vertically centered. Name this layer Knob.
- Select the frame and the circle, then create a component. Name it Toggle.
Step 2: Create the On Variant
- Add a variant to the Toggle component.
- In the new variant, change the frame fill to #3B82F6 (or your brand’s primary color).
- Move the Knob layer to 2px from the right edge (so its X position shifts to the far right of the pill).
- Rename the variant property values to Off and On.
Step 3: Wire Up the Interaction
- In the Prototype tab, select the Off variant.
- Drag the interaction handle to the On variant.
- Trigger: On Click
- Action: Change To
- Animation: Smart Animate
- Easing: Ease In Out
- Duration: 250ms
- Do the same from the On variant back to the Off variant with identical settings.
Step 4: Test It
Drop an instance onto a screen and play the prototype. Clicking the toggle should slide the knob from left to right while the background color transitions from gray to blue. Click again and it slides back. The Smart Animate feature handles the smooth movement because the Knob layer name is identical in both variants.
Bonus: Adding a Label
Add a text layer next to each variant that reads “Off” and “On” respectively. Name the text layer Status Label in both variants. Smart Animate will even crossfade the text for you.
Example 3: Loading Spinner Animation
Loading animations are slightly different because they need to loop continuously. Here is a straightforward approach using Figma’s “After Delay” trigger.
Step 1: Create the Spinner Frame Sequence
- Create a 40px by 40px frame. Inside it, draw a circle with a 3px stroke and no fill. Set the stroke color to #E5E7EB (light gray). Name this layer Track.
- Draw another circle on top of the first one, same size, same stroke width, but set the stroke color to #3B82F6. Then, in the stroke settings, change the dash value to create a partial arc (for example, set Dash to 25 and Gap to 75). Name this layer Spinner.
- Create a component from this frame. Name it Loader.
- Add a second variant. In the second variant, select the Spinner layer and rotate it 360 degrees using the rotation field in the design panel. Practically, set the rotation to 359 degrees (Figma treats 0 and 360 as the same, so 359 works better for animation purposes).
Step 2: Set Up the Looping Animation
- In the Prototype tab, select the first variant. Add an interaction:
- Trigger: After Delay (1ms)
- Action: Change To (second variant)
- Animation: Smart Animate
- Easing: Linear
- Duration: 800ms
- Select the second variant. Add an interaction:
- Trigger: After Delay (1ms)
- Action: Change To (first variant)
- Animation: Smart Animate
- Easing: Linear
- Duration: 800ms
This creates a continuous loop. The spinner rotates from 0 to 359 degrees, then the cycle repeats. Using Linear easing ensures the rotation speed stays consistent, which is what users expect from a loading indicator.
Step 3: Test It
Place an instance on a frame and hit Play. The spinner should rotate smoothly and continuously. If it looks jerky, double-check that both variants have the Spinner layer named identically and that the rotation values are correct.
Tips for Better Micro-Interactions in Figma
After building the three examples above, keep these best practices in mind as you create more complex interactions:
1. Keep Layer Names Consistent
Smart Animate matches layers by name. If a layer is called “Icon” in one variant and “icon” in another, Figma will not animate it. It will just pop into place. Always double-check your layer naming.
2. Use Appropriate Easing Curves
- Ease Out is great for elements entering the screen or responding to user input (feels responsive).
- Ease In works well for elements leaving or dismissing.
- Ease In Out feels natural for toggles and elements that move from point A to point B.
- Linear is best for continuous animations like spinners.
3. Keep Durations Short
Most micro-interactions should be between 100ms and 400ms. Anything longer starts to feel sluggish. Here is a quick reference:
| Interaction Type | Recommended Duration |
|---|---|
| Hover effect | 100ms to 200ms |
| Button press | 80ms to 150ms |
| Toggle switch | 200ms to 300ms |
| Page transitions | 300ms to 500ms |
| Loading spinners (per loop) | 600ms to 1000ms |
4. Design All States Before Prototyping
It is tempting to jump into the Prototype tab immediately. Resist that urge. Design every state visually first (Default, Hover, Active, Disabled, Error, etc.), confirm the visual design is solid, and then wire up the interactions.
5. Test on Multiple Devices
Figma’s prototype preview can behave differently on a desktop browser compared to the Figma Mirror app on a phone. If your design is for mobile, test the interactions on an actual device using Figma Mirror.
Common Mistakes Beginners Make (and How to Avoid Them)
- Mismatched layer names: As mentioned, this is the number one reason Smart Animate does not work. Always verify names match exactly across variants.
- Using “Instant” instead of “Smart Animate”: Figma defaults to “Instant” for new interactions. Make sure to switch it to Smart Animate if you want smooth transitions.
- Overcomplicating the first attempt: Start simple. A color change on hover is a perfectly valid micro-interaction. You do not need a 12-step animation sequence for your first project.
- Forgetting to reset constraints: If your component uses auto layout or constraints, make sure they are set correctly in all variants. A misaligned constraint can cause unexpected movement during animation.
- Too many variants at once: Build two variants first (e.g., Default and Hover), test them, and then add more. Incremental building helps you catch errors early.
Going Beyond: Additional Micro-Interaction Patterns to Try
Once you are comfortable with the three examples above, challenge yourself with these patterns:
- Like/heart button animation: A heart icon that scales up, changes to red, and then settles back to its normal size when clicked.
- Input field focus state: A text input where the border color changes and a label floats up when the field is selected.
- Notification badge: A small red dot that appears with a subtle bounce when a new notification arrives.
- Dropdown menu: A menu that slides down from a navigation item with staggered opacity for each menu item.
- Skeleton loading screen: A shimmer effect that plays while content is loading, built with multiple variants and After Delay triggers.
Each of these uses the same core techniques you learned here: component variants, Smart Animate, and the right combination of triggers and easing.
Useful Figma Resources for Learning More
- Figma Community files: Search for “micro-interactions” in the Figma Community. Many designers share free, fully editable component libraries you can study and remix.
- Figma’s official documentation: The prototyping section of Figma’s help center is well-maintained and includes video walkthroughs.
- Practice projects: Redesign the settings screen of your favorite app and add micro-interactions to every interactive element. This is one of the fastest ways to build muscle memory.
Frequently Asked Questions
How do you make micro-interactions in Figma?
You create micro-interactions in Figma by building component variants (each representing a different state like Default, Hover, or Active), then connecting them in the Prototype tab using triggers such as “While Hovering” or “On Click” with Smart Animate as the animation type. The key is making sure your layer names match across all variants so Figma can interpolate the differences smoothly.
What are the 4 parts of micro-interactions?
The four parts are: Trigger (what starts the interaction), Rules (what happens during the interaction), Feedback (how the user is informed something changed), and Loops and Modes (whether the interaction repeats or changes behavior over time). This framework was defined by Dan Saffer in his book Microinteractions.
Do I need a paid Figma plan to create micro-interactions?
No. All the features used in this tutorial, including components, variants, Smart Animate, and prototype preview, are available on Figma’s free plan. The free plan does limit the number of Figma files and pages you can have, but the prototyping functionality itself is fully accessible.
What is the difference between Smart Animate and other animation types in Figma?
Smart Animate automatically detects matching layers between two variants and animates the differences (position, size, color, opacity, rotation). Other animation types like “Dissolve” or “Move In” apply a generic transition to the entire frame without considering individual layers. Smart Animate gives you much more control and produces more realistic results.
Can I export my Figma micro-interactions as code or production-ready animations?
Figma prototypes are meant for demonstration and testing, not direct code export. However, you can use tools like Lottie (via the LottieFiles Figma plugin) to export animations as lightweight JSON files that developers can implement in web and mobile apps. You can also hand off your designs to developers using Figma’s Dev Mode, which provides CSS values, spacing, and animation details they can reference.
How do I make a looping animation in Figma?
Use the “After Delay” trigger with a very short delay (1ms) on each variant. Point Variant A to Variant B, and Variant B back to Variant A, both using Smart Animate. This creates a continuous loop that plays as long as the prototype is running. This technique is perfect for loading spinners and pulsing indicators.