Components inside components with use of Instance Swap property

This page describes how to export a component as a container with other component inside

It's a common practice to have components that are designed to have other components inside: cards, panels, accordions, and others. Figmular supports this flow and allows exporting nested components, it just requires proper mapping.

Mapping Instance Swap properties in Figmular

Creating Instance Swap property in Figma

For example, there is a Card component called 'simple-card' with a content placeholder inside:

Simple-card component with a content placeholder

The first thing that needs to be done is to bind the placeholder instance to an Instance Swap property:

Creating Instance Swap property from a component Instance

Once the Instance Swap property is created, it can be used to replace the Placeholder component with actual content components. In this example it's going to be replaced with the Notification Settings component:

Notification Settings component in Figma

To achieve that, this component should be selected as a value for the Instance Swap property of an instance of the simple-card component:

Selecting new value for the Content property of instance swap type

The result is the simple-card component with the notification settings component inside:

Simple-card component with the notification settings component inside

Mapping in Figmular

If the component already has an Instance Swap property, it only needs to be mapped in Figmular. A configured Field entity is the first thing that is needed:

Adding a Suggested Field to the list of Configured Fields

After that, the simple-card component can be mapped to use the field 'content'. This is an example of mapping for a case with a custom design system:

Content field is used with a custom component

Alternatively, the same approach can be used together with the predefined design systems:

Content field is used in Angular Material card component