Skip to main content

Figma

Exchange translations and screenshots between Figma and Lokalise

Written by Ilya Krukowski
Updated over 2 weeks ago

This feature is available from the Growth plan and above. (There are certain limitations on the Growth plan, see the FAQ section to learn more)


We also offer a new plugin for Figma Buzz.

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.

Frequently asked questions

What limitation does this integration have on the Growth plan?

On the Growth plan, the following limitations apply:

  • Only one Lokalise project per team can have a Figma integration. Multiple Lokalise projects cannot each have this integration.

  • One Lokalise project can connect to one Figma file

  • Multiple Figma files cannot connect to the same Lokalise project (one installation per project and team)

    • If you're on the Growth plan and have an already connected Figma file to that 1 allowed project, then in other files you won’t see that project for selection.

Where can I find best practices and recommendations?

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

The most common cause is missing fonts. If your Figma file uses a font that is not installed on your computer, push/pull operations may fail or appear incomplete.

Make sure all fonts used in the Figma file are installed and available locally. Once the missing fonts are added, try the operation again.

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

No. Figma does not support plugins in view-only mode, so must have a proper seat with editor access.

Can I change the key names individually?
Yes, if the key has not yet been created in Lokalise. Adjust the key names in the plugin before exporting.

Can I link the text elements from Figma to already created keys in Lokalise?

Yes. You can link elements manually or enable Auto-link existing translations before exporting. Auto-linking will not work if the text content differs, so in that case you must link manually.

Can I update the screenshots inside Lokalise if I changed my designs?
Yes. Re-export your updated designs and enable the Update screenshots option.

Can I link multiple screenshots (e.g. from different languages) to one key in Lokalise?
No, this is not supported.

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

How can I avoid exporting certain text elements to Lokalise?

Select only the elements you want to export or hide elements in your Figma design before exporting.

I selected a key naming pattern. Can I modify key names afterward?

Yes. If the keys already exist in Lokalise, you’ll need to rename them 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 Lokalise projects with per-platform key names?
Yes, this feature is supported.

What about support for right-to-left languages?

Lokalise fully supports RTL languages, but Figma still has issues with them. Some users have partial success with fonts like Tajawal or Lateef, although those work only for Arabic, not for Hebrew or Persian. You can also try third-party RTL plugins, but they often do not integrate well with exporting and importing to or from Lokalise. This is a known limitation and we are investigating possible solutions.

Do you support Figma components?

Yes, with limitations. For example, if an entire frame is converted into a component, Lokalise will not be able to generate a screenshot from it, but text synchronization will still function normally.

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

The “artboard” is the closest frame above an element or group. It is not the file name and not necessarily the top-level frame. Here's an example:

  • my_frame — the closest frame, treated as the artboard

  • my_group — a group nested inside that frame

  • another_text, test_text — text elements inside the group

If your key naming pattern is artboard.group.element_name, your keys become:

  • my_frame.my_group.another_text

  • my_frame.my_group.test_text

If a text element “Welcome” is placed in a frame named child, and that frame is inside another frame named parent, then parent is ignored when constructing the key. With a pattern like artboard.element_name, the resulting key is: child.welcome.

The plugin supports two nesting levels: the artboard (the nearest frame) and the group. The artboard is the frame directly above the group, and the group sits between the artboard and the text element.

What happens to translation keys when design elements are duplicated?

Copying and pasting designs does not break key links. All translation keys remain linked in the following cases:

  • Copying and pasting Frames or Artboards

  • Duplicating an entire page

  • Copying elements or components to another page

In all these scenarios, translation links are preserved.


Install the plugin

To install and use this plugin, you’ll need a Figma seat with editor access. Plugins are not supported in Figma's view-only mode.

Also note that in some organizations, only approved Figma plugins can be installed.

Open Figma app, proceed to your project, and navigate to Menu > Plugins > Manage plugins:

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

Click on it and then press 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.

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

  • If needed, enable Sync text formatting. If this option is on 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>.

  • Set the default key naming pattern from the Select key naming pattern dropdown.

    • You can choose Do not generate name but in this case you'll need to provide every key name manually.

    • Alternatively, provide a custom key naming pattern in the text box below the dropdown. Learn more about custom naming patterns in the section below.

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 Settings 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.

