You can create nested instances in Figma by structuring your components such that one component contains instances of other components, and then using the 'Nested instances' property to expose these inner instances for easy swapping.
Understanding Nested Instances
Nested instances refer to instances of components that are placed inside another main component. Figma's 'Nested instances' property enhances this by allowing you to select specific nested instances within a component's definition and expose them directly in the Properties panel when you use an instance of that component. This makes it much faster and more intuitive to swap inner components without having to double-click into the main instance.
Steps to Utilize the Nested Instances Property
Based on the provided reference, here is the process to set up and use the Nested Instances property to manage components nested within a parent component:
- Structure Your Component: Start by creating a main component (e.g., a button with an icon, a card with a header and body). Place instances of other components (like an icon component, a button component, etc.) inside this main component. Ensure these nested components have their own variants or properties if you wish to swap them effectively later.
- Example: Create a "Card" component. Inside this Card component, place an instance of a "Header" component and an instance of a "Button" component.
- Select the Parent Component: Go to your main component's definition on the canvas. Select the component frame itself, not an instance of it.
- Add the Nested Instances Property: Look at the right-hand panel in Figma, specifically under the 'Properties' section.
- Click the '+' icon.
- From the dropdown menu, select the 'Nested instances' option.
- Select Instances to Expose: A dialog will appear listing the instances nested within your main component.
- Select the specific nested instance(s) you wish to expose in the Properties panel when someone uses an instance of this main component. For example, you might select the 'Header' instance and the 'Button' instance within your 'Card' component.
- You can give each exposed nested instance a clear name (property name) that will appear in the panel (e.g., "Card Header", "Call to Action Button").
Practical Application
Once the 'Nested instances' property is set up on your main component:
- When you drag an instance of the main component (e.g., an instance of your "Card") onto your design canvas, the right-hand Properties panel will now show the exposed nested instances (e.g., "Card Header", "Call to Action Button").
- Clicking on one of these exposed nested instances in the panel will allow you to quickly swap it with another component from your library or local components, or easily change its variants/properties, without needing to delve into the layers of the main instance.
This method significantly streamlines workflows, especially for complex components containing many interchangeable parts like navigation bars, tables, or cards.
