Nested components in Figma - Deep Dive

Overview - Nested components

What is it?

Nested components in Figma are components placed inside other components. They let you build complex designs by combining smaller reusable parts. This helps keep your design organized and easy to update. When you change a nested component, all instances update automatically.

Why it matters

Without nested components, designers would have to repeat the same elements many times, making updates slow and error-prone. Nested components save time and keep designs consistent across projects. They make teamwork smoother because everyone uses the same building blocks.

Where it fits

Before learning nested components, you should understand basic components and instances in Figma. After mastering nested components, you can explore variants and component properties to create even more flexible designs.

Mental Model

Core Idea

Nested components are like building blocks stacked inside bigger blocks to create complex, reusable designs that update everywhere at once.

Think of it like...

Imagine a set of LEGO bricks where small bricks snap together to form bigger shapes. Changing one small brick changes all the bigger shapes that use it.

┌───────────────┐
│ Main Component │
│  ┌─────────┐  │
│  │Nested   │  │
│  │Component│  │
│  └─────────┘  │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic components

Concept: Learn what a component is and how it creates reusable design elements.

A component is a design element you create once and reuse many times. For example, a button you design can be a component. When you place it multiple times, those are instances. Changing the component updates all instances automatically.

Result

You can reuse design elements easily and keep them consistent.

Understanding components is the foundation for nested components because nesting builds on reusing these elements inside others.

2

Foundation

Creating and using instances

Concept: Learn how to place and modify instances of components.

After creating a component, you can drag instances onto your canvas. Instances look like the original but can have some overrides like text changes. However, structural changes come from the main component.

Result

You can place multiple copies of a design element and customize them slightly without breaking consistency.

Knowing how instances work helps you understand how nested components propagate changes.

3

Intermediate

Introducing nested components

🤔Before reading on: do you think nested components are copies or linked elements? Commit to your answer.

Concept: Nested components are components placed inside other components, creating a hierarchy of reusable parts.

You can drag a component inside another component to nest it. For example, a card component can have a nested button component inside. When you update the nested button, all cards update automatically.

Result

Complex designs become easier to manage and update because changes flow through nested parts.

Understanding that nested components are linked, not copies, explains why updates cascade through the design.

4

Intermediate

Overriding nested instances

🤔Before reading on: can you override nested component properties without breaking the link? Commit to your answer.

Concept: You can override some properties of nested instances in their parent component without detaching them.

For example, you can change the text inside a nested button instance inside a card component. The button remains linked, so style updates still apply, but the text is unique per card.

Result

You get flexibility to customize nested parts while keeping global updates intact.

Knowing which properties can be overridden helps balance consistency and customization.

5

Intermediate

Using component properties with nesting

Concept: Component properties let you control nested components more easily.

You can add properties like text, boolean, or variants to nested components. This allows you to change nested parts from the parent component's instance panel without detaching or swapping.

Result

Designers can quickly customize nested components in many places without breaking the design system.

Component properties simplify managing nested components and reduce the need for multiple similar components.

6

Advanced

Managing overrides and detaching risks

🤔Before reading on: does detaching a nested instance keep it linked to the main component? Commit to your answer.

Concept: Detaching nested instances breaks the link to the main component, making updates manual.

If you detach a nested component inside an instance, it becomes a regular group of layers. Changes to the original component no longer affect it. This can cause inconsistencies if not managed carefully.

Result

You lose automatic updates and risk design drift if you detach nested components unnecessarily.

Understanding detaching risks helps maintain design consistency and avoid manual errors.

7

Expert

Optimizing nested components for performance

🤔Before reading on: do you think deeply nested components always improve performance? Commit to your answer.

Concept: Too many nested components can slow down Figma files and complicate maintenance.

While nesting is powerful, over-nesting creates complex hierarchies that slow rendering and confuse designers. Experts balance nesting depth and simplicity, sometimes flattening components or using variants instead.

Result

Files stay fast and easy to work with, avoiding frustration and errors.

