1. Help Center
  2. Plug-ins and integrations

Phrase Figma Integration

Learn how to install and use the Phrase Figma integration in order to start translating your Figma files in Phrase right away.

The Figma integration is available for Phrase Advanced and Enterprise plans. If you're currently on another plan but would like to use this feature, please get in touch with us or easily start a plan trial yourself.

Figma plugin

The Phrase Figma plugin allows you to send design content to your Phrase projects, directly from within Figma. Build a bridge between Product Design and Translation teams with our Figma integration. Create a more efficient process from end-to-end.

Install the plugin

You can find the Phrase Figma plugin in Figma's plugin browser.

Simply click install on the top right corner of the page. That's it.

Once installed, you can always access the plugin via the burger menu in the top left corner of Figma. It's right there among all your favorite plugins.


Connect Figma with Phrase

To get started, you have to connect Figma with Phrase. If you do not have access to Phrase yet, you need to be invited to an organization by someone with Admin or Project Manager user rights. If your company does not have an organization in Phrase yet, please start a free 14 days trial.

I already have access to Phrase:

  1. Make sure you have access to at least one project and one language
  2. Install the Phrase plugin in Figma
  3. Open your Figma file 
  4. Click the hamburger menu in the upper left corner of the Figma toolbar
  5. Hover over “Plugins” and select “Phrase”
  6. Simply type in your Phrase credentials and click on “Connect with Phrase”

I don’t have access to Phrase yet:

  1. Install the Phrase plugin in Figma
  2. Open your Figma file 
  3. Click the hamburger menu in the upper left corner of the Figma toolbar
  4. Hover over “Plugins” and select “Phrase”
  5. Click “Sign up for a free trial” on the bottom of the login view
  6. Once in Phrase, use the Demo project or create a new one 
  7. Make sure you have created at least one project and one language in Phrase
  8. Go back to Figma and type in your Phrase credentials and click on “Connect with Phrase”

Connect via Email

Simply type in your Phrase credentials and click on connect with Phrase.

Connect via access token

In case you can't access Phrase via Email, you can easily connect via a user-based access token. 

1. Click Get token from Phrase to be redirected to the Phrase access token page

2. In Phrase, click Generate Token

3. Go back to Figma, paste it in the input field and click Log in

Getting started

After you connected Figma with Phrase, you will be prompted with a micro onboarding. You can decide which software is supposed to be the source of truth for your copy.

This is going to be useful in the case of pushing unconnected content from Figma to Phrase when some of the keys you're pushing already exist in Phrase. When pushing, you will only have to let us know if the content source of truth is supposed to be either in Figma or in Phrase. We store this information in the settings, where you can change it anytime.

In this step, you can decide if you want your Figma layer names to be used as key names for Phrase automatically. This comes in handy if you name your Figma layers as key names already (which would make your developers be able to work in Figma, too!) and will save you the effort of assigning key names to every single layer. You can also change this one in the settings later at any time.

Now, if you click YES you can load a preview of existing keys in the Phrase project you select. You can easily connect Figma layers with existing keys in Phrase to start your new workflow with the integration.

Just select a Figma layer and click connect. As simple as that. This way you can immediately pull the translations from Phrase into Figma without the need of pushing them first.

Can’t find what you’re looking for? Use the search functionality in the top right to search either within translation content, or use the dropdown and switch to “Key” and search for a translation key by entering the exact translation key in the search box.

You can now start selecting the layers you want to send to your Phrase project.

Prepare your design content

Your selection will appear in the content-key-table, which allows you to properly assign the right translation key names to your layers. Make sure to stay in the Push content to Phrase tab if you wish to send content from Figma to Phrase. 

The integration will make you aware if a layer has not yet been assigned a key name or tell you if there are any duplicate key names.

In the Status column, the integration indicates whether a text layer has already been pushed to Phrase or if you are about to create a new key in Phrase.

Click Confirm in order to select the Phrase project you want to push to.

Push content from Figma to Phrase

Select from the list of projects you have access to and the respective languages you can push content to. Send it to Phrase with the push of a button. Translators can then start their work right away.

You can then select from the list of projects you have access to, select a branch (if you are using our branching feature) and enter a custom tag to add to the uploaded keys. Send it to Phrase with the push of a button. Translators can then start their work right away.

Screenshot 2021-04-07 at 16.21.53

If you're working both in Figma and Phrase, you have two choices at this point:

  1. Click Open in Phrase to open your latest upload directly in the Phrase Translation Editor
  2. Click Create a job in order to be redirected to a translation job draft directly in Phrase


Translate with the visual context of Frame screenshots

Give translators proper context with automatically attached screenshots. If you tick the box that says Upload screenshots before you push to Phrase, the plugin will also upload screenshots to Phrase for each of the selected layers that are within frames.

Our integration highlights exactly where each text element belongs. Increase your overall translation quality and reduce feedback loops.

Pull translations from Phrase to Figma

Once the translations for your copy are done, simply select the Figma layers or frames your want to pull translations for and click on the Pull translations to Figma tab in the integration. In this view you see three columns:

  1. Content is your selected Figma content
  2. Key name is the layer's key name in Phrase
  3. Status indicates whether translations for your selection in Phrase are ready for you to pull into Figma

What you see in the columns is dependent on the selection made at the bottom of this view. It works just like pushing content to Phrase:

  1. Select the Phrase project your selected Figma layers are in
  2. Select the language of the translations you would like to pull into Figma

If you see a green checkmark the plugin previews the available translation from Phrase in the language you selected.

Yellow clock means that for the language you selected, there are no translations ready yet in Phrase.

The grey sign indicates that this layer is not yet connected to Phrase, which means you would first need to push this layer to Phrase.

Select Confirm  in order to confirm the project and language(s) you want to pull from.

You have two options:

  1. Create a new page with translated content
  2. Override selected text layers with translations

This would be the opportunity to pull all available translations from all languages in the respective Phrase project. 

This option is available only for creating new Figma pages with translated content.

If your option was to create a new page for your translations, you see it right alongside all your Figma pages. In this example a copy of your page with German translations.

If you chose an override, your text layers are updated in the viewport you're currently working in.


Watch our Webinar on the Phrase Figma Integration right here.



Can I push to a specific Phrase branch?

Yes, Phrase's branching feature is supported by our Figma integration.


The integration lets me determine the source of truth for the copy. What does that setting do?

This setting is relevant for when you first connect your Figma layers and Phrase keys. According to this setting, the content in the application that is not the source of truth will be overwritten with the content from the applications that is set as the source of truth.


Is it possible to connect multiple Figma layers to the same the keys?

Yes, if you select multiple layers and click "connect"/"disconnect" in the Connect Figma layers with existing keys in Phrase dialog, all layers will be connected/disconnected with/from the corresponding key. The integration will let you know accordingly:

Screenshot 2020-07-16 at 09.36.14


Will there be more functionalities coming soon?

To receive a notification when new features are available, please leave your email address in the bottom field on our Figma page.


How do I work with hidden layers?

Out of convenience hidden text layers are not included in the integration. You can change this by going to the settings and checking the “Include hidden layers or frames in selection”


Why can I not see the text layer in the integration?

After hiding or showing a text layer you need to update the integration view by clicking the button with a refresh icon in the bottom right