Frame nesting in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard for your company's BI team.

📋 Request: Your manager wants a clean, organized dashboard layout using nested frames to group related visual elements.

📊 Data: You have several charts and KPI cards representing sales data, customer segments, and monthly trends.

🎯 Deliverable: Create a Figma file with nested frames organizing the dashboard components logically and visually.

Sample Data

Component	Type	Description
Sales Chart	Chart	Line chart showing monthly sales
Customer Segments	Chart	Pie chart of customer types
Monthly KPIs	Cards	Cards showing revenue, profit, and growth
Filters	Controls	Date range and region selectors

1

Step 1: Create a main frame named 'Dashboard' to hold all components.

In Figma, select the Frame tool and draw a large frame. Rename it to 'Dashboard'.

Expected Result

A large empty frame named 'Dashboard' appears on the canvas.

2

Step 2: Inside 'Dashboard', create a nested frame named 'Filters' to hold filter controls.

Select the Frame tool, draw a smaller frame inside 'Dashboard', rename it 'Filters'. Place date range and region selectors inside.

Expected Result

'Filters' frame contains the filter controls and is visually distinct inside 'Dashboard'.

3

Step 3: Create another nested frame inside 'Dashboard' named 'Charts' to group all charts.

Draw a frame inside 'Dashboard' next to 'Filters', rename it 'Charts'. Place 'Sales Chart' and 'Customer Segments' charts inside.

Expected Result

'Charts' frame groups the two charts together inside 'Dashboard'.

4

Step 4: Create a nested frame inside 'Dashboard' named 'KPIs' to hold KPI cards.

Draw a frame inside 'Dashboard' below 'Filters' and 'Charts', rename it 'KPIs'. Place revenue, profit, and growth cards inside.

Expected Result

'KPIs' frame groups all KPI cards inside 'Dashboard'.

5

Step 5: Adjust spacing and alignment of nested frames for a clean layout.

Use Figma's alignment tools to evenly space 'Filters', 'Charts', and 'KPIs' frames inside 'Dashboard'.

Expected Result

Dashboard layout looks organized with clear grouping and spacing.

Final Result

Dashboard Frame
├── Filters Frame (Date range, Region selectors)
├── Charts Frame
│   ├── Sales Chart (Line chart)
│   └── Customer Segments (Pie chart)
└── KPIs Frame (Revenue, Profit, Growth cards)

✓Nested frames help organize dashboard components logically.

✓Grouping related elements improves visual clarity and usability.

✓Adjusting spacing inside frames creates a balanced layout.

Bonus Challenge

Add interactive prototype links between filter controls and charts inside the nested frames.

Show Hint

Use Figma's prototyping feature to link filter selections to chart updates for a realistic dashboard experience.