With the Smartling Figma Design plugin, you can translate Figma string variables, such as button labels, error messages, and other copy stored in your design system, in addition to the text layers in your design. Submit variables to Smartling, then apply the translations back into Figma as new modes on the same variable collection. Designers can then switch a frame to a language mode and see the translated copy.
Variable translation is off by default and is configured in the plugin's Variables tab. This article explains how to set up and translate variables. For standard setup, submitting text layers, and general plugin use, see Translating with the Figma Design plugin.
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, number, or boolean, are not translated.
Only collections defined in the current file are listed. A collection that contains no string variables is not shown.
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 Figma Design Plugin: Installation and Setup.
Also confirm the following:
Your file has local string variables. Library (remote) collections are not listed. Text from a library can only be reached through an alias, which is a variable whose value points to another variable instead of holding text itself.
You can edit variables in the file. Applying translations adds modes to your collections, which requires edit access.
Your Figma plan allows enough modes per collection. Each target language adds one mode, and your source modes count toward the limit, so a collection with many source modes and many languages can reach it. If it does, Figma's error message is shown for that language. Figma limits modes per collection by plan: Professional allows up to 10, Organization up to 20, and Enterprise allows unlimited modes with extended collections. The Starter plan does not include variable modes.
Recommended variable setup
We recommend that each variable collection you translate has one mode in your original (source) language, for example English. Submit that mode to Smartling, and Smartling delivers each translation into a new mode in the same collection, one per target language. Your source mode is never changed, and you can re-apply translations as many times as you need. If your collection already has several modes, such as "Light" and "Dark", all of them are treated as source text and submitted.
Enable Figma variables translation in the plugin
Open your Figma file and click Plugins > Smartling.
Select Smartling Account.
Open the Variables tab.
Select Include Figma variables (string type) for translation.
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.
Note: When you apply translations, the plugin uses your current settings to rebuild the list of strings that was submitted. Avoid changing the skip settings between submitting and applying translations.
Submit Figma variables for translation
After you enable the setting, Figma variables are submitted from the same screen as the rest of your file.
Open your Figma file and click Plugins > Smartling.
Select Submit Translations.
In the review screen, each collection that contains string variables appears as its own entry named Variables-[collection name], separate from the pages of your file. Variable entries are not selected by default. Select the collections you want to translate, along with any pages.
Click Next. The plugin collects the strings. Each collection is processed separately from page text, with progress shown for each.
Click Next, then continue the regular process of adding the content to a job or choosing instant translation.
How variable strings are submitted
Every source mode of a collection is submitted.
Identical text is sent once, even if several variables or modes use it, so it is translated once.
Variable strings are sent without visual context, because variables are not drawn on the canvas.
Variables are not included when you use Submit selection. Submit the whole file or page instead.
Messages you may see
Message | Meaning and what to do |
No translatable strings in: Variables-[name]. Check the Variables settings. | Nothing in that collection passed your skip settings. Review the Variables tab. |
[N] aliased variable value(s) were skipped because they are broken, cyclic or from a library. | Alias skipping is off, but some aliases could not be resolved to text. Fix or remove those aliases in Figma if the text should be translated. |
Variable collections are not included when submitting a selection, so they were skipped. | Variables cannot be sent with Submit selection. Submit the file or page instead. |
Could not collect Figma variables: [reason] | The collection step failed and nothing is submitted. Go back and try again. |
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.
Open your Figma file and click Plugins > Smartling.
Open the Translation Status screen, then click Next.
Select the Variables-[collection name] entry and the checkboxes next to one or more target languages, then click Apply Translations.
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
For each selected language, the plugin writes the translated text into a language mode of the collection, named after the language, for example German (Germany) (de-DE). Your source modes are never changed. If a variable has no translation, or its text was changed after submission, it keeps its source text in the language mode.
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. Use this if you apply translations as they are completed or re-apply after corrections.
Disabled: every time you apply translations, a new mode is added, named German (Germany) (de-DE), then German (Germany) (de-DE) 2, and so on. Use this only if you want to keep each version of the translations.
With the default setting, the variable collection shows one mode for each language you applied.
Considerations when applying translations
If a mode with the same name already exists and was not created by the plugin, translations are not applied to that collection, and the existing mode's values are not overwritten. To apply translations, rename the mode in Figma and select Apply Translations again.
If an apply is cancelled or fails before any translation is written, the empty mode is removed.
The plugin remembers the modes it adds, so it never mistakes them for source text the next time you submit.
Translations for one language do not affect other languages. If one language fails, the others still apply, and the errors are listed on the status screen.
View translated variables in your design
To see the translated text in your design:
Select a frame or layer that uses the variables.
In the right panel, open Layout or Appearance, find Variable mode, and choose the language mode, for example French (France) (fr-FR).
The text bound to those variables now shows the translated copy. The animation shows how.
To preview several languages side by side, duplicate the frame and set a different variable mode on each copy. Text layers that are not bound to variables are translated separately, using the standard page translation flow.
Troubleshooting Figma variables translation
Figma variables do not 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. The collection must also be defined in the current file and contain at least one string variable. Library collections are not listed. Reopen the plugin after changing settings.
A specific Figma variable was 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.
A collection is listed, but I get "No translatable strings."
All of its values were skipped by your settings. Its values may be aliases, hidden from publishing, or empty. Review the skip options on the Variables tab in the plugin settings.
Variables were skipped because I submitted a selection
Variables are only included when you submit a file or page, not a selection.
Some variables were not translated after apply
If a variable's text was edited after submission, or you changed the skip settings, the plugin cannot match it to a translation and leaves the source text in the language mode. Submit the updated text again.
Apply fails with "already has a mode named..."
The collection has a mode with the same name as the language mode, and the plugin did not create it. Rename your mode, or deselect Apply translations to one mode per language, updating it on every apply in the plugin settings so the plugin adds a numbered mode.
Apply fails when adding the mode
Your Figma plan limits the number of modes per collection. Remove modes you no longer need, or ask your Figma admin about your plan.
A new mode is 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. To clean up, delete the extra modes in Figma.
