You can add a component into another component by creating an instance of the desired component and placing it inside the structure of the target component.
Understanding Component Nesting
Nesting components is a fundamental practice in design and development workflows. It involves placing one component (often referred to as the child or nested component) inside another component (the parent component). This creates a hierarchical structure, allowing complex interfaces to be built from smaller, reusable building blocks. The key is typically to work with instances of components, not the original master components themselves, when nesting.
Step-by-Step Guide to Nesting Components
Adding a component into another component is a straightforward process. Based on best practices and common workflows, here are the steps:
- Select the Component You Want to Use: Identify the existing component (the master component) that you wish to place inside another component.
- Copy It / Create a New Nested Instance: From the selected master component, create an instance. This is a copy of the master component but remains linked to it, allowing for easy updates across all instances if the master changes.
- Drag or Copy/Paste That Nested Instance Into the New Component: Take the instance you just created and place it inside the frame, layer group, or structure of the component where you want it to reside. This effectively nests the instance within the parent component's definition.
Alternatively, after performing steps 1-3, you might choose to perform a follow-up action:
- Alternatively, create a component out of that nested instance (Ctrl/Cmd + K): This step is less about the act of nesting itself and more about potentially turning the resulting structure (the parent component containing the nested instance) into a new component, or potentially turning the nested instance itself into a new component definition (though typically you nest instances of existing components). The primary action of adding is covered in steps 1-3.
Why Nest Components?
Nesting components offers significant advantages:
- Reusability: Build complex components from simpler ones, making your design system more modular and efficient.
- Consistency: Ensure consistent design patterns by using instances linked to a single source of truth (the master component).
- Maintainability: Updates to the nested component's master will automatically reflect in all its instances, even when they are nested within other components.
Practical Insight: The Instance is Key
Remember, when nesting, you are generally placing an instance of a component inside another. This preserves the link to the original master component, allowing for global updates. Nesting the master component itself is usually not the intended workflow for building interfaces.
| Action | Result |
|---|---|
| Create Instance | Linked copy of a master component |
| Place Instance in Component | Nested component structure (Parent/Child) |
| Update Master of Nested Comp | All instances (wherever they are) update |
