0
0
Figmabi_tool~8 mins

Prototype presentation mode in Figma - Dashboard Guide

Choose your learning style9 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash
Dashboard Mode - Prototype presentation mode
Goal

Understand how to use Prototype Presentation Mode in Figma to show interactive dashboards and reports to stakeholders.

Sample Data
MonthRegionSalesProfit
JanuaryNorth1000200
FebruarySouth1500300
MarchEast1200250
AprilWest1300270
MayNorth1100220
JuneSouth1600320
Dashboard Components
  • KPI Card: Total Sales = SUM of Sales column = 7700
  • KPI Card: Total Profit = SUM of Profit column = 1560
  • Bar Chart: Sales by Region showing total sales per region (North: 2100, South: 3100, East: 1200, West: 1300)
  • Line Chart: Monthly Sales trend from January to June
  • Table: Detailed sales data by Month and Region as shown in sample data
Dashboard Layout
+----------------------+----------------------+
|      KPI: Sales      |     KPI: Profit      |
+----------------------+----------------------+
|                      Bar Chart               |
|                                              |
+----------------------------------------------+
|                Line Chart                     |
+----------------------------------------------+
|                Data Table                     |
+----------------------------------------------+
Interactivity

Use Prototype Presentation Mode in Figma to link dashboard elements:

  • Clicking on a Region in the Bar Chart filters the Data Table and updates the Line Chart to show only that region's data.
  • KPI Cards update dynamically to reflect filtered data.
  • Hover states highlight bars and table rows for better focus.
  • Navigation buttons allow switching between monthly and quarterly views.
Self Check

If you add a filter for Region = South in Prototype Presentation Mode, which components update?

  • KPI Cards show total sales and profit for South region only.
  • Bar Chart highlights South region bar.
  • Line Chart shows monthly sales trend for South region.
  • Data Table displays only rows where Region is South.
Key Result
A Figma prototype dashboard showing sales KPIs, charts, and data with interactive filtering by region.