How to adapt Designs to work with Multiple Languages in Figma

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

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

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.

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

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

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

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.

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.

We recommend you check out our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.