···

    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.

    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…cursor clicking on component prop button in right sidebar
      • 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.create component property modal for instance swap 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.

    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:

    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. cursor over plus icon in right sidebar with dropdown menu containing component property options
    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.

    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.

    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 ↑dropdown with existing component property options and an option to create a new 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.

    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.

    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.

    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.

    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.

    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:

    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.

    Related Videos

    See more