-
Advanced and Enterprise plan (Legacy)
Get in touch with Sales for licensing questions.
Tip
For information about Figma integration in Phrase TMS, refer to Figma (TMS).
The Figma plugin allows design content to be integrated with Phrase projects, bridging the gap between product design and localization teams. The plugin supports content pushing, pulling translations, and managing keys between Figma and Phrase Strings.
-
Branching is supported.
-
Access to at least one project and one language with Translator user rights is required. Access can be granted by having an invitation sent by an Administrator or Project manager.
-
The plugin will send screenshots of auto-layout frames that are not child elements.
-
By default, hidden text layers are not included in the integration. This can be changed in the settings
by selecting .
-
Any changes made to the default settings
To run the plugin, select it from inside Figma's plugin browser or from the Figma Community and click Try it out. The plugin will become available in the Figma menu.
The connection from Figma to Phrase can be made with either providing Phrase credentials or an access token.
When the connection is made, selecting a frame loads a preview of the Figma content and keys that users can push to or pull from Phrase Strings.
The tab will allow connecting Figma layers to keys already existing in a Strings project. If the naming convention is the same for both the layers and the keys, they can be automatically matched.
The plugin is accessible through dedicated buttons in the Figma sidebar:
-
Phrase Strings
Click to open the plugin.
-
View text in Strings
Displayed in Figma files connected to a Strings project. Click to open the relevant project in the translation editor.
The tab allows sending frames or text layers from Figma to Phrase Strings for localization.
Select the project, branch (if being used), and language for the content being pushed. Optionally, enter a custom tag to add to the uploaded keys.
Click the menu to toggle on and off the following push options as required:
-
Upload screenshots is enabled by default. It allows attaching a screenshot of the selected layers within the frame:
-
If the setting is enabled, hidden text layers imported with the Figma plugin will have a marker placed in the top left corner of the screenshot.
-
When the setting is enabled, screenshots of Figma sections will not be created.
It is recommended to keep this option enabled in case of performance issues with the plugin while working inside sections.
-
-
Update content in Phrase Strings is enabled by default.
-
Update key names in Phrase Strings is enabled by default, unless the setting is disabled.
Toggling this option off resets all key name inputs.
The Push to Phrase button is disabled if key name inputs are empty, contain invalid characters, and are not unique. Select the setting to edit key name inputs and resolve any naming conflicts.
If there are disconnected layers with conflicting key names, select one of the available resolution options to proceed:
-
Creates new keys with
-copysuffix. -
Links layers to existing Phrase keys.
-
Pushes non-conflicting layers only.
The section of the plugin settings allows setting up the naming convention for connected keys.
To customize key names in Figma, follow these steps:
-
Click Enable smart key naming from the settings.
-
Select .
Note
If is enabled, key names are automatically generated based on text layer names.
-
In the field, enter text to define custom key naming:
-
Optionally, click Available macros to select one of the supported macros to generate key names automatically.
Multiple macros can be selected to compose the key name.
-
It is possible to combine free text and macros in the field.
Click Examples to display and choose one of the predefined examples.
-
-
If required, select a formatting option from the dropdown to modify text accordingly and remove spaces.
When pushing content to Phrase Strings, click the refresh icon to ensure the newly created naming convention is also applied to previously connected keys.
Available macros
|
Macro |
Description |
|---|---|
|
{file_name} |
The name of the Figma file |
|
{page} |
The Figma page where the key is identified |
|
{parent_section} |
The highest level section in the page tree |
|
{nearest_section} |
The section closest to the text layer in the page tree |
|
{frame} |
The frame where the key is identified |
|
{parent_group} |
The highest level group in the page tree |
|
{nearest_group} |
The group closest to the text layer in the page tree |
|
{component} |
The name of the Figma component where the key is located. Only source components are considered. |
|
{element_name} |
The name of the text layer |
|
{element_content} |
The content from the text layer |
|
{random} |
A randomly generated unique short hash |
When pushing content, users can connect layers to existing keys in Phrase Strings or generate new ones.
Select the tab to display an overview of connected and disconnected keys.
Keys that are already connected are identified with a link icon in the column. If necessary, select the project, branch (if being used) and language, or click the search icon to find the desired content.
Select Connect keys to bulk connect all unlinked keys in the tab. To connect or disconnect individual keys, click the relevant icon at the right of the corresponding entry.
Note
The option to disconnect individual keys is also available in the tab.
Once the translations are complete, select the Figma layers or frames to pull translations for and click on the tab.
Users can select the project, branch (if being used), and language for the content being pulled. Tags cannot be pulled back to Figma.
Click the menu to choose how to display pulled content in Figma:
-
Selected by default.
-
The selected text layers will be overridden with the translations and updated in the viewport.