Integrations

Figma (Strings)

Content is machine translated from English by Phrase Language AI.

Available for

  • All paid plans

Available for

  • 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).

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 Include hidden layers or frames in selection.

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 Plugins 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 Connect with existing keys 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.

Push Content

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. If the Include hidden layers or frames in selection option is enabled, hidden text layers imported with the Figma plugin will have a marker placed in the top left corner of the screenshot.

Content can be pushed in two ways:

  • Click Open in Phrase to open the content in the editor.

  • Click Create a job to be redirected to a translation job draft in the editor.

Pull Translations

Once the translations are complete, select the Figma layers or frames to pull translations for and click on the Pull translations to Figma tab.

Three columns are presented in the tab:

  • Content

    Selected Figma content.

  • Key name

    The name of the layer in Phrase.

  • Status

    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 now be created with the translated content or the selected text layers can be overridden with the translations and updated in the viewport.

Was this article helpful?

Sorry about that! In what way was it not helpful?

The article didn’t address my problem.
I couldn’t understand the article.
The feature doesn’t do what I need.
Other reason.

Note that feedback is provided anonymously so we aren't able to reply to questions.
If you'd like to ask a question, submit a request to our Support team.
Thank you for your feedback.