Form-like interactions in Figma - Dashboard Guide

Dashboard Mode - Form-like interactions

Goal

Help users enter and filter sales data easily using form-like controls to update dashboard views.

Sample Data

Order ID	Region	Salesperson	Product	Sales Amount	Order Date
1001	East	Alice	Widget	250	2024-01-15
1002	West	Bob	Gadget	400	2024-01-20
1003	East	Charlie	Widget	150	2024-02-05
1004	South	Alice	Gizmo	300	2024-02-10
1005	West	Bob	Widget	500	2024-03-01
1006	East	Charlie	Gizmo	350	2024-03-15

Dashboard Components

• Filter Form Panel: Dropdowns and date pickers for Region, Salesperson, Product, and Order Date Range. Users select criteria here to filter data.
• Total Sales KPI Card: Shows sum of Sales Amount for filtered data.
  Formula: Total Sales = SUM(Sales Amount WHERE filters applied)
  Example result: 400 (if Region=East and Product=Widget selected)
• Sales by Product Bar Chart: Displays total sales per product for filtered data.
  Formula: SUM(Sales Amount) GROUP BY Product
• Sales Data Table: Shows filtered rows with columns Order ID, Region, Salesperson, Product, Sales Amount, Order Date.

Dashboard Layout

+----------------------+-------------------------+
| Filter Form Panel    | Total Sales KPI Card     |
| (Region, Salesperson,|                         |
| Product, Date Range) |                         |
+----------------------+-------------------------+
|                                              |
|          Sales by Product Bar Chart           |
|                                              |
+----------------------------------------------+
|                                              |
|               Sales Data Table                |
|                                              |
+----------------------------------------------+

Interactivity

When users select values in the Filter Form Panel, the Total Sales KPI Card, Sales by Product Bar Chart, and Sales Data Table update automatically to show only data matching the selected filters. For example, choosing Region = 'East' and Product = 'Widget' filters all components to that subset.

Self Check

If you add a filter for Salesperson = 'Alice', which components update?

• Answer: The Total Sales KPI Card, Sales by Product Bar Chart, and Sales Data Table all update to show only sales made by Alice.

Key Result

Dashboard with form-like filters to dynamically update sales KPIs, charts, and tables.