Figma

Exchange translations and screenshots between Figma and Lokalise

Ilya Krukowski avatar
Written by Ilya Krukowski
Updated over a week ago

This feature is available from the Pro plan and above.

Lokalise plugin for Figma enables you to:

  • Export texts from Figma to Lokalise.

  • Set key names (or use any of the patterns for automatic naming).

  • Create new keys and screenshots in Lokalise.

  • Match Figma texts to existing Lokalise keys.

  • Import translated texts from Lokalise to Figma.

  • Seamlessly switch Figma design language.

  • Share key names with developers.

  • Share translated designs with your marketing team.

Migrating from the previous versions

In January 2022 we released a big performance improvement for the plugin which allows importing, exporting, and even duplicate creation to run much faster. But to take advantage of this update you have to perform data migration.

When the Lokalise plugin is updated, you'll see a popup message with the Migrate button. You can start, pause, or cancel migration anytime: it won't affect your current projects until the migration is completed.

Here are some details about the migration:

  • This process might take some time depending on the number of elements in your project. However, you can pause this process anytime and continue working on your project. Next time you open the plugin the process can be resumed.

  • You won't be able to create page duplicates while the migration is running.

  • After the migration process is completed, old page duplicates will become inactive and you won't be able to update them.

  • Project settings won't be affected.

  • All linked / unlinked keys and translations won't be affected and you don't need to export/import them again.

Frequently asked questions

Where can I find best practices and recommendations?

Sure! Please find export options recommended practices below. You can also check out Design-stage localization videos in our DevHub.

I'm trying to perform a push/pull operation but my translations are not updated on Figma! What should I do?

The most common case is missing fonts. Specifically, if a Figma file utilizes a font that is not available on your local PC, you might run into issues with pushing and pulling. The solution is to make sure you have all the necessary fonts locally available.

Is there a read-only mode? Can a user without the editor Figma access use this plugin?

Unfortunately, no. Plugins are not supported in view-only mode by Figma design. Therefore, you must have a proper seat with editor access.

Can I change the key names individually?
Yes, you can if the key is not yet created in Lokalise. To achieve that, simply adjust the key names before exporting to Lokalise. 

Can I link the text elements from Figma to already created keys in Lokalise?
Yes, you can choose the existing keys to link your text elements to. This can be done manually or by enabling Auto-link existing translations before exporting elements. Please note that the latter will not work if the text elements and the existing keys have different contents (in this case manual linking is your only option). 

Can I update the screenshots inside Lokalise if I changed my designs?
Yes, simply export the updated designs and tick the Update screenshots option.

Can I link multiple screenshots (e.g. from different languages) to one key in Lokalise?
No, it’s not possible.

How can I preview translated strings in my design?
You can import translations back from Lokalise and switch to the desired language in Figma to preview the translations.

How can I choose not to export particular text elements to Lokalise?
You can either make a selection of what you want to export or you can hide unnecessary elements from Figma designs.

I have chosen a key naming pattern. Is it possible to modify the key names?
Yes, but if the keys already exist in Lokalise, then you will need to adjust their names manually.

Do you support projects with branching enabled?
Yes! Check the Branching section below for more information.

Do you support projects with custom translation statuses enabled?
Yes! Check the Exporting Figma strings to Lokalise project section below for more information.

Do you support projects with segmentation enabled?

No, segmented projects are not supported at the moment.

Do you support Lokalise projects with per-platform key names?
Yes, now this feature is supported as well!

What about support for right-to-left languages?

While Lokalise fully supports RTL languages, unfortunately Figma still has issues with those. Using certain fonts like Tajawal or Lateef helps some users, however these fonts work only for Arabic texts — not for Hebrew and Persian. Alternatively, you can try using third-party plugins supporting RTL languages but such plugins usually do not play nicely with exporting/importing to/from Lokalise. Currently we are investigating potential solutions to this issue.

Do you support Figma components?

Yes, but the support is limited due to technical issues. For example, if the whole frame is converted to a component, Lokalise will be unable to create a screenshot for it, however text synchronization will still work.

What is an artboard and a group? How does it affect the key naming patterns?

Any Figma frame that is closest (not top-most!) to a group/element will be taken as an "artboard". Artboard is not the name of your Figma file. Take a look at this example:

