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