Figma Plugin
Learn how to install and use the locize Figma plugin in order to start translating your Figma files in locize the right away.
The locize Figma plugin allows you to send text content to your locize project, directly from within Figma and to fetch translations from locize to test your designs. Bridging the gap between translation and product design with our Figma integration creates an efficient workflow from end-to-end.
Install the plugin
You can find the locize Figma plugin in Figma's plugin browser.
Just click the install button on the top right corner of the page.
Ofter the installation, you can access the plugin via the menu of Figma. Next to all your favorite plugins.
Connect Figma with locize
To use the locize Figma plugin, you have to connect Figma with locize. If you do not have access to locize yet, you need to be invited to a project by someone with admin role or you need to create a new locize project.
On your locize project's information card or on your settings page, grab your project-id.
Go back to Figma, open the locize plugin and paste in the project-id.
Choose the appropriate version (usually latest).
If you also want to send missing translations from Figma to locize, make sure you copy your API-Key or create a new one on your locize project's settings page.
If your chosen locize version is configured with private publish mode, click the private checkbox.
Finally, confirm your settings by clicking the Save button.
Send missing translations to locize
If you have not yet started with filling locize with translations yet, this is a good option to start with.
In Figma, select one ore multiple layers.
In the locize plugin window, open the Extract tab.
Click the Extract from current selection button.
The plugin tries to automatically scan your selection for possible translation content.
It will use the layer name as translation segment key.
It will use the frame name as namespace name or if not a single frame is selected, the page name.
You'll now see which resources are missing, and you have the possibility to send those missings to locize. (This is only possible if you provided the API-key in the plugin settings)
Validate your product design with translated content
Having some translated segments in locize, you have the possibility to validate your design with that translations.
In Figma, select the layers or the frame you want to validate.
In the locize plugin window, open the Translate tab.
Chose the desired language.
Click the Translate button.
Step by step example
1. Create a new locize project
Follow this getting started section, if you have not yet started with locize.
You can skip this step, if you already use a locize project.
2. Copy your project id and api key
Like described here, run the locize plugin in figma and copy your project id and api key in the Settings tab.
3. Send first texts to locize
Like described here, select something in your figma design.
When clicking "Extract from current selection", you'll see it uses the layer names as segment key names for locize and it uses the frame name (or page name) as namespace name for locize.
At the bottom of the Extract box, click the "Yes" button to send those texts to locize.
In the locize Control Center, you can now see the newly created "register" namespace.
Opening the Global view, you'll see all the figma texts
You can now translate the texts in all your other languages. Depending on your project settings it might also be the segments are already automatically translated thanks to the automatic machine translation.
4. Validate other languages
Back to figma, you can now switch to the "Translate" tab, choose another language, and click the "Translate" button, like described here.
You can see the Text components are updated accordingly and your layer names stay unchanged.
Now you can add new languages in locize or change the text in locize and validate it in figma with the "Translate" tab.
If you want to send new texts to locize, just select another frame name and repeat step 3.
FAQs
Possible problems with special fonts.
If you're using a special font which is not installed locally, the plugin might not work correctly.
In this case you can try to fix this like described here.
Last updated
