Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
To nest components in Figma, place an instance of a child component inside a parent component’s main component. Use a nested instance when the child should stay consistent and receive updates from its source; use instance swapping when the child should be selectable; and consider slots when an area needs to hold flexible or repeating content.
What a nested component is—and what it is not
A nested component is a component instance placed inside another component. For example, a card component can contain an instance of an icon component. The parent defines the overall structure, while the nested child remains connected to its own main component.
That connection is useful when the same child appears in many places: changes to the child’s main component can flow through its nested uses. Figma’s lesson on nesting instances uses icons in cards to illustrate why reusable children are easier to update and swap than ordinary layers.
#1 Best Overall
Nesting is about composition, not simply creating every possible variation. Figma describes variants as related components organized in a component set and distinguished by property/value pairs. A nested instance is an instance inside another component. Variants represent predefined related states; nested instances let you build a parent from reusable child components. Detaching an instance breaks its connection to the main component, so it no longer receives that component’s updates. See Figma’s components wrap-up quiz for these distinctions.
How to nest a child component in a parent
- Identify a genuinely reusable child. Look for an element that recurs and should behave consistently, such as an icon, button, or badge inside a card. If it is just a one-off decorative layer, making it a component may add needless structure.
- Make the child a component. Create a main component for the reusable element. In Figma’s card-and-icon example, the icons are components rather than ordinary layers.
- Place an instance inside the parent’s main component. Add an instance of the child to the parent component, then arrange it as part of the parent’s layout.
- Use a parent instance to check the result. Create or select an instance of the parent and confirm that its child appears and behaves as intended. When you update the child’s main component, the nested use can inherit those changes.
Keep the child as an instance when you want the link to remain intact. Detaching is a deliberate break from that update relationship, not a routine step in nesting.
Choose fixed child options or instance swapping
Decide whether the parent should dictate the child or let the person using the parent choose it. These approaches solve different problems:
| Approach | Best when | What the parent communicates |
|---|---|---|
| Fixed nested child | The child is part of a specific, deliberately defined parent design. | This parent uses this particular child. |
| Swappable nested child | The parent’s structure stays the same, but the child should vary by context. | Choose an appropriate child component for this instance. |
| Separate parent components | A small, intentional set of parent-child combinations is clearer as distinct designs. | Each parent component represents a defined combination. |
For example, a card family with a few prescribed icons can use separate card components, each with its chosen icon. If users of the design system need to select an icon for each card instance, a base card with a nested icon component that can be swapped is more adaptable. Figma presents both patterns in its nesting lesson and notes that its suggested nested layers are not a definitive prescription. Choose based on how the system is actually used.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Instance swapping is not the same as a variant. A variant is a predefined state in a component set; swapping selects a child component within a parent composition. Use variants for related states of a component, and swapping when the child itself is the choice that needs to change.
Use layout settings to make nested components adapt
Nesting does not require every part of a layout to follow the same direction. Figma auto layout supports nested frames that combine horizontal, vertical, and grid arrangements. Parent and child frames have independent padding and gap settings, letting each level control its own spacing. Figma’s auto layout guide explains these properties.
Be deliberate about what an instance is allowed to change. Figma’s component and instance comparison says instances support adjustments to padding and gap, but not reordering layers or adding layers. Removing a layer from an instance hides it rather than structurally deleting it. If a user needs to rearrange or add arbitrary elements, a nested component alone may not provide the flexibility they need.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use slots when a region needs flexible content
Slots are a separate option for a parent region that needs to accept content arranged in an instance without detaching. Figma describes slots for repeating content such as lists or tabs, as well as freeform arrangements in cards or modals. In those cases, a fixed nested child or a swap among child components can be too restrictive because the content itself must be assembled or repeated.
There is an important maintenance consequence: removing a slot property from the main component resets customized slot content in instances. Treat changes to slot properties as potentially affecting instance-level content, and check affected instances before removing one. Figma’s slots help article labels the feature open beta in the captured documentation; availability and interface labels may change, so check Figma’s current documentation and editor before relying on the feature.
A practical decision rule
- Use a nested instance when a repeated child should stay consistent and inherit updates.
- Enable a swap workflow when the parent’s structure is stable but users need to choose among child components.
- Create separate parent components when the allowed combinations are few and intentionally fixed.
- Use variants to represent related, predefined states of a component rather than arbitrary content composition.
- Consider a slot when the region must hold repeated or freely arranged content without detaching.
There is no documented maximum nesting depth or performance threshold in the cited Figma guidance. Build the component hierarchy around clear reuse and editing needs rather than an assumed numeric limit.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