my_frame is basically an artboard, whereas my_group is the actual group nested in it. So, if you choose an artboard.group.element_name key naming pattern, your keys will have the following names: my_frame.my_group.another_text and my_frame.my_group.test_text.

If a text "Welcome" is placed into a frame named child and this frame is also a part of the frame parent, then the parent will be effectively ignored when constructing the element name. For instance, if your key naming pattern is artboard.element_name then the key will be named child.welcome.

To summarize, currently our plugin supports two levels of nesting: the artboard (aka the frame) and the group. You can say that an artboard is the next frame up in the hierarchy, whereas a group lives between the artboard and the actual text.

Install the plugin

Go to your Figma project and open Menu > Plugins > Find more plugins:

Type "lokalise" in the search box, find the plugin in the list, and click Run:

Launch the plugin

Step 1. Open your Figma project.

Step 2. Go to the Menu > Plugins > Lokalise:

Step 3. Connect your Lokalise account:

Step 4. Allow Figma to access your Lokalise workspace:

Step 5. Go back to Figma and select one of your existing Lokalise projects or create a new one.

Keep in mind that one Figma file can be synced only with one project. If you disconnect the project, all keys will be unlinked automatically. It means you can't link one file to many projects, but several files can be linked to the same project.

Please note that if you are selecting an existing project, the Figma design language dropdown will only contain languages your project actually has.

Then set the default platform for the newly created keys (this applies to the key names this Figma plugin will generate for Lokalise). If your project has branching enabled, also choose a branch to use. Finally, you can enable Sync text formatting. If this option is enabled and the text contains words with additional styling, the plugin will synchronize it properly. For example, if you have a text "Welcome to the app" (note that the word "app" is bold), the corresponding translation value on Lokalise will be Welcome to the <b>app</b>.

