How to make a component text property in Figma

A flower that represents Figma next to an icon that represents Figma Components. Beneath it sits the text "Text Property".

A text property makes the text in a component a variable that can be changed on the right sidebar and can be created through the Properties panel when selecting a component.

The following tutorial walks you through how to add a text property an existing Figma component through the lens of a pre-created button component. To learn how to create a Component in Figma or variants, please consult the tutorials below.

Please note that when we use the term variable, we are not referring to Figma Variables (2023).

As of the writing of this article you cannot apply a String Variable to a Text Property.

Step One: Select your Component

A screenshot of Figma with a button component selected.

In Figma, select the component you wish to add a text property to.

Please note it is advised that the text which you wish to convert into a property already.

Step Two: Add a new property to the component

A screenshot of Figma with the Create new property pop up menu open and the text property highlighted. We have also highlighted the + next to the properties panel on the right side bar, which opens this pop up.

On the right side menu, click the + under the Properties panel to reveal the properties that you can add to the component. From the Create new property pop up menu that appears, select Text.

Step Three: Create component property

A screenshot of the Create Component Property modal that appears when you add a new text property. We have highlighted the name and default value, as well as the create property button.

In the modal that appears, give the text property a name and a default value.

The name will appear on the right side bar when selecting the component and the default value will be applied when creating a new version of the component.

Once you're ready, click the Create property button.

Step Four: Select the text layer

A screenshot of Figma with the text layer that we wish to transform to a text property selected and highlighted.

Select the text layer within the component that you created a text property for in step three, which you wish to apply the text property to.

In our case, we selected the title within the button as the property we created is a button title.

Step Five: Apply Text Property

A screenshot of Figma with a text layer inspected. On the right side bar we have highlighted the link button on the content panel, which if selected allows you to link text to text properties of a component. We also highlighted the button title text property that we created as part of this tutorial.

With the text layer selected, press the link icon next to the Content panel in the right side bar and link the content to the property that you created in step three.

Step Six: Test

A screenshot in Figma with the component that we created, next to a copy of it. Highlighted is the copy and the Button title text property on the right side bar, which has been updated to New Title. This text property value change changed the title on the copy of the button component, demonstrating how text properties work and how to use them.

Copy the component and using the right side bar, change the text property value to a new value and confirm that the property works as desired.

Please note that changing the text property value is how you "use" text properties in components.

Frequently Asked Questions (FAQ)

Can I use a variable with a component text property ?

A screenshot of Figma showing a component that has a text property. We have selected the text within the component and highlighted the detach property button that appears on the right menu side bar under the text section to the right of the text property. Click the detach property button to delete the text property whilst maintaining the ability to alter the text of a component.

As of the last update to this article, component text properties cannot be used with string variables.

To apply a variable, detach your component text property.

Then in the component "copy" double click and link the variable using the tutorial linked below.

How can I apply a string (i.e. text) variable to a component ?

A screenshot of Figma highlighting a text element within a component. There is an arrow that shows that the text element is linked to a variable property on the right menu side bar.

To apply a variable, detach your component text property.

Copy the component and click into the text.

Then link the property using the tutorial linked below.

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.