Figma Integration

Figma plugin

Make your Figma designs localization-ready from day one with our Figma plugin. Easily push design texts from Figma to Localizely for translation. Once translation is complete, pull translated texts back into Figma to preview localized designs and spot potential design or translation issues. Early issue detection saves time and reduces rework in later development stages. Keep designers, translators, and developers aligned throughout the development process.

With our Figma plugin, you can:

In this article

Install the plugin

Open your Figma project and go to Menu > Plugins > Manage plugins...:

Type "Localizely" into the search box, then select it from the results to view more details:

On the plugin details page, click the Run button to launch the plugin:

The plugin is now running! You're ready to connect it with your Localizely project.

Connect Figma with Localizely

In the plugin, click Get API token from Localizely. You'll be redirected to Localizely, where you can copy your API token.
If you don't have a Localizely account yet, click Sign up for a free trial to create one.

On Localizely, on the My profile page, click the button to copy your API token.

Back in the plugin, paste the token into the designated input field and click Log in.

After logging in, complete the project setup. Select your Localizely project, branch (if applicable), and the default language for your design. For the string key naming pattern, choose the option that best fits your workflow, the plugin will use it to auto-generate string keys when needed. Enable sync text formatting to preserve bold, italic, and bold-italic styling during translation.

When you're finished, click Finish setup.

How to use the plugin

Prepare your design content

Whenever you select design elements in Figma, the text elements within your selection will appear in the plugin table. This allows you to easily assign the right translation key names to your text elements in Figma.

In the plugin, you can easily see if a selected text element does not yet have an assigned string key. When you click the input to assign a string key to the text, the plugin will automatically suggest one if it already exists in your Localizely project.

If the string key is not found in your Localizely project, you can enter it manually. When you push the texts to Localizely, the plugin will create this string key in your project.

If you need to assign many string keys at once, you can use the auto-generation feature. This relies on the string key naming pattern defined during the project setup step and can save you time. You can auto-generate string keys individually for each selected text element or run bulk auto-generation.

Push content from Figma to Localizely

Make sure you are in the Push texts to Localizely tab and have selected the relevant texts you want to push. Then, click the Next button to specify the appropriate push configuration.

You can then select the project from the list of projects you have access to, choose the branch (if you are using our branching feature), and select the language. Optionally, you can enter a custom tag that will be added to the newly created string keys in this push.

There are also three checkboxes available:

Send your content to Localizely with the push of a button. Translators can then start their work in Localizely right away.

Translate

Translate your new texts in Localizely translaton editor.

Pull translations from Localizely to Figma

Once translations for your design texts are ready, simply select the Figma layers or frames you want to pull translations for, and switch to the Pull translations from Localizely tab in the plugin.

Click Next to choose how you want to pull the translations.

You have two options:

If you choose to override text layers with translations, your text layers will be updated on the current Figma page.

If you choose to create a new page for your translations, a new page will be created alongside your existing Figma pages. In this example, a copy of your page with German translations is created.

During localization, it's common for text to contain placeholders, dynamic values that are injected programmatically. These placeholders are often used for variables such as names, formatted dates and times, numbers, plurals, and more. To ensure your design previews look polished and realistic, the Localizely plugin for Figma allows you to easily replace placeholder syntax with sample values for preview purposes.

Below, you can see how the design text 'follow {name}' appears when the placeholder is replaced with the text 'Jane'.

Frequently Asked Questions (FAQ)

How Localizely plugin for Figma handles text elements with missing fonts?

Localizely plugin for Figma will skip the update of text elements with missing fonts. To be able to update such text elements, you will need to fix missing fonts first.

How Localizely plugin for Figma handles the text elements with fonts that do not support the specific languages?

In some cases, text elements can have fonts that do not support specific languages like Arabic, Hebrew, Chinese, Japanese, Korean, and similar. In such cases, the updated text elements can be invisible in design due to font mismatch. To fix invisible text elements in the design, you will need to set the appropriate font for such elements.

How can I propose new feature in the Localizely plugin for Figma?

We're always keen to hear how we can improve existing solutions. Feel free to contact us.