Create and manage component properties

Before you Start

Who can use this feature

Users on any plan

Anyone with edit access to the Figma design file can create and manage component properties

New to component properties? Learn how component properties works by exploring the different types, preferred values, exposed nested instances, and more.

Create

Component properties are created and applied to main components and component sets to define parts of a design system and to make design systems easier to use.

Component properties can be created from two levels: the parent layer or the child layer of a main component or component set. Learn about the relationship between parent and child layers →

You can create instance swap, text, and boolean properties from the child layer, and they’ll be applied to the child layer(s) without extra steps.

You can create any component property from the parent layer, however you’ll need to take the extra step to apply it to child layers. Variant properties can only be created from the parent layer.

Property	Child layer	Parent layer
Boolean	✓	✓
Text	✓	✓
Instance Swap	✓	✓
Variant	✕	✓

From the child layers

Create a component property from a child layer of a variant or main component. This creates the property and applies it to any selected layers at the same time.

This method supports creating instance swap, text, and boolean properties.

You can’t create variant properties from a child layer.

1. Select an instance nested in a main component or variant.
2. (Optional, variants only) Click to select similar layers in the component set. These layers are recognized by having the same hierarchy and name.
3. Click in the section corresponding to the component property you wish to create. If a dropdown menu appears, click Create property…
   • Instance swap: Next to the swap instance dropdown in the right sidebar.
   • Text: In the Content section in the right sidebar
   • Boolean: In the Layer section in the right sidebar
4. From the Create component property modal, use the fields and dropdown menus to configure the property.
   • Instance swap:
     • Give your property a name using the text field
     • Set the default value by using dropdown to select an instance from local components in the file or any enabled libraries.
     • If any, set up your preferred values so others know which values they should choose from when using the component. Learn more →
   • Text:
     • Give your property a name using the text field
     • Set the default string of text by using the value text field. If you set the default value to something other than the current string, Figma will update the text string to match this value. This also works the other way around: if you update the text string on the main component, Figma will update the default value too.
   • Boolean property:
     • Give your property a name in the text field
     • Set the default value to true or false.
5. Click create property. When applied, you’ll see a purple pill with the property name in the property’s corresponding section in the right sidebar.

From the parent layer

This method supports creating all property types, including variant properties.

Adding component properties from the parent layer is a two step process:

1. Create the component property from the parent layer.
2. Manually apply it to the desired layers ↓

To create a component property from the parent layer:

1. Select a main component or component set, and click in the Properties section of the right sidebar. A dropdown with component property options will appear.
2. Select a property from the component.
   • Variant property
   • Boolean property
   • Instance swap property
   • Text property
3. Use the fields and dropdowns from in the create component property modal to give your property name and default value.
4. Click Create property.
5. Apply the property to nested layers. Creating a component property using this method does not apply them to any nested layers. Learn how ↓

Manage

After creating component properties and their values, you can manage them at any time. Rename, reorder, delete, change default values, and more.

Apply an existing property

Apply an existing component property to a nested layer at any time.

1. Select a nested layer in a main component or variant.
2. (Optional, variants only) Click to select similar layers in the component set.

3. From the right sidebar, find the section for the property you want to apply.

4. Click to open a dropdown. The dropdown contains existing properties for the type in that corresponding section.

   • Instance swap: Instance swap section
   • Text: Content section
   • Boolean: Layers section

   If the create component property modal appears instead of the dropdown, then a property of that type doesn’t exist in that component.  Learn how to create a component property ↑

5. From the dropdown, click a property to apply it to the selected layer(s). A purple pill with an icon and property name will appear in the right sidebar.

Change default value

Change the default value of a text, boolean, or instance swap property.

1. Select component set or main component.
2. Click next to the variant property to open the edit property modal.
3. Use the text field or dropdown in the Value section to update the default value.

Updating the default value will reflect on canvas if the associated instance layer has no property overrides applied.

Detach a property

Detach text, instance swap, or boolean properties from a layer.

1. Select a nested layer with a component property applied.
2. Click in right sidebar panel next to the property you wish to unlink.

This removes the component property from the layer, but the component property won’t be deleted.

Rename, reorder, or delete

Properties

To rename, reorder, or delete an existing component property:

1. Select the main component or component set.
2. From the Properties section in the right sidebar:

   • Rename: Double-click a property name. Type in a new name, then press return / enter or click outside the field to apply.

   • Reorder: Hover over a property to reveal handles. Click and drag to reorder, then release to apply.

     Variant properties always sit above other property types in the right sidebar. They can be reordered with other variant properties, but not with other property types.

   • Delete: Right-click a property and click Delete property. Or, select a property and press delete.

     If your component set or main component only contains one variant property, deleting the property will delete the entire component set or main component.

 

Values

To change or reorder values of a variant property:

1. Select component set or main component.
2. Click next to the variant property to open the edit property modal.
   • Change: In the Values section, use the text fields to change or update the values.
   • Reorder: Hover over a value to reveal handles. Click and drag to reorder.