Custom key naming patterns

To use variables in your pattern, prefix them with [%.You can mix variables with any additional text.


Available variables:

Element name

  • [%Element_name] — PascalCase with underscores

  • [%element_name] — lowercase with underscores

  • [%ElementName] — CamelCase

  • [%Element name] — uses the original name from 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]

Variable behavior and combination rules

Some variables can produce combined values when elements are nested, while others always return a single value. The table below summarizes how each variable behaves.

Variable

Behavior

Combination behavior

[%page_name]

Returns the name of the page

❌ Does not combine — always uses a single page name

[%artboard_name]

Returns the name of the closest frame/section

❌ Does not combine — only the first/closest artboard is used

[%group_name]

Returns all parent groups

Combines multiple groups into one dot-joined path (e.g. Main.Header.Button)

[%element_text] / [%element_name]

Returns the element's text or name

❌ No combination — only that element’s value is used

Notes

  • Only [%group_name] supports multi-level combination.

  • All other variables resolve to a single source (page, closest artboard, or element).

  • You can freely mix these variables inside custom naming patterns (e.g. [%PageName].[%group_name].[%ElementName]).


How to use the plugin

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

Exporting Figma strings to Lokalise project

To export all text elements to your Lokalise project, click Export all. If you want to export only specific elements, select them while holding Shift and click Export.

The plugin will automatically generate key names based on the naming pattern you previously selected. You can still change individual key names before exporting.

For each key, you can also set a character limit. Lokalise will enforce this limit when entering translations, meaning translators cannot exceed the specified number of characters. To set a character limit, click the Settings icon next to the selected element.

Export options

After clicking Export all or Export, adjust the export options:

  • 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 the result:

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 elements in Figma

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 your Lokalise project already contains translations (for example, developers have added keys earlier), the plugin can link text elements in Figma to those existing keys.
The automatic Export option attempts to match text elements to existing keys based on their textual value.

You can also link elements manually. Click the Key icon and type in the search field. If a matching translation exists in your Lokalise project, you can link it directly to the Figma text element.

Linking works correctly only when the existing keys use the same platform type (Web, Android, iOS, or Other) as the platform selected in Figma.

Screenshots

You can upload screenshots manually and select specific areas for each key. If Update screenshots is enabled in your export settings, screenshots will be created or updated automatically.

Preparing frames in Figma

To allow automatic screenshot generation, your design elements must be grouped into frames in Figma. Frames can be created via Region Tools:

The plugin can also generate screenshots from Auto Layout frames.

After selecting the tool, draw a frame and place all relevant elements inside it:

Make sure the elements were actually nested inside the frame. You can verify this in the Layers panel:

Each frame results in a separate screenshot on Lokalise. If you export only individual elements instead of selecting the whole frame, screenshots will NOT be created for frames you didn’t include.

Working with generated screenshots

After screenshots are generated, you can adjust them on Lokalise:

  1. Open your Lokalise project and navigate to the Screenshots page.

  2. Select an automatically created screenshot.

  3. Keys will be matched to text areas inside the screenshot.

  4. Click a key — its corresponding area is highlighted.

You can edit or remove area coordinates using the available controls.

How screenshots are generated

Screenshots are always created based on the top-level frame that contains the exported elements. This ensures translators can see the full design context, while still having precise coordinate markers for each text node.

What is not captured

  • Not a screenshot of the individual text node

  • Not a screenshot of only the parent groups or intermediate containers

What is captured

  • A screenshot of the entire top-level frame (for example, “Frame A”)

  • Each exported text element is shown through a coordinate marker placed at its exact position inside that frame

This behavior is intentional, providing a better UX for translators: they see the complete layout, visual hierarchy, spacing, and context — not just isolated text snippets — while still being able to locate each piece of text precisely.

Edge case: orphaned elements

If an element has no parent at all (a fully detached node), then the screenshot will consist only of that specific element. This is the only scenario where an element screenshots itself.

Screenshots technical limitations

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

Importing Lokalise translations to Figma

Once translations are available in your Lokalise project, you can import them into Figma. Select a language and click Import all to bring all keys into your design.

