Smart animate in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants an interactive prototype that smoothly shows changes between two screens to demonstrate a new sales dashboard

📊 Data: You have two Figma frames: one with the initial sales dashboard layout and another with updated data and filters applied

🎯 Deliverable: Create a Figma prototype using Smart Animate to transition between the two dashboard frames, highlighting changes in charts and filters

Sample Data

Frame	Element	Property	Value in Frame 1	Value in Frame 2
Dashboard 1	Bar Chart	Height	100px	150px
Dashboard 1	Filter Button	Color	#007AFF	#FF9500
Dashboard 1	Title Text	Position X	50px	70px
Dashboard 1	Sales Number	Value	5000	7500

1

Step 1: Open Figma and create two frames named 'Dashboard 1' and 'Dashboard 2' with the sales dashboard layouts

Place the bar chart, filter button, title text, and sales number in both frames with the properties as per sample data

Expected Result

Two frames with matching elements but different properties as described

2

Step 2: Select the Prototype tab in Figma and link 'Dashboard 1' to 'Dashboard 2' by dragging the node

Set Interaction to 'On Click', Navigate To 'Dashboard 2', Animation to 'Smart Animate', Duration 500ms, Easing 'Ease In Out'

Expected Result

Clicking on 'Dashboard 1' frame triggers a smooth animated transition to 'Dashboard 2'

3

Step 3: Ensure that elements have the same layer names in both frames to enable Smart Animate

Rename layers if needed so bar chart, filter button, title text, and sales number match exactly between frames

Expected Result

Smart Animate recognizes matching elements and animates their property changes

4

Step 4: Preview the prototype by clicking the Present button and test the animation

Click on the frame to see the bar chart height increase, filter button color change, title text move, and sales number update smoothly

Expected Result

A smooth, visually appealing transition that highlights the dashboard updates

Final Result

Click

↓

Bar Chart

↓

Filter Button

↓

Title Text

↓

Sales Number

✓Smart Animate creates smooth transitions by matching layer names and animating property changes

✓Consistent naming of elements is crucial for Smart Animate to work

✓Animations help stakeholders visually understand dashboard updates

Bonus Challenge

Add a third frame showing a filtered view with different chart types and use Smart Animate to transition through all three frames

Show Hint

Keep layer names consistent across all frames and experiment with easing options for smoother effects