Transition animations in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants a prototype with smooth transition animations between monthly sales dashboards to help stakeholders understand changes over time

📊 Data: You have static dashboard screens for January, February, and March sales data in Figma frames

🎯 Deliverable: Create a Figma prototype that uses transition animations between these monthly sales dashboards

Sample Data

Month	Region	Sales
January	North	12000
January	South	15000
February	North	13000
February	South	16000
March	North	14000
March	South	17000

1

Step 1: Open your Figma file containing the three dashboard frames named 'January', 'February', and 'March'.

No formula needed. Just ensure frames are named clearly.

Expected Result

You see three separate frames representing each month's sales dashboard.

2

Step 2: Switch to Prototype mode in Figma by clicking the 'Prototype' tab in the right panel.

No formula needed.

Expected Result

You are now in Prototype mode and can create interactions between frames.

3

Step 3: Select the 'January' frame. Drag the circular node on the right edge of the frame to the 'February' frame to create a connection.

Interaction: On Click > Navigate To > 'February' frame > Animation: Smart Animate > Duration: 500ms > Easing: Ease In Out

Expected Result

Clicking on January frame in prototype will smoothly transition to February frame with smart animation.

4

Step 4: Repeat the connection from 'February' frame to 'March' frame with the same animation settings.

Interaction: On Click > Navigate To > 'March' frame > Animation: Smart Animate > Duration: 500ms > Easing: Ease In Out

Expected Result

Clicking on February frame in prototype will smoothly transition to March frame.

5

Step 5: Add a back navigation from 'March' to 'February' and from 'February' to 'January' using the same animation settings.

Interaction: On Click > Navigate To > Previous frame > Animation: Smart Animate > Duration: 500ms > Easing: Ease In Out

Expected Result

Users can navigate back with smooth transitions.

6

Step 6: Preview the prototype by clicking the Play button in the top-right corner and test the transitions between months.

No formula needed.

Expected Result

You see smooth animated transitions between monthly sales dashboards when clicking forward and back.

Final Result

┌───────────┐    ┌────────────┐    ┌───────────┐
│ January   │ ->  │ February   │ ->  │ March     │
│ Sales:    │    │ Sales:     │    │ Sales:    │
│ North:12k │    │ North:13k  │    │ North:14k │
│ South:15k │    │ South:16k  │    │ South:17k │
└───────────┘    └────────────┘    └───────────┘
   ↑               ↑
   └───────────────┘

Transitions use smooth animations to help users see changes over time.

✓Smooth transition animations improve understanding of monthly sales changes.

✓Smart Animate with ease-in-out easing creates natural movement between dashboards.

✓Back and forth navigation helps users explore data without confusion.

Bonus Challenge

Add a fade-in overlay animation that highlights the top-selling region on each dashboard during the transition.

Show Hint

Use Figma's 'Overlay' feature with 'Dissolve' animation and set it to appear after the frame transition.