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.
Plugin installation
In the first step, configure the Figma SimpleLocalize plugin in your Figma project. 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.
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.
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.
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.
Push only selected elements to SimpleLocalize to test the integration.
Auto-translate and manage translations
Translate texts from Figma to another language or exit existing texts directly in the Translation Editor.
Pull translations
To download translations from SimpleLocalize to Figma, go to Actions in the plugin and hit the Pull translations button.
Preview other languages
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.
Translation key changes
The Figma plugin tracks translation key changes. This means that if you move your component to another frame and the frame name is part of the key, the key will be updated accordingly after the next push to reflect the changes in the Translation Editor.
Important: Changes to translation key names or namespaces in the Translation Editor are not pushed to Figma, as Figma is the source of key creation.
Troubleshooting
Translation or key has not been created/updated
Please remember that Figma plugins takes into consideration only Figma plugins that are in Frame, and it may also skip synchronization for components that are locked or hidden if you changed the default Synchronization settings. If you have any issues with translations or keys not being created or updated, check if the elements meet these criteria. If the problem still occurs you can check logs in Developer Console by clicking the "Plugins > Development > Open Console... > 'Console' tab".
Access denied
If you see Access denied error, it means that the plugin is not able to access the SimpleLocalize API. Make sure your Personal Token is valid, you can generate a new token Personal Token and change it in the Figma > Plugin > 'Settings' tab -> Personal Token and click 'Update Personal Token' button.