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.
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.
- 1.On your locize project's information card or on your settings page, grab your project-id.
- 2.Go back to Figma, open the locize plugin and paste in the project-id.
- 3.Choose the appropriate version (usually latest).
- 4.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.
- 5.If your chosen locize version is configured with private publish mode, click the private checkbox.
- 6.Finally, confirm your settings by clicking the Save button.
- 1.In Figma, select one ore multiple layers.
- 2.In the locize plugin window, open the Extract tab.
- 3.Click the Extract from current selection button.
- 4.The plugin tries to automatically scan your selection for possible translation content.
- 1.It will use the layer name as translation segment key.
- 2.It will use the frame name as namespace name or if not a single frame is selected, the page name.
- 5.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)
Having some translated segments in locize, you have the possibility to validate your design with that translations.
- 1.In Figma, select the layers or the frame you want to validate.
- 2.In the locize plugin window, open the Translate tab.
- 3.Chose the desired language.
- 4.Click the Translate button.
You can skip this step, if you already use a locize project.
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.
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.
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're using a special font which is not installed locally, the plugin might not work correctly.