Creating components in Figma - Dashboard Building Guide

Dashboard Mode - Creating components

Goal

Understand how to create reusable components in Figma to build consistent BI dashboards efficiently.

Sample Data

Month	Sales	Region
January	100	North
February	150	North
March	200	South
April	250	South
May	300	East
June	350	East

Dashboard Components

• KPI Card Component: Displays total sales with a formula summing all sales values (100+150+200+250+300+350 = 1350). This component is reusable for any KPI by changing the metric.
• Bar Chart Component: Visualizes sales by month using the sample data. Each bar height corresponds to sales value for that month.
• Region Filter Component: A dropdown filter to select sales region (North, South, East). Filters update the KPI card and bar chart to show data only for the selected region.
• Sales Table Component: Shows detailed sales data rows filtered by region. Displays Month, Sales, and Region columns.

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |    Region Filter     |
+----------------------+----------------------+
|                      Bar Chart               |
|                                              |
+----------------------------------------------+
|                Sales Table                    |
+----------------------------------------------+

Interactivity

The Region Filter controls which data is shown in the KPI Card, Bar Chart, and Sales Table. Selecting a region updates all these components to show only sales from that region. For example, choosing 'North' updates the KPI Card to sum sales for January and February only (100+150=250), the Bar Chart to show bars for those months, and the Sales Table to list only those rows.

Self Check

If you select the region filter to 'South', which components update and what data do they show?

• KPI Card: Shows total sales for South (200+250=450).
• Bar Chart: Displays bars for March and April only.
• Sales Table: Lists rows for March and April with sales and region details.

Key Result

A Figma dashboard with reusable components showing sales KPIs, bar chart, and table filtered by region.