Nested components in Figma - Dashboard Guide

Dashboard Mode - Nested components

Dashboard Goal

Understand how nested components help build reusable and consistent dashboard elements in Figma for BI reports.

Sample Data

Region	Salesperson	Sales Amount	Month
North	Alice	1000	Jan
South	Bob	1500	Jan
East	Carol	1200	Feb
West	Dave	1300	Feb
North	Alice	1100	Mar

Dashboard Components

• Base KPI Card (Component): A reusable card showing a KPI title and value. It has two text fields: Title and Value.
• Sales KPI Card (Nested Component): Uses the Base KPI Card and sets the Title to "Total Sales" and Value to the sum of all sales amounts (6100).
• Region KPI Card (Nested Component): Uses the Base KPI Card and sets the Title to "Sales in North Region" and Value to the sum of sales where Region = "North" (2100).
• Dashboard Frame: Contains the two KPI cards side by side, showing how nested components build a consistent layout.

Dashboard Layout

+---------------------------+
|      Dashboard Frame      |
| +---------------------+  |
| | Sales KPI Card      |  |
| | Title: Total Sales  |  |
| | Value: 6100         |  |
| +---------------------+  |
| +---------------------+  |
| | Region KPI Card     |  |
| | Title: Sales in     |  |
| | North Region        |  |
| | Value: 2100         |  |
| +---------------------+  |
+---------------------------+
    

Interactivity

When you update the Base KPI Card component (for example, change font or colors), all nested KPI cards update automatically. This keeps the dashboard consistent and saves time.

If you change the sales data, you update the Value text in the nested components to reflect new totals. The nested structure makes it easy to reuse the design while updating data.

Self Check

Add a new KPI card nested from the Base KPI Card to show "Sales in South Region" with value 1500. Which components update automatically if you change the Base KPI Card style?

Answer: All KPI cards nested from the Base KPI Card, including the new "Sales in South Region" card, update automatically with the style changes.

Key Result

A simple dashboard showing how nested components in Figma create reusable KPI cards with consistent style and data display.