How to use a String Variable in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text "Use Text Variable" beneath it.

Select the text and on the right hand menu, open the variable menu and select the text variable.

Please note that you cannot yet apply variables to component properties - consult our FAQ.

Step One: Select the Text

A screenshot of Figma highlighting a text element within a frame.

In a Figma design file, select a text element.

Step Two: Apply the Variable

A screenshot of Figma with a text element selected. We have highlighted the apply variable icon on the right menu side bar, which falls under the text section. Click it to open up a menu that allows you to apply text or number variables. We have highlighted a text variable to demonstrate that text variables appear. Select the variable you wish to apply to the text element.

Open the variable menu and select the text variable that you wish to apply.

This will apply the variable as shown below.

A screenshot of Figma with a frame that has had a text variable applied to a text element. The Variables Window is open demonstrating how the string variable matches that within the text element.

If you update the text variable, it will update the text in any location where it is applied.

A screenshot of Figma with a frame that has had a text variable applied to a text element. The Variables Window is open demonstrating how the string variable was updated and it still matches the text within the text element.

Frequently Asked Questions (FAQ)

Can I use line breaks?

A screenshot showing how line breaks are available when you don't use string variables.

A component using text without a string variable.

To our knowledge, String (i.e. text) variables do not yet allow for line breaks.

A screenshot of Figma that shows that string variables do not allow for line breaks.

The same component using a string variable in place of the text.

Can I apply a string (i.e. text) variable to 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.

Click the detach property button to unlink the property from a component.

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

To maintain your component, detach your component text property.

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

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.

Make sure that the component doesn't use a text property for the text element.

Copy the component and click into the text.

Link the relevant variable to the text following the tutorial above.

How do I make string variables work for multiple languages ?

A screenshot of Figma showing 4 sections that represent Dark Mode, English; Light Mode, English; Dark Mode, Spanish and Light Mode, Spanish. Each section shows the correct colors as well as the right language content.

Create a variable collection with modes for each language and apply the variables using the tutorial above.

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

We recommend you check out our Figma Variables Guide or 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.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details