Smart animate in Figma - Dashboard Guide

Dashboard Mode - Smart animate

Goal

Understand how to use Smart Animate in Figma to create smooth transitions between dashboard states, making data changes easy to follow.

Sample Data

Month	Sales Q1	Sales Q2
January	100	150
February	200	180
March	300	250

Dashboard Components

• KPI Card: Displays total sales for selected quarter.
  Formula: Total Sales = SUM(Sales Q1) or SUM(Sales Q2)
  Example: Q1 total = 600, Q2 total = 580
• Bar Chart: Shows monthly sales for selected quarter.
  Bars animate smoothly between Q1 and Q2 data using Smart Animate.
• Quarter Selector: A toggle button to switch between Q1 and Q2 views.
  Triggers Smart Animate transition on KPI and Bar Chart.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |   Quarter Selector    |
+----------------------+----------------------+
|                      Bar Chart               |
|                                              |
+----------------------------------------------+

Interactivity

The Quarter Selector toggles between Q1 and Q2 data. When toggled:

• The KPI Card updates total sales number.
• The Bar Chart updates monthly sales bars.
• Smart Animate creates smooth transitions for number changes and bar heights.

This helps users see how sales changed from Q1 to Q2 without abrupt jumps.

Self Check

If you switch the quarter selector from Q1 to Q2, which components update and how?

• KPI Card: Updates total sales number from 600 to 580 with a smooth number transition.
• Bar Chart: Bars animate smoothly from Q1 heights to Q2 heights.
• Quarter Selector: Visual toggle changes state.

This confirms Smart Animate is working to create smooth, understandable changes.

Key Result

A Figma dashboard prototype demonstrating Smart Animate to smoothly transition sales data between Q1 and Q2 views.