Components inside components with use of Instance Swap property
This page describes how to export a component as a container with other component inside
Last updated
This page describes how to export a component as a container with other component inside
Last updated
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.
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:
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:
