In this article, you will learn how to localize your Figma designs using SimpleLocalize plugin and translation editor. Use Figma integration to manage your design translations and collaborate with your team on project localization.
Table of contents
Before you start
Before getting started, ensure you have the following:
Figma: Plugin installation
In the first step, configure the SimpleLocalize plugin in Figma. Start by logging in to your Figma account and opening a project you would like to translate.
Go to Resources > Plugins and search for SimpleLocalize.
Open the plugin and connect it to your SimpleLocalize account. For that, you will need your personal token generated in account settings. Next, choose which project corresponds to the open Figma design.
SimpleLocalize plugin configuration
Figma: Plugin settings
Once the plugin is installed, configure the connection between Figma design and the SimpleLocalize project by adjusting plugin settings. You can find all the configuration options in the Settings tab.
Synchronization settings
In the Synchronization settings tab of the plugin, you can find the following options:
- Overwrite existing translations on push
- Omit untranslatable elements (e.g., elements with only numbers or symbols)
- Omit locked elements; if an element in Figma is locked, it won't be included in push
- Omit hidden elements
- Include basic text formatting
- Upload frame screenshots as translation key screenshots.
Key creation
Scroll down to determine how translation keys should be created from Figma text elements. By default, the key format is my-frame.button.continue which uses the frame as a prefix and then adds the group name (if used) and element name.
Design localization workflow
Push, translate, and get translations are the three steps in the localization workflow with Figma and SimpleLocalize. See below for how to use them and translate your Figma designs.
Figma: Push translations
Push translations sends all texts from Figma to SimpleLocalize, creating translation keys and adding translations to your default language.
In the Actions tab, hit the Push translations button to send texts to your SimpleLocalize project.
Synchronizing translations to SimpleLocalize
Push only selected elements to SimpleLocalize to test the integration.
SimpleLocalize: Translate
Translate texts from Figma to another language or exit existing texts directly in the Translation Editor.
Auto-translating strings from Figma
Figma: Get translations
To download translations from SimpleLocalize to Figma, go to Actions in the plugin and hit the Pull translations button.
Figma: Switch design language
After pulling translations, you can now switch your design language in Figma. Change language in the top-right corner of the plugin to show translations of your design in the selected language.
Getting texts in different languages from SimpleLocalize