Components collection: Nesting instances fundamentals

Nest an instance into a component

Because components are often reused across different context, you may find yourself wanting to use components within other components—also called nested instances. Learn more about relationships of nested layers.

For example, take this card design that allows users to log and track a habit. It includes text layers for the habit name, progress details, and notification time, an icon to visually represent the habit, and an icon button to log sessions.

These icons could be inserted into the main card component as regular layers, but that would make it hard to swap out icons to fit various contexts. And what if the company goes through a branding update that impacts their icon library? Locating and updating every icon would be a tedious endeavor.

Building complex components with nested instances is a great way to maintain consistency and make design system management more sustainable. When changes need to happen, such as updating an icon, you can simply modify the icon component and that update will become available for every nested instance throughout your designs, eliminating the need for manual updates and reducing the risk of design inconsistencies.

Swap an instance

Another situation you might find yourself in needing to swap one of the icons out for another icon to better suit the context of the card.

There are a couple ways to go about building the card components to be able to switch between icons.

Without instance swap: Limit icon choices to a predefined set where each icon is tied to specific use cases or meanings. In this case, you would create multiple card components, each with a different icon.

With instance swap: Provide flexibility to component consumers to choose icons based on context, or when working with a larger set of icons. In this case, you’d create a base card component, and turn each icon into a component.

Check your knowledge

Exercise: If you were working on the main component shown in the image below, which elements would you turn into nested instances?

Hint: Think about which parts of this component will need to be reused and stay consistent across designs.