Slots pattern for flexible components in Figma - Dashboard Guide

Dashboard Mode - Slots pattern for flexible components

Business Question

How can we design a flexible dashboard component system that allows easy customization and reuse using the slots pattern?

Sample Data

Region	Product	Sales	Month
North	Apples	100	Jan
South	Oranges	150	Jan
East	Bananas	200	Feb
West	Apples	130	Feb
North	Oranges	170	Mar
South	Bananas	160	Mar

Dashboard Components

• KPI Card Component (Slot: Title, Value, Icon)
  Slots:
  • Title: "Total Sales"
  • Value: Sum of Sales = 910
  • Icon: Shopping cart icon
• Bar Chart Component (Slot: Data, X-Axis Label, Y-Axis Label)
  Slots:
  • Data: Sales by Region
  • X-Axis Label: "Region"
  • Y-Axis Label: "Sales"
  
  Data:
  • North: 270
  • South: 310
  • East: 200
  • West: 130
• Table Component (Slot: Columns, Rows)
  Slots:
  • Columns: Region, Product, Sales, Month
  • Rows: All sample data rows

Dashboard Layout

+----------------------+----------------------+
|      KPI Card        |      Bar Chart       |
|  (Total Sales)       |  (Sales by Region)   |
+----------------------+----------------------+
|                  Table Component               |
|          (Detailed Sales Data Table)           |
+------------------------------------------------+

Interactivity

Filters for Region and Month connect to all components:

• When a Region is selected, the KPI card updates total sales for that region, the bar chart highlights that region, and the table shows only rows for that region.
• When a Month is selected, all components update to show data only for that month.
• The slots pattern allows swapping the KPI card's icon or title easily without changing the component structure.

Self Check

If you add a filter for Region = South, which components update and how?

• KPI Card: Shows total sales for South = 310
• Bar Chart: Highlights South region bar; other bars dim or hide
• Table: Displays only rows where Region is South (2 rows)

Key Result

A flexible dashboard using slots pattern with KPI card, bar chart, and table showing sales data by region and month.