Prototype mode overview in Figma - Dashboard Guide

Dashboard Mode - Prototype mode overview

Goal

Understand how Prototype mode in Figma helps you create interactive dashboards to answer business questions.

Sample Data

Page	Element	Action	Target
Dashboard	Sales Chart	On Click	Sales Details Page
Dashboard	Filter Button	On Click	Filter Panel
Filter Panel	Region Dropdown	On Change	Dashboard
Sales Details Page	Back Button	On Click	Dashboard
Dashboard	Refresh Button	On Click	Dashboard (Reload)

Dashboard Components

• Sales Chart: Interactive chart showing sales by region. Clicking a region navigates to detailed sales page.
• Filter Button: Opens filter panel to select regions or time periods.
• Filter Panel: Contains dropdowns and sliders to filter dashboard data.
• Sales Details Page: Shows detailed sales data for selected region.
• Back Button: Returns user to main dashboard.
• Refresh Button: Reloads dashboard data to latest values.

Dashboard Layout

+---------------------------+-----------------+
| Sales Chart               | Filter Button   |
|                           |                 |
|                           |                 |
+---------------------------+-----------------+
| Filter Panel (hidden by default)           |
+-------------------------------------------+
| Sales Details Page (navigates on click)   |
+-------------------------------------------+
| Refresh Button                             |
+-------------------------------------------+

Interactivity

The Filter Button opens the Filter Panel. Selecting options in the Region Dropdown filters the Sales Chart data. Clicking a region on the Sales Chart navigates to the Sales Details Page for that region. The Back Button returns to the main dashboard. The Refresh Button reloads the dashboard data to show the latest sales.

Self Check

If you add a filter for Region = East, which components update?

• The Sales Chart updates to show only East region sales.
• The Filter Panel reflects the selected region.
• The Sales Details Page will show East region details when navigated.

Key Result

Interactive dashboard prototype showing sales data with filters and navigation using Figma Prototype mode.