Introduction

This Figma plugin allows you to:

  • Push 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.
  • Pull translated texts from Lokalise to Figma.
  • Seamlessly switch Figma design language.

Install the plugin

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

Click Plugins in the left menu:

Click Browse all plugins:

Enter "lokalise" in the search box and then click Install next to the Lokalise plugin:

Once the status changes to Installed, the plugin is ready to be used!

Launch the plugin

1. Open your project

2. Go to the Menu > Plugins > Lokalise

3. Connect your Lokalise account

4. Allow Figma to access your Lokalise workspace

5. Go back to Figma and select one of your existing Lokalise projects or create a new one. You can also set the default key naming pattern and the default platform for the newly created keys (this applies to the key names this Figma plugin will generate for Lokalise).

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

6. Click Finish Setup

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

Start using the plugin by pushing 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:

You will see the following dialog:

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 main steps of the translation process are shown in the following diagram:

Push Figma strings to Lokalise project

  1. Click Push all button if you want to push all text elements to Lokalise. If you want to push just several text elements, select them and click Push selected. Pleae note, that we will automatically generate key names according to the naming pattern you've picked earlier, however you can easily set any required key names by altering the according entries.

If there is any existing content in your project (i.e. the developers have already started working on the project), Lokalise plugin can link text elements to the existing keys. There is an automatic Push 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.

2. Check the required settings and click Proceed:

  • Match Figma texts to existing translations in Lokalise. If checked, strings in Figma will be matched to the already existing translations in the Lokalise project.
  • Create missing keys in Lokalise. If checked, all missing keys will be created in Lokalise project. 
  • Link new duplicate texts in Figma to a single Lokalise key. If checked, duplicate texts in Figma will be matched to a single Lokalise key. Otherwise, for each duplicate text block will be created a new Lokalise key.
  • Tag newly created keys (comma separated). If checked, you can add tags, that will be assigned to the Lokalise keys.
  • Update Lokalise translations with modified texts from Figma. If checked, all already linked keys in Lokalise will be updated with the modified texts from Figma.
  • Update screenshots. If checked, screenshots in Lokalise will be created or updated with the new ones.

Check the result of the operation:

Now you can go to the Lokalise project and perform the actual translations.

Screenshots

In Lokalise project you can add screenshots and select an area on screenshots for each key (read more about screenshots here). If Update screenshots option is enabled in the push 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:

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

Pull Lokalise translations to Figma

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

If you want to pull just several text elements, then select them and click Pull selected.


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 push the translations after switching the language in settings the plugin will overwrite the selected language translations with current Figma values.

Uninstalling the plugin

To uninstall Lokalise plugin, proceed to Menu > Plugins > Manage plugins:

Choose Lokalise from the list of installed plugins:

Find the Installed button in the top of the page:

When you hover the mouse pointer over this button, it will change to Uninstall:

After pressing the button, the plugin will be uninstalled. You can install it back anytime by pressing the Install button again.

Did this answer your question?