How to adapt Designs to work with Multiple Languages in Figma

A flower that represents Figma with the text "Localization" beneath it.

A step by step guide on using variable collections to localize and preview designs in multiple languages.

Please note that the ability to localize designs is only available on education, professional or organization Figma accounts.

Step One: Create the Language Manager Collection

A screenshot of Figma with the Variable Window open, showing how we have created an empty collection called "Language Manager."

In the Figma design file, create a new collection to hold all the strings.

Step Two: Add the Strings

A screenshot of Figma showing the variable window open. We have populated all the strings for the price after app into the Language Manager collection and have grouped the strings based on the screen that they are in. We recommend using a shared group for strings that are used across the system.

Create modes for each of the languages (up to 4 modes maximum in professional accounts and 40 in enterprise accounts in 2023) and create strings (text) for each of the elements your product uses.

We recommend that you split your strings into groups (and sub-groups) such as shared, splash, landing or other names that correctly express where they are meant to be used (i.e. contact page).

Please note that it is recommended that you use Camel Casing (ideal), Kebab Casing, Snake Casing or Pascal Casing to allow the your design system to translate directly into code.

Step Three: Apply the Variables

A screenshot of Figma showing how we set a text variable to a text element.

Apply the strings across all the screens and components within the design file.

Step Four: Display the Designs

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.

See the designs in multiple languages by either:

Setting the default Language Manager mode for an entire page within a design file to the relevant language.
Creating sections for each language, and setting each section to the relevant mode.

As demonstrated you can create sections that adapt to multiple modes within multiple collections (i.e. English in Dark Mode, English in Light Mode).

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.

Why can't I apply a string (i.e. text) variable to a component ?

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 linked below.

How can I link 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.

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

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 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.