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 | ✕ | ✓ |
Tip! Add descriptions and links to documentation to components to better communicate a component’s intended use. Documentation provides the right information to those using or implementing your design system to guide proper application, variant and state usage, and accessibility and contrast requirements. Learn how to add documentation to components and styles →
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.
- Select an instance nested in a main component or variant.
- (Optional, variants only) Click to select similar layers in the component set. These layers are recognized by having the same hierarchy and name.
- 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
- 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.
- Instance swap:
- 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.
Tip! Want to apply or create a different property? Click the purple pill from the relevant property 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:
- Create the component property from the parent layer.
- Manually apply it to the desired layers ↓
To create a component property from the parent layer:
- 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.
- Select a property from the component.
- Variant property
- Boolean property
- Instance swap property
- Text property
- Use the fields and dropdowns from in the create component property modal to give your property name and default value.
- Click Create property.
- 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.
Note: To use new or updated components across different files, be sure to publish them to the team library. This allows you to share them with others or to use them in other files or projects. Learn how to publish to team library →
Apply an existing property
Apply an existing component property to a nested layer at any time.
- Select a nested layer in a main component or variant.
- (Optional, variants only) Click to select similar layers in the component set.
-
From the right sidebar, find the section for the property you want to apply.
-
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 ↑
- 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.
Tip! To change a nested layer’s component property to an existing one of the same type, click the purple pill in the right sidebar. From the dropdown, click a property to apply.
Change default value
Change the default value of a text, boolean, or instance swap property.
- Select component set or main component.
- Click next to the variant property to open the edit property modal.
- 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.
Note: The default value of a variant property is determined by the variant in the top left corner of a component set. Learn how to change a component set’s default variant →
Detach a property
Detach text, instance swap, or boolean properties from a layer.
- Select a nested layer with a component property applied.
- 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.
Note: It’s not possible to detach a variant property from a nested layer.
Rename, reorder, or delete
Properties
To rename, reorder, or delete an existing component property:
- Select the main component or component set.
- 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:
- Select component set or main component.
- 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.