0
0
Figmabi_tool~8 mins

Base component architecture in Figma - Dashboard Guide

Choose your learning style9 modes available
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
January1000200North
February1500300South
March1200250East
April1700400West
May1600350North
June1800450South
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.