Knowing when to limit nesting improves both design system health and team productivity.

Under the Hood

Figma stores components as linked objects with unique IDs. Nested components are references inside parent components. When a nested component updates, Figma propagates changes through these references to all instances. Overrides are stored separately, allowing customization without breaking links.

Why designed this way?

This design allows maximum reuse and consistency while enabling flexibility. Alternatives like copying components would cause duplication and manual updates. Linking components reduces file size and maintenance effort.

┌───────────────┐
│ Parent Component│
│  ┌─────────┐  │
│  │Nested   │  │
│  │Component│  │
│  └─────────┘  │
└─────┬─────────┘
      │
      ▼
┌───────────────┐
│ Component     │
│ Definition    │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does changing a nested component instance break its link to the main component? Commit yes or no.

Common Belief: Changing a nested component instance detaches it from the main component.

Reality: Overrides on nested instances do not detach them; they remain linked and update with the main component.

Why it matters: Believing this causes unnecessary detaching, leading to inconsistent designs and extra work.

Quick: Are nested components just copies inside other components? Commit yes or no.

Common Belief: Nested components are copies, so changes to the original don't affect nested ones.

Reality: Nested components are linked references, so updates to the original propagate everywhere.

Why it matters: Misunderstanding this leads to duplicated work and inconsistent updates.

Quick: Does nesting components infinitely improve design flexibility? Commit yes or no.

Common Belief: More nesting always makes designs better and easier to manage.

Reality: Excessive nesting can slow down files and confuse teams, reducing efficiency.

Why it matters: Ignoring this causes performance issues and harder maintenance.

Quick: Can you override any property of a nested component instance? Commit yes or no.

Common Belief: All properties of nested components can be overridden freely.

Reality: Only certain properties can be overridden; structural changes require editing the main component.

Why it matters: Trying to override unsupported properties causes confusion and broken designs.

Expert Zone

1

Nested components can share variants, allowing complex state management across multiple design layers.

2

Overrides on nested components are stored separately and can be reset without affecting the main component.

3

Using component properties with nested components reduces the need for detaching and manual edits, preserving design system integrity.

When NOT to use

Avoid deep nesting when performance is critical or when the design system is simple. Instead, use variants or flatten components to keep files responsive and maintainable.

Production Patterns

Teams use nested components to build design systems with shared buttons, icons, and layouts. They combine nesting with variants and component properties to create flexible, scalable UI libraries.

Connections

Modular programming

Nested components in design are like functions calling other functions in code.

Understanding modular programming helps grasp how nesting promotes reuse and maintainability in design.

Object-oriented inheritance

Nested components behave like objects inheriting properties from parent classes.

Knowing inheritance clarifies how nested components share styles and behaviors while allowing overrides.

Supply chain management

Nested components resemble parts assembled into products in supply chains.

Seeing design as assembly of parts helps appreciate the efficiency and risks of nested dependencies.

Common Pitfalls

#1 Detaching nested components unnecessarily.

Wrong approach:

Right-click nested instance → Detach Instance

Correct approach:

Edit nested component directly or use component properties to customize without detaching.

Root cause:

Misunderstanding that detaching breaks links and disables automatic updates.

#2 Over-nesting components causing slow file performance.

Wrong approach:

Create many layers of nested components without flattening or using variants.

Correct approach:

Limit nesting depth and use variants or flatten components when possible.

Root cause:

Belief that more nesting always improves design flexibility.

#3 Trying to override structural properties on nested instances.

Wrong approach:

Changing layout or adding/removing layers inside nested instances directly.

Correct approach:

Edit the main nested component to change structure; use overrides only for allowed properties.

Root cause:

Confusing overrides with component editing.

Key Takeaways

Nested components let you build complex, reusable designs by placing components inside others.

They keep designs consistent because changes to nested components update all instances automatically.

Overrides allow customization without breaking links, but structural changes require editing the main component.

Too much nesting can slow down files and complicate maintenance, so balance is key.

Understanding nested components is essential for building scalable, efficient design systems in Figma.