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.

Practice

1. What is a nested component in Figma?

easy

A. A component that is not reusable

B. A component placed inside another component

C. A component that cannot be edited

D. A component used only once in a design

Solution

1. Step 1: Understand component basics

   A component is a reusable design element in Figma.

2. Step 2: Define nested component

   A nested component is one placed inside another to build complex designs.

3. Final Answer:

   A component placed inside another component -> Option B

4. Quick Check:

   Nested component = component inside component [OK]

Hint: Think of components like boxes inside bigger boxes [OK]

Common Mistakes:

• Confusing nested components with non-editable elements
• Thinking nested means used only once
• Believing nested components are not reusable

2. Which of the following is the correct way to create a nested component in Figma?

easy

A. Drag one component inside another component frame

B. Copy and paste a component outside any frame

C. Use the text tool inside a component

D. Create a new component without any layers

Solution

1. Step 1: Identify how nesting works

   Nested components require placing one component inside another's frame or group.

2. Step 2: Check options

   Dragging a component inside another component's frame nests it correctly.

3. Final Answer:

   Drag one component inside another component frame -> Option A

4. Quick Check:

   Drag inside frame = nest component [OK]

Hint: Drag components inside others to nest them [OK]

Common Mistakes:

• Pasting components outside frames does not nest
• Using text tool does not create nested components
• Creating empty components is unrelated

3. Given a main component with a nested button component inside, what happens if you update the nested button's style?

medium

A. No changes happen to any components

B. Only the main component updates, nested buttons stay the same

C. All instances of the nested button update automatically

D. Only the current instance of the nested button updates

Solution

1. Step 1: Understand component instances

   Nested components are reusable; updating the master updates all instances.

2. Step 2: Apply update logic

   Changing the nested button's style updates all places it is used, including inside main components.

3. Final Answer:

   All instances of the nested button update automatically -> Option C

4. Quick Check:

   Update nested master = update all instances [OK]

Hint: Change master component to update all nested instances [OK]

Common Mistakes:

• Thinking only main component updates
• Believing changes affect only one instance
• Assuming no automatic updates happen

4. You tried nesting a component inside another, but the nested component does not appear in the main component. What is the likely issue?

medium

A. The nested component was placed outside the main component frame

B. The nested component is locked and cannot be seen

C. The main component is not selected

D. You need to restart Figma to see changes

Solution

1. Step 1: Check nesting placement

   For a component to be nested, it must be inside the main component's frame or group.

2. Step 2: Identify common mistake

   Placing the nested component outside the frame means it won't appear inside the main component.

3. Final Answer:

   The nested component was placed outside the main component frame -> Option A

4. Quick Check:

   Nested component must be inside frame [OK]

Hint: Ensure nested component is inside main component frame [OK]

Common Mistakes:

• Assuming locking hides nested components
• Thinking selection affects visibility
• Believing restart is needed for nesting

5. You have a dashboard component with nested chart and button components. You want to update the button style only in this dashboard without affecting other dashboards. How can you do this?

hard

A. Lock the nested button component to prevent changes

B. Edit the master button component directly

C. Create a new button component and replace the nested one

D. Detach the nested button component instance and edit it locally

Solution

1. Step 1: Understand instance behavior

   Editing the master updates all instances, so direct edits affect all dashboards.

2. Step 2: Use detaching to customize locally

   Detaching the nested button instance breaks the link, allowing local edits without affecting others.

3. Step 3: Avoid unnecessary replacements

   Creating a new component is extra work; detaching is simpler for one-off changes.

4. Final Answer:

   Detach the nested button component instance and edit it locally -> Option D

5. Quick Check:

   Detach instance = local edit only [OK]

Hint: Detach nested instance to edit without global changes [OK]

Common Mistakes:

• Editing master affects all instances
• Replacing components wastes time
• Locking does not allow editing