Components inside components with use of Instance Swap property

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.

Creating Instance Swap property in Figma

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

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

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:

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

The result is the 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:

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:

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