Figma (TMS)

Content is machine translated from English by Phrase Language AI.

Available for

Team, Business and Enterprise plans

Get in touch with Sales for licensing questions.

Available for

Ultimate and Enterprise plans (Legacy)

Get in touch with Sales for licensing questions.

Tip

For information about Figma integration in Phrase Strings, refer to Figma (Strings).

Figma is a primarily web-based vector graphics editor and prototyping tool with additional offline features enabled by desktop applications for macOS and Windows.

Installation

To install the Figma plugin, follow these steps:

In Figma, go to Community and select Plugins.
Enter Phrase in the search field.
Click Try it out.

The plugin is now available under the Plugin menu in Figma.

Connect to Phrase

The plugin must first be connected to Phrase before use.

From Figma, select the Plugins menu.

The Plugins menu opens.
Select Phrase from the menu and click Connect to Phrase.

The Log in to Phrase window opens.
Provide Username, Password and Hostname. User must have project manager or administrator roles.
Click Connect.

Figma is now connected via the plugin.

Note

Some browser extensions (e.g. Stylebot) can conflict with the plugin and prevent a connection. If having issues, run figma.com in an incognito browser, guest mode or with disabled conflicting extensions.

Usage

The plugin provides these functions:

Manage strings to translate

Collect all translatable text on a page and define key names.
Submit page for translation

When submitting a page for translation for the first time, create a new project from a template. Adding the page to an existing project will not update the translation for that project.

If an existing project is being updated, select that project. Submitting to a closed project reopens that project.

If creating a new project, select a project template and optionally a due date and apply settings. Select target languages from the project template before submitting the page.
Check translation status

Displays the status of a selected page.
Retrieve page translations

If the job status is Completed, pulls translated page from Phrase and changes the status to Delivered. If the job is in any other state, that state is maintained after the pull. Jobs set to Delivered cannot be retrieved from Figma and the message No completed translation jobs found in the corresponding Phrase project #{project_number} is returned. Reverting the status allows retrieving again.

Note

If strings are not visible on the translated pages (especially for non-Western languages), it is likely due to missing characters sets in the used font. Switch to a font that supports the given language.

Due to Figma limitations, only one font in a single target string is supported. If the source string contains multiple fonts, then the font of the first character will be used for the target string. Note that Figma treats bold and italics as different fonts from the regular character set.
Submit updated translations

The Choose project settings for updated translations window opens.

Two options are available:
- Update existing project:
  - If there was no update to source or target segments in Figma, then both source and target are populated in the job and the segment is confirmed.
  - If target was updated, but source wasn't, then the segment is populated but unconfirmed. If reviewed segments also require confirmation, add state=reviewed to Set segment confirmed when in the XLIFF 2.0 file filter configuration.
  - If the source changed, then the source is populated with the updated entry but target is empty.
  - The status of the updated job is changed to New.
- New project from template:
  - A new project is created with the settings of the current template and includes the update.
Pseudo-translate page

Set pseudo-translation options and view the results of pseudo-translated Figma pages. Pseudo-translate is available even when not connected to a Phrase account.

Note

Pseudo-translation into Asian and Arabic characters requires installing two fonts on the user's device: PingFang SC Regular for Asian and Arial Regular for Arabic.

Managing Strings

To manage strings, follow these steps:

From the Plugins menu, select Phrase, Manage strings to translate.

The Select strings to translate and assign key names window opens.

All strings on the page are presented, but clicking on a specific string or a design element filters the selection to that string or strings in that element. Click X to remove the filter.

Click Group duplicate entries if the same key is to be applied to all instances of a string.
Select strings for translation.
Define Key name for selected strings.

Default key names are automatically generated but can be manually changed and will then be listed under User-defined key names.

If a translation memory is provided, it can be searched for the existing strings and if there are assigned key names, they are available for selection in a dropdown list.
Define key Description.

To be displayed in the CAT preview pane giving translators further context for the translations.
Flag keys according to their stage in the design process.
Click Save.

Note

The job file sent to Phrase is in XLIFF format, which can be automatically detected but ideally defined in project settings and context type and set to Segment key.

Strings are sent to Phrase in the order in which the pages and other subcomponents are arranged in the left pane in Figma—from the top to the bottom.