The Smartling Figma Design plugin can translate text stored in Figma string variables, not just text on the canvas. The plugin submits the string variables in your Figma file to Smartling for translation, then writes the translated text back into your Figma variables as modes, one per language by default.

What gets translated

Figma variables are named values, such as text, colors, or numbers, that you can reuse across a design. Figma groups them into collections, and each collection can have modes, which hold alternate values for the same variable. The Smartling Figma plugin uses modes to hold the translated text for each language.

• The plugin translates string variables only. Variables of other types, such as color or number, are not translated.
• Figma variables are not translated by default. You must turn on the setting first.

Before you begin

To translate Figma variables, the Smartling Figma plugin must be saved to your Figma account and connected to a Smartling project. For setup steps, see Set Up the Smartling Figma Plugin.

Enable Figma variables translation in the plugin

1. Open your Figma file and click Plugins > Smartling.
2. Select Smartling Account.
3. Open the Variables tab.

4. Select Include Figma variables (string type) for translation.

   

5. Adjust the other options on the tab as needed, then click Save.

For a description of every option on the Variables tab, including the "Skip" options and the one-mode-per-language setting, see Connect the Figma Plugin to Smartling.

Submit Figma variables for translation

After you enable the setting, Figma variables are submitted from the same screen as the rest of your file.

1. Open your Figma file and click Plugins > Smartling.
2. Select Submit Translations.

3. In the review screen, the Figma variables appear as their own page, separate from the pages of your file. Their strings are formatted the same way as the rest of your content.

   

4. Click Next, then continue the regular process of adding the content to a job or choosing instant translation.

Apply translated Figma variables

When translations are complete, you apply translated Figma variables from the Translation Status screen in the plugin. This is the same screen where you apply translated pages.

1. Open your Figma file and click Plugins > Smartling.

2. Open the Translation Status screen, then click Next.

   

3. Select the checkboxes next to one or more target languages, then click Apply Translations.

   

4. On the final screen, review the details of the process, then click Finish.

   

The plugin writes the translated strings into the corresponding Figma variables for the languages you selected.

How translated Figma variables are stored in modes

The plugin applies translated Figma variables as modes in the variable collection. What happens when you apply the same language more than once depends on the Apply translations to one mode per language, updating it on every apply setting on the Variables tab:

• Enabled (default): the first apply creates a mode for the language. Later applies update that same mode by overwriting the existing translated values, which keeps your variable collection tidy.
• Disabled: every time you apply translations, the plugin adds a new mode, so repeated applies for the same language create multiple modes.

With the default setting, the variable collection shows one mode for each language you applied.

View translated variables in your design

To see the translated text in your design, switch the variable mode for the frame that uses your variables to the mode for the language you want to view. The animation shows how.

Troubleshooting Figma variables translation

Why don't my Figma variables appear on the Submit Translations screen?

Check that Include Figma variables (string type) for translation is selected on the Variables tab and that you clicked Save. The plugin does not include variables until you enable this setting.

Why was a specific Figma variable not submitted for translation?

The plugin translates string variables only, so color, number, and other variable types are not included. A string variable can also be skipped by the "Skip" options on the Variables tab. By default, the plugin skips variables that are aliases of another variable, text from remote (library) variables, variables hidden from publishing, and variables with empty values. To change this, clear the matching option on the Variables tab. For details on each option, see Connect the Figma Plugin to Smartling.

Why is a new mode created each time I apply translations?

The Apply translations to one mode per language, updating it on every apply setting is turned off. When it is off, every apply adds a new mode. Turn the setting on so that each apply overwrites the existing translations with the latest ones.