Nested components in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma.

📋 Request: Your manager wants a reusable sales dashboard template with consistent styling and easy updates. They ask you to use nested components to build the dashboard so that changes to common elements update everywhere.

📊 Data: You have sales data visuals like charts, filters, and KPI cards. You need to design these as components in Figma.

🎯 Deliverable: A Figma file with nested components: base components (buttons, cards), combined into higher-level components (filter panel, KPI section), and assembled into a full dashboard template.

Sample Data

Component Name	Type	Description
Button	Base Component	Reusable button with text and icon
KPI Card	Base Component	Card showing a key metric with title and value
Filter Panel	Nested Component	Panel containing multiple Button components for filtering
KPI Section	Nested Component	Group of KPI Cards arranged horizontally
Sales Dashboard	Top-level Component	Combines Filter Panel, KPI Section, and charts into one screen

1

Step 1: Create base components for reusable elements.

Design a Button component with text and icon. Design a KPI Card component with title and value fields.

Expected Result

You have two base components: Button and KPI Card, ready to reuse.

2

Step 2: Build nested components using base components.

Create a Filter Panel component by placing multiple Button components inside. Create a KPI Section component by arranging multiple KPI Card components horizontally.

Expected Result

Filter Panel and KPI Section components contain nested base components, allowing consistent styling.

3

Step 3: Assemble the top-level Sales Dashboard component.

Combine Filter Panel, KPI Section, and placeholder frames for charts into one component representing the full dashboard.

Expected Result

Sales Dashboard component nests Filter Panel and KPI Section, forming a reusable dashboard template.

4

Step 4: Test updating a base component.

Change the Button component's color style and observe updates propagate to Filter Panel and Sales Dashboard components.

Expected Result

All buttons in nested components update automatically, confirming nested component linkage.

5

Step 5: Publish components to a shared library for team use.

Publish the components so other designers can use and update the dashboard template consistently.

Expected Result

Team members can access and reuse the nested components, ensuring design consistency.

Final Result

Sales Dashboard

┌───────────────┐

↓

↓

✓Nested components allow easy updates: changing a base component updates all nested instances.

✓Using nested components improves design consistency across the dashboard.

✓The dashboard template is reusable and scalable for future projects.

Bonus Challenge

Add interactive variants to the Button component (e.g., hover, pressed states) and ensure these states propagate correctly in nested components.

Show Hint

Use Figma's Variants feature to create button states and test them inside Filter Panel and Sales Dashboard components.