Lokalise plugin for Figma enables you to:

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:

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

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:

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.

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.

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

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:

Check the required settings and click Proceed:

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.

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:

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

Additionally enable:

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

Enable:

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:

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.

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.

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:

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

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.

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.

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.

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

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:

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

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:

To add values for placeholders, follow these steps:

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.

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.