Grid and column layout in Figma - Dashboard Guide

Dashboard Mode - Grid and column layout

Dashboard Goal

Help users understand sales performance by region and product category using a clear grid and column layout.

Sample Data

Region	Product Category	Sales	Profit
North	Electronics	1000	200
South	Electronics	1500	300
East	Furniture	1200	250
West	Furniture	1300	270
North	Clothing	900	150
South	Clothing	1100	180
East	Electronics	1400	320
West	Clothing	1000	160

Dashboard Components

• KPI Card: Total Sales
  Formula: SUM(Sales) = 9400
  Shows total sales across all regions and categories.
• KPI Card: Total Profit
  Formula: SUM(Profit) = 1830
  Shows total profit across all regions and categories.
• Bar Chart: Sales by Region
  Formula: SUM(Sales) grouped by Region
  North: 1900, South: 2600, East: 2600, West: 2300
  Shows sales comparison by region.
• Column Chart: Sales by Product Category
  Formula: SUM(Sales) grouped by Product Category
  Electronics: 3900, Furniture: 2500, Clothing: 3000
  Shows sales comparison by product category.
• Table: Detailed Sales Data
  Shows all rows from sample data for detailed view.

Dashboard Layout

+----------------------+----------------------+
|   Total Sales (KPI)  |   Total Profit (KPI) |
+----------------------+----------------------+
|                      Bar Chart: Sales by Region                      |
+---------------------------------------------------------------------+
|                Column Chart: Sales by Product Category               |
+---------------------------------------------------------------------+
|                          Detailed Sales Table                       |
+---------------------------------------------------------------------+

Interactivity

Adding a filter for Region updates the Bar Chart, Column Chart, KPI Cards, and the Detailed Sales Table to show data only for the selected region(s). Similarly, filtering by Product Category updates all components to reflect the selected category.

Self Check

If you add a filter for Region = South, which components update and what is the new total sales?

• All components update: KPI Cards, Bar Chart, Column Chart, and Table.
• New Total Sales = 1500 (Electronics) + 1100 (Clothing) = 2600

Key Result

A sales dashboard using grid and column layout showing total sales, profit, and sales breakdown by region and product category.