If you want to import only specific text elements, select them first and then click Import.

Changing the design language

You can change the language directly in the Lokalise plugin. This replaces all text elements in Figma with their translated values from Lokalise.

There are situations where you may want to switch the design language without fetching translations again. To do this, open the plugin settings and select the language there.


Be aware that if you export after changing the language in settings, the plugin will overwrite the translations for that selected language with the current Figma values.


Plural keys support

The Lokalise Figma plugin supports plural keys. To mark a key as plural, click +plural next to its name:

In the example above, the text includes the universal placeholder [%i], which represents an integer value (in simpler terms, a number). This approach is recommended because universal placeholders are automatically converted into platform-specific placeholders when exporting translation files.

Once a key is marked as plural and exported to Lokalise, you will see a dropdown displaying all plural forms for the selected language (English in this case):

If you change the language in the plugin, the list of plural forms updates accordingly. You can also adjust plural rules for a language by modifying its language settings in Lokalise, as described in the corresponding documentation.


Creating pages duplicates

You can create duplicates of your current design in Figma using the Lokalise plugin. Duplicates can contain either key names or translations, depending on what you need.

  • Duplicate with key names — all text elements are replaced with their corresponding key names. This is useful for developers so they can see where each translation key is used in the design.

    • If you rename a key in Lokalise and then update the duplicate page in Figma, the new key name will appear correctly.

    • The above scenario won't work if, after creating the duplicate, you unlink a key in Figma and then link a different key to that element. In that case, renaming the original key in Lokalise will not update the duplicate due to technical limitations.

  • Duplicate with translations — all text elements are replaced with their translated values in the selected language.

To create a duplicate, click Create a copy:

Choose the type of duplicate you want:

When ready, click Proceed. A new Figma page will be created, for example:

In the example above all text elements contain the corresponding key names. You can switch between pages using the dropdown in the top-left corner of Figma.

Updating duplicate pages

When viewing a duplicate page, you can press Update page to refresh the existing elements:

The Update page button only updates elements that already exist on the duplicate.

To update the entire page and add newly added elements, you must update it from the original design page. To do this:

  1. Switch to the original Figma page.

  2. In the plugin, click Create a copy again.

  3. Choose Update existing page.

  4. Select the page you want to update and adjust the update settings.

Prototypes

The Lokalise Figma plugin supports carrying over prototype interactions when you create a duplicate of your design.

  1. In the master version of your design, open the Prototype tab in the right-hand panel.

  2. Add the necessary connections by dragging from one element to another.

  3. When you create a page duplicate using the Duplicate feature, all prototype interactions from the original design will be included in the copied version.


Placeholders support

The Lokalise Figma plugin supports adding custom values for placeholders inside your design. You can also create a page duplicate where these placeholders are replaced with the values you provide.

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.

Adding values for placeholders

  • Create a new translation key that contains a placeholder, or import such a key from your Lokalise project.

    • If you want to use one custom value for all languages, import all translations first and then add the placeholder values.

    • If different languages require different values, you will need to enter each value separately.

  • The plugin will detect placeholders automatically.

  • Click the Settings button and enter the values for each placeholder.

  • Create a new page duplicate. All custom placeholder values will appear on that duplicate.

Custom values can be edited directly on the duplicated page. These changes apply only to that specific duplicate and do not affect the original page or any other duplicates.


Branching

The Lokalise Figma plugin fully supports projects that use branching. After selecting an existing project, you will see a Select project branch dropdown.

This dropdown is shown only if the project contains more than one branch.

All export and import operations will apply to the branch you have selected. If you need to switch to another branch, open the plugin settings, disconnect the current project, and reconnect while selecting a different branch.


Formatted text and tags

When part of a text element in Figma is styled as bold, italic, or underlined, the Lokalise plugin detects this automatically and applies the appropriate inline tags in Lokalise.

Take a look at the following example:

“Welcome to Lokalise” is a single text element, but one part of it is bold. After exporting this element to Lokalise, you will see the following:

“Lokalise” is wrapped in the b tag. To view the actual tag, disable the Display placeholders as blocks setting in Lokalise.

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

Did this answer your question?