# 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. {% embed url="" %} Mapping Instance Swap properties in Figmular {% endembed %} ### 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:

### 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

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.figmular.com/additional-configuration/components-inside-components-with-use-of-instance-swap-property.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.