-
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. It is not possible to push content to a protected main branch.
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.
Empty or duplicated key names are flagged with a red counter in the column. To manage long lists of key names, use the dropdown to display or .
Note
The selected sorting option will be remembered for future sessions.
The Push to Phrase button is disabled if key name inputs are empty, contain invalid characters, are not unique if a protected main branch is selected.
Select the setting to edit key name inputs and resolve any naming conflicts. If needed, select the desired keys and click Exclude layers at the top of the table to remove those layers from the plugin.
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.
If layers are successfully pushed to Strings, the window is displayed with a summary and the following options:
-
Create job
Click to open the page with the pushed keys pre-selected.
-
Open in Strings
Click to view the pushed keys in the Strings Editor.
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, apply the newly created naming convention to previously connected keys by either:
-
Clicking the refresh
icon at the bottom of the table.
-
Selecting specific keys and clicking Regenerate key names at the top of the table.
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.
To manage long lists of key names, use the dropdown to display and address any potential issues. If needed, select specific keys and click Exclude layers at the top of the table to remove those layers from the plugin.
Note
The selected sorting option will be remembered for future sessions.
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.
-
Disabled by default. When enabled:
-
Key names are pulled and displayed instead of the translated content.
-
Selecting a language for the pulled content is no longer possible.
-
-
The setting will be remembered for future sessions.
-
If disabled, the column displays the content of the selected layers directly.
-
When enabled, the column displays a preview of the content in the selected language for connected layers.
-
For disconnected layers, enable the option to show a preview in the selected language. If a key with the same name exists in the pulled data, the content of that key is used as the preview.
-
-
-
Control how disconnected layers are handled when pulling data in Figma. The setting will be remembered for future sessions.
-
When enabled, the system checks if a key with the same name exists in the pulled data.
If a match is found:
-
Disconnected layers are connected to the matching keys.
-
The layers content is updated with the pulled content from existing keys.
-
-
If disabled, disconnected layers are not updated, even if matching keys exist in the pulled data.
-
If content is successfully pulled to Figma, the window is displayed with a summary of the updated layers.