1. Help Center
  2. Plug-ins and integrations

Phrase Figma Plugin

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

The Figma Plugin is available for Phrase Lite, Pro and Exclusive 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 your organization's account by someone with Admin or Project Manager user rights. If your organization does not have a Phrase account yet, please start a free 14 days trial.

I already have a Phrase account:

  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 account credentials and click on “Connect with Phrase”

I don’t have a Phrase account 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 account credentials and click on “Connect with Phrase”

Connect via Email

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

Connect via Access token

In case you can't access Phrase via Email, easily connect to your account 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

Alter 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 your select. You can easily connect Figma layers with existing keys in Phrase to start your new workflow with the plugin.

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.

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 plugin 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 plugin indicates whether a text layer has already been pushed to Phrase or if you are about to create a new key in Phrase.

Click To pushing confirmation 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 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.

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 of the frames you have selected layers are on to Phrase.

Our plugin 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 plugin. 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 To pulling confirmation 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 Plugin right here.

 

FAQs

The plugin 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 plugin 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.