Frame nesting in Figma - Dashboard Guide

Dashboard Mode - Frame nesting

Dashboard Goal

Understand how to organize a BI dashboard using nested frames in Figma for clear structure and easy updates.

Sample Data

Region	Salesperson	Sales ($)	Month
North	Alice	1200	January
South	Bob	1500	January
East	Charlie	1000	January
North	Alice	1300	February
South	Bob	1600	February
East	Charlie	1100	February

Dashboard Components

• Frame: Dashboard Container - The main frame holding all dashboard elements.
• Nested Frame: Header - Contains the dashboard title and date filter.
• Nested Frame: KPI Cards - Holds three KPI cards showing Total Sales, Average Sales, and Highest Sales.
• Nested Frame: Sales Table - Displays the sales data in a table format.
• Nested Frame: Sales Chart - Contains a bar chart showing sales by region.

Formulas/Calculations:

• Total Sales: Sum of all sales values = 1200 + 1500 + 1000 + 1300 + 1600 + 1100 = 7700
• Average Sales: Total Sales / Number of entries = 7700 / 6 ≈ 1283.33
• Highest Sales: Maximum sales value = 1600

Dashboard Layout

+--------------------------------------------------+
|                   Header Frame                    |
|  [Dashboard Title]          [Date Filter]         |
+--------------------------------------------------+
|  KPI Cards Frame:                                  |
|  +------------+ +------------+ +----------------+ |
|  | Total      | | Average    | | Highest        | |
|  | Sales:7700 | | Sales:1283 | | Sales:1600     | |
|  +------------+ +------------+ +----------------+ |
+--------------------------------------------------+
|  Sales Table Frame                                |
|  [Table with sales data rows]                     |
+--------------------------------------------------+
|  Sales Chart Frame                                |
|  [Bar chart: Sales by Region]                     |
+--------------------------------------------------+

Interactivity

The Date Filter in the Header Frame controls the data shown in the KPI Cards, Sales Table, and Sales Chart frames. Selecting a month updates all nested frames to show sales data only for that month.

Self Check

If you select February in the Date Filter, which components update and what changes occur?

• All KPI Cards update to show February sales: Total Sales = 1300 + 1600 + 1100 = 4000, Average Sales ≈ 1333.33, Highest Sales = 1600.
• Sales Table shows only February rows.
• Sales Chart updates to show sales by region for February only.

Key Result

A BI dashboard structured with nested frames in Figma showing sales KPIs, table, and chart with interactive date filtering.