Figmular - Export Figma to Angular
  • Introduction
  • Export components
    • Export with Angular Material
    • Export with My Design System
    • Export Figma to a new Angular component
  • Additional Configuration
    • Components inside components with use of Instance Swap property
    • Fields: Use data from Figma node
    • Share configuration with the team
Powered by GitBook
On this page
  • Creating Instance Swap property in Figma
  • Mapping in Figmular
  1. Additional Configuration

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 1 year ago

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:

Mapping Instance Swap properties in Figmular
Simple-card component with a content placeholder
Creating Instance Swap property from a component Instance
Notification Settings component in Figma
Selecting new value for the Content property of instance swap type
Simple-card component with the notification settings component inside
Adding a Suggested Field to the list of Configured Fields
Content field is used with a custom component
Content field is used in Angular Material card component