Note
Due to continuous improvements, the user interface may not be exactly the same as presented in the video.
The plugin allows design content to be sent to projects from within Figma building a bridge between product design and translation teams. The plugin will send screenshots of auto-layout frames that are not child elements.
Branching is supported.
By default, hidden text layers are not included in the integration. This can be changed in the settings by selecting .
Access to at least one project and one language is required. Access can be granted by having an invitation sent by an Administrator or Project manager.
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, an onboarding process helps make the settings to the connector and at the end of the process, a preview of existing keys is loaded and these keys can be connected to layers in Figma.
The option to will connect 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.
Select from the list of projects, select a branch (if being used) and enter a custom tag to add to the uploaded keys.
Click Upload screenshots to attach a screenshot of the selected layers within the frame.
Content can be pushed in two ways:
Once the translations are complete, select the Figma layers or frames to pull translations for and click on the tab.
Three columns are presented in the tab:
-
Selected Figma content.
-
The name of the layer in Phrase.
-
Whether translations for the selection are ready to be pulled:
-
Green checkmark:
The translation is available for preview.
-
Yellow clock:
Translation is not prepared.
-
Grey:
Layer is not connected and needs to be pushed to Phrase.
-
A new page can be now be created with the translated content of the selected text layers can be overridden with the translations and updated in the viewport.