First Figma design - Dashboard Guide

Dashboard Mode - First Figma design

Dashboard Goal

Understand monthly sales performance and product category trends to help the sales team focus on top products and months.

Sample Data

Month	Product Category	Sales Amount	Units Sold
January	Electronics	1000	50
January	Clothing	700	70
February	Electronics	1200	60
February	Clothing	800	80
March	Electronics	1100	55
March	Clothing	900	90

Dashboard Components

• Total Sales KPI Card: Shows total sales amount.
  Formula: SUM(Sales Amount) = 1000 + 700 + 1200 + 800 + 1100 + 900 = 5700
• Average Units Sold KPI Card: Shows average units sold per record.
  Formula: AVERAGE(Units Sold) = (50 + 70 + 60 + 80 + 55 + 90) / 6 = 67.5
• Sales by Month Bar Chart: Displays total sales amount per month.
  Data:
  January: 1000 + 700 = 1700
  February: 1200 + 800 = 2000
  March: 1100 + 900 = 2000
• Sales by Product Category Pie Chart: Shows sales distribution by product category.
  Data:
  Electronics: 1000 + 1200 + 1100 = 3300
  Clothing: 700 + 800 + 900 = 2400
• Detailed Sales Table: Lists all data rows with Month, Product Category, Sales Amount, and Units Sold.

Dashboard Layout

+----------------------+----------------------+
| Total Sales (KPI)    | Average Units Sold    |
|        5700          |         67.5         |
+----------------------+----------------------+
|                      Sales by Month Bar Chart                      |
|                            (Bar Chart)                            |
+-------------------------------------------------------------------+
|               Sales by Product Category Pie Chart                  |
|                             (Pie Chart)                           |
+-------------------------------------------------------------------+
|                       Detailed Sales Table                         |
|  Month  | Product Category | Sales Amount | Units Sold           |
|  ...    |       ...        |     ...     |    ...               |
+-------------------------------------------------------------------+

Interactivity

A filter for Month allows users to select one or multiple months. When applied:

• All components update to show data only for the selected months.
• Total Sales and Average Units Sold KPI cards recalculate based on filtered data.
• Sales by Month Bar Chart highlights or shows only selected months.
• Sales by Product Category Pie Chart updates sales distribution for selected months.
• Detailed Sales Table shows only rows for selected months.

Self Check

If you add a filter to select only February, which components update and what will they show?

• Total Sales KPI: Shows 1200 + 800 = 2000
• Average Units Sold KPI: (60 + 80) / 2 = 70
• Sales by Month Bar Chart: Only February bar visible with value 2000
• Sales by Product Category Pie Chart: Electronics 1200, Clothing 800
• Detailed Sales Table: Only rows for February displayed

Key Result

Dashboard showing monthly sales and product category trends with KPIs, charts, and detailed table.