Micro-interaction design in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working with the BI team

📋 Request: Your manager wants you to design micro-interactions for a sales dashboard to improve user engagement and clarity

📊 Data: You have a sales dashboard prototype with charts and filters but no interactive feedback

🎯 Deliverable: Create micro-interactions in Figma for filter selections, data refresh, and tooltip displays on charts

Sample Data

Element	Current State	Desired Micro-interaction
Filter Dropdown	Static dropdown list	Highlight selected option with smooth color change and checkmark icon
Refresh Button	Static button	Show spinning loader icon on click until data reload completes
Sales Chart Tooltip	No tooltip	Show tooltip with sales details on hover with fade-in effect

1

Step 1: Open the sales dashboard prototype in Figma

Locate the filter dropdown component on the dashboard page

Expected Result

You see the filter dropdown ready for editing

2

Step 2: Add a color change micro-interaction to the filter dropdown options

Use Figma's interactive components to create a variant with a smooth color transition and a checkmark icon for the selected option

Expected Result

When a user clicks an option, it highlights with a color change and shows a checkmark

3

Step 3: Design a spinning loader micro-interaction for the refresh button

Create a variant of the refresh button with a spinning loader icon that appears on click and stops when data reload is complete

Expected Result

Clicking the refresh button triggers the spinning loader animation until data reload finishes

4

Step 4: Add a tooltip micro-interaction to the sales chart

Use Figma's prototyping tools to show a tooltip with sales details on hover with a fade-in effect

Expected Result

Hovering over chart points displays a tooltip smoothly with relevant sales information

5

Step 5: Test all micro-interactions in prototype mode

Interact with filter dropdown, refresh button, and chart tooltips to verify smooth transitions and feedback

Expected Result

All micro-interactions respond smoothly and improve user engagement

Final Result

Filter Dropdown

↓

Refresh Button

↓

Sales Chart

↓

User Experience

✓Micro-interactions make the dashboard feel responsive and alive

✓Users get clear feedback when selecting filters or refreshing data

✓Tooltips help users understand chart data without cluttering the view

Bonus Challenge

Add a micro-interaction for error handling when data fails to load

Show Hint

Design a shake animation on the refresh button and show a red error message tooltip