-
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 .
-
By default, selected tags in the plugin are cleared after the push process. This can be changed in the settings
-
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.
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.
When the Upload Figma preview option is enabled, users can optionally select which target languages to include in the Figma preview. If no languages are selected, all languages are included by default.
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.
Important
If the Upload Figma preview option is enabled, a job is created automatically in Strings. Once enabled, this cannot be disabled.
-
Open in Strings
Click to view the pushed keys in the Strings Editor.
A yellow warning icon appears next to keys whose names have been changed in Strings after pushing content. To update key names in the Figma plugin, select Sync key name from the ellipsis
menu next to the mismatched key name.
Push options and actions
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.
-
Enable Upload Figma preview to export an HTML bundle from the selected keys.
This option is required to generate in-context preview in the TMS CAT editor when working with jobs synced from Strings.
Users can optionally select which target languages to include in the Figma preview when pushing content. If no languages are selected, all languages are included by default.
If the preview is generated successfully, a job is created automatically in Strings. Any active job automation in the Strings project will be skipped to avoid duplicate jobs.
If the preview exceeds the 10 MB limit, the keys are still pushed to Strings, but no job with a preview is created.
Note
To work with Figma previews in the Strings editor, use the Add Figma preview action in the contextual sidebar.
-
Enable Preserve content formatting & styling to keep rich text formatting (such as lists, line breaks, bold/italic, and links) when pushing content from Figma to Phrase and pulling translations back.
If enabled, HTML formatting tags are automatically added to preserve inline styling and are supported in the TMS in-context preview when working with jobs synced from Strings. The HTML formatting tags appear in the Strings editor and in exported translations pulled back into Figma.
Disable this option if rich formatting is unnecessary to avoid manual adjustments.
The setting applies at the file level and affects all collaborators working in the file. This option is remembered for new files.
For connected layers, the following actions are available in the relevant ellipsis menu:
-
Select View key details to view/edit the key description in Phrase Strings or set a character limit for the key. Any changes saved in the window will appear in the Strings editor sidebar after refreshing the editor page.
Tip
Select multiple keys in the tab and use the batch action Set character limit to set a character limit for all selected keys at once.
-
Select Open key in editor to navigate to the related key in the Strings editor.
-
Select Disconnect content from Phrase Strings to disconnect the layer from an existing key.
Manage duplicated content
When pushing content, layers with duplicated content will generate multiple keys in Strings containing exactly the same text. Users can decide how to manage this duplicated content in the window:
-
Select Proceed without merging if creating multiple keys with duplicated content is intentional.
-
To merge some duplicated content into a single key, follow these steps:
-
Select two or more keys from the list and click
Merge to a key...
A dropdown with available keys for merging is displayed.
-
Select the key to merge the duplicated content into.
The selected key is marked with a blue merge icon
in the window.
-
Click Proceed, then confirm by selecting Merge and Push in the popup.
The duplicated content is merged into a single key, and all associated layers are connected to that key.
-
-
To merge some or all duplicated content into the first key of the list, follow these steps:
-
Select multiple or all keys from the list and click
-
Click Proceed, then confirm by selecting Merge and Push in the popup.
The duplicated content is merged into a single key, and all associated layers are connected to that key.
This option is useful for large files with many duplicates, allowing users to merge all duplicates into the first key found in a single action, instead of handling each one individually.
-
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 the languages 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. When pulling for multiple languages, a separate Figma page is created for each selected language including all layers from the page.
Note
In Figma Buzz, the option is displayed.
-
Creates a single new page and places the selected translated content side by side into language-specific columns. This option focuses only on the active selection rather than duplicating the entire Figma page.
Recommended for large files to improve pull performance and reduce unnecessary file size.
-
The selected text layers will be overridden with the translations and updated in the viewport.
This option is automatically disabled when pulling for multiple languages.
-
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.
-
This option is automatically disabled when pulling for multiple languages.
-
-
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.
When pulling for multiple languages, the button opens the key with the project’s default language as the source language.
Figma Buzz is a tool where brand designers and marketing teams can create on-brand visual assets at scale, directly within the Figma ecosystem. It includes a system of templates, a simplified design editor, bulk creation of assets and AI powered editing.
The Phrase Strings plugin for Buzz allows localizing text content directly within Buzz by providing the same capabilities as in the Figma Design integration:
-
Push source text from Buzz designs to Strings
-
Pull translations back into Buzz
-
Manage keys and maintain text consistency across assets
Note
Live preview is not supported.
The plugin is available from the menu in Buzz. Once activated, it can be saved for future use and run on the selected design by opening it in a modal from the Figma Buzz sidebar. Text layers are automatically detected and displayed in the plugin.
Design content can then be pushed to a connected Strings project for translation. After translation, users can pull the localized content back into Buzz, which creates a new row containing the translated version of the design.