You can also set the default key naming pattern (you can choose Do not generate name but in this case you'll have to provide all key names manually). Alternatively, provide a custom key naming pattern.

Note on custom key naming pattern

To use variables in the pattern, prefix them with [%. You can enter any text for the pattern use the following objects:

  • Element name

    • [%Element_name] — starts with capital letter and _ used as delimiter

    • [%element_name] — starts with lowercase letter and _ used as delimiter

    • [%ElementName] — camel case

    • [%Element name] — the name will be the same as in the design

  • Page name

    • [%Page_name]

    • [%page_name]

    • [%PageName]

    • [%Page name]

  • Artboard name

    • [%Artboard_name]

    • [%artboard_name]

    • [%ArtboardName]

    • [%Artboard name]

  • Group name

    • [%Group_name]

    • [%group_name]

    • [%GroupName]

    • [%Group name]

  • Element text

    • [%Element_text]

    • [%element_text]

    • [%ElementText]

    • [%Element text]

Step 6. Click Finish Setup.

Now the setup is complete and you will see the following dialog box:

Start using the plugin by exporting all your Figma strings to the Lokalise project so translators can start working on them right away.

To adjust plugin settings or disconnect it from the given project, press on the Cog icon:

If you add a new page to the Figma project, you can select a new language and the platform for the newly created keys for this page. So, you can change the default language and selected platform in the project setup form for the new page.

How to use the plugin

The main steps of the translation process are shown in the following diagram:

Exporting Figma strings to Lokalise project

Click the Export all button if you want to export all text elements to Lokalise. If you want to export just several text elements, select them while holding the Shift key and click Export. Please note that we will automatically generate key names according to the naming pattern you've picked earlier, however you can easily modify the key names on a per-item basis.

Note that for each key it is possible to set a Character limit, and Lokalise will respect this setting (in other words, it will not be possible to enter a translation that goes over this limit). To set character limit click the Settings icon next to the selected element:

Export options

Check the required settings and click Proceed:

  • Update screenshots (create if none) — if checked, screenshots in Lokalise will be created or updated with the new ones.

  • Auto-link existing translations — if checked, strings in Figma will be matched to the already existing translations in the Lokalise project. Please note that in order for this feature to work, your existing keys should have the same platform (Web, Android, iOS, or Other) as the one chosen in Figma.

  • Create missing keys — if checked, all missing keys will be created in the Lokalise project.

    • Merge duplicates — if checked, duplicate texts in Figma will be matched to a single Lokalise key.

    • Add tags — if checked, you can add tags (comma separated), that will be assigned to the created Lokalise keys.

  • Update linked translations in Lokalise — if checked, all already linked keys in Lokalise will be updated with the modified texts from Figma.

  • Apply custom translation status (New translations) — this option will be available only if your Lokalise project has custom translation statuses (CTS) enabled. Please note that CTS is available only starting from the Pro plan and above. When this option is checked, you may select custom translation statuses (one or more, depending on whether multiple CTS are permitted in your project) to add to newly created translations.

  • Apply custom translation status (Update translations) — this option will be available only if CTS is enabled for your Lokalise project. When checked, you may choose custom translation statuses to add to the updated translations.

  • Assign filename per platform — use this option to assign newly created keys to filenames on Lokalise on a per-platform basis. You can either choose existing filenames that were already added on Lokalise or enter new ones.

Check the result of the operation:

Now you can go to the Lokalise project by clicking Open Lokalise and perform the actual translations. To learn more about the translation process, please check the Project editor and Translation editor articles.

Export options recommended practices

We've prepared some guidelines on what export options should be enabled depending on your setup.

I don’t have any translation keys in the Lokalise project...

Enable:

  • Create missing keys to add all the chosen text elements as new keys

  • Update screenshots to create screenshots with highlighted texts for each key

...and I also have identical text elements in Figma

Additionally enable:

  • Merge duplicates to create a single translation keys for all duplicating texts


I already have some keys in Lokalise, but I also want to create missing ones


Enable:

  • Auto-link existing translations to match texts in Figma with existing translations in Lokalise

  • Create missing keys to add new keys in Lokalise

  • Merge duplicates if you have elements with the same text in Figma and want to link them to a single new key in Lokalise.


I have some translation keys in Lokalise and need to link them to texts in Figma. I don't want to create new keys or update the existing translations

Enable:

  • Auto-link existing translations

  • Update screenshots to create screenshots with highlighted texts for each key

Filtering

You can include or exclude hidden or untranslatable elements by clicking the Filter icon and selecting one of the options:

Untranslatable elements generally means numbers, numbers with special characters, and elements containing a single letter.

Linking keys

If there is any existing content in your project (i.e. the developers have already started working on the project), the Lokalise plugin can link text elements to the existing keys. There is an automatic Export option that would use the textual value and match it with an existing Lokalise translation. 

You can also link text elements to the translation keys manually by clicking the Key icon and typing any text in the Lokalise search box. If there is a matching translation in Lokalise you will be able to link it to the Figma text element.

Please note that linking works correctly only if your existing keys have the same platform (Web, Android, iOS, or Other) as the one chosen in Figma.

Screenshots

In the Lokalise project you can add screenshots and select an area on screenshots for each key. If the Update screenshots option is enabled in the export settings, screenshots in Lokalise will be created or updated automatically.

Note, however, that in order to generate screenshots, you need to group your elements into frames in Figma. Frames can be created using Region Tools:

Please be aware that Lokalise plugin can also generate screenshots from auto layout frames.

After selecting the tool, simply draw your frame and include all necessary elements:

Make sure these elements were actually placed into the frame by accessing the Layers menu to the left:

For each frame a separate screenshot will be created on Lokalise. If you export only a handful of selected elements to Lokalise, then the screenshots will not be created for the frames that were not chosen.

After the screenshots were generated, you may adjust them as necessary on Lokalise:

  1. Go to the screenshot section of your project and open the automatically created screenshot. All created keys will be matched to the text blocks in the screenshot.

  2. Select a key name. The corresponding text area will be highlighted in the screenshot.

Also, you can edit or remove area coordinates of the by pressing the corresponding button.

Technical limitations

  • Lokalise plugin won't be able to generate any screenshots if the parent frame exceeds the size of 16,000 x 16,000 pixels.

Importing Lokalise translations to Figma

Once the required translations are added in Lokalise, you can import them to Figma. Select a language and click Import all if you want to import all keys from the Lokalise project.

If you want to import just several text elements, select them and click Import.

Changing the design language

You can change the language dropdown in the Lokalise plugin. That will replace all texts in Figma using the according translated values from the Lokalise project. There are cases when you may want to switch the design language without fetching the translations. To do that, click the settings icon and switch the language there. Keep in mind, if you decide to export the translations after switching the language in settings the plugin will overwrite the selected language translations with current Figma values.

Plural keys support

Our Figma plugin supports plural keys as well. To make your key plural, simply click on the +plural text next to its name:

Note that on the screenshot above the text contains a universal placeholder [%i] which means "integer". This is a recommended practice because when exporting your translation files, these universal placeholders will be replaced with the platform-specific ones.

Once a key was marked as plural and exported to Lokalise, you'll see a dropdown with all the plural forms for the currently chosen language (English in the case):

If you switch the language, the plural forms will be updated accordingly. You can modify the plural forms for a language by adjusting its language settings as described in the corresponding article.

Creating pages duplicates

It is possible to create page duplicates based on your current design:

  • Duplicate with key names — all your text elements will be replaced with the corresponding key names. This is very useful for developers so that they can see where each translation key is being used.

    • If you rename the key on Lokalise, and then update the page duplicate on Figma, the new key name will be properly displayed.

    • Please note that the above scenario won't work if after creating a page duplicate you've unlinked an existing key on Figma and then linked it to another element. In this case, if you update this key name on Lokalise, it won't be shown on the page duplicate due to technical limitations.

  • Duplicate with translations — all text elements will be replaced with their translations in the chosen language.

To achieve that, click Create a copy:

Next, choose the type of duplicate you would like to create:

Once you are ready, click Proceed.

After that you will see a new Figma page similar to this one:

In the example above all text elements contain the corresponding key names. To switch between pages, use a dropdown in the top left corner:

When viewing the duplicate, you can press Update page to update page elements:

Please note that the Update page button on duplicated pages updates only existing elements. To update the whole page and add new elements you should click the Update page from the initial page. To achieve that, make sure that the original page is active and then in the plugin click Create a copy. Select Update existing page in the dropdown and then select the Page to update and adjust the Update settings:

Prototypes

Our Figma plugin supports carrying the “prototype” actions to copied versions of your designs when using the Duplicate feature.

  1. In the master version of your design, click on the Prototype tab (located in the top right of the screenshot).

  2. Add a connection by dragging it from one element to the next one.

  3. Create a page duplicate — the prototype will be available there as well.

Placeholders support

It is possible to add custom values for each placeholder in your design. It is also possible to create a page duplicate with placeholders replaced by some values.

Please note, that only the following universal placeholders are supported:

  • [%s], [%1$s], [%s:name] – string.

  • [%i], [%1$i], [%i:name] – integer.

  • [%f], [%.2f], [%1$.2f], [%.2f:name] – float.

To add values for placeholders, follow these steps:

  • Create a new translation key with a placeholder or import it from Lokalise. Please note, that if you want to use one custom value for all translations, you should import all translations and then add values for placeholders. Otherwise, you need to enter values for each language separately.

  • Placeholders should be detected by the plugin.

  • Click the Settings button and add values for each placeholder:

  • Create a new page duplicate. All added values will be displayed on this page duplicate. Also, custom values can be updated directly on the created duplicate page. Changes will be applied only for this duplicated page and will not affect the initial or other duplicated pages.

Branching

Our Figma plugin also supports projects with branching enabled. After a choosing an existing project you will see a Select project branch dropdown:

Please note that this dropdown will not appear if your project has only one branch.

Export and import operations will now be performed using the chosen branch. If you would like to choose a different branch, proceed to plugin settings, disconnect the current project, and then re-connect again with a new branch selected.

Formatted text and tags

If a part of the text in Figma is marked as bold, italic, or underline, Lokalise will detect this automatically and display the corresponding tags in the editor.

Take a look at the following example:

"Welcome to Lokalise" is a single element but part of this text is marked as bold. After exporting this element to Lokalise, you will see the following:

"Lokalise" is wrapped into the b tag. To see the actual tag, disable the Display placeholders as blocks setting:

Please note that if the whole sentence on Figma is marked as bold, italic, or underline, Lokalise will not display the corresponding tags.

Did this answer your question?