Base component architecture in Figma - Dashboard Guide

Dashboard Mode - Base component architecture

Dashboard Goal

Understand the basic building blocks of a dashboard by exploring the base component architecture. This helps you see how simple parts like cards, charts, and tables come together to create a clear and useful dashboard.

Sample Data

Month	Sales	Profit	Region
January	1000	200	North
February	1500	300	South
March	1200	250	East
April	1700	400	West
May	1600	350	North
June	1800	450	South

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM(Sales) = 1000+1500+1200+1700+1600+1800 = 8800
• KPI Card: Total Profit
  Formula: SUM(Profit) = 200+300+250+400+350+450 = 1950
• Bar Chart: Sales by Month
  Shows sales values for each month from January to June.
• Pie Chart: Sales by Region
  Shows sales distribution across North, South, East, and West regions.
• Table: Detailed Sales Data
  Displays all rows from the sample data for detailed view.

Dashboard Layout

+----------------------+----------------------+
|  Total Sales (KPI)   |  Total Profit (KPI)  |
+----------------------+----------------------+
|                      Bar Chart: Sales by Month                      |
+--------------------------------------------------------------------+
| Pie Chart: Sales by Region |          Table: Detailed Sales Data          |
+----------------------------+---------------------------------------------+
  

Interactivity

Adding a filter for Region will update:

• Total Sales and Total Profit KPI cards to show sums only for the selected region.
• Bar Chart to show sales by month only for the selected region.
• Pie Chart to highlight or adjust based on the filtered region.
• Table to display only rows matching the selected region.

This helps focus the dashboard on specific areas easily.

Self Check

If you add a filter for Region = South, which components update and what changes happen?

• KPI Cards: Total Sales becomes 1500 + 1800 = 3300; Total Profit becomes 300 + 450 = 750.
• Bar Chart: Shows sales only for February and June.
• Pie Chart: Highlights South region or shows 100% if filtered strictly.
• Table: Shows only rows for February and June.

Key Result

A simple dashboard showing total sales and profit KPIs, sales trends by month, sales distribution by region, and detailed sales data with interactive region filtering.