Did you know that you can translate your Figma designs and prototypes and reuse the translations seamlessly during development? Learn how to do it with Localazy and Figma.
Figma is a well-known web prototyping and vector graphics editor tool used to create visual designs of your ideas. It's ideal for building design systems and prototyping web and mobile apps, which we will then help you localize. 😁
But what if you want to localize the design/prototype itself to see if it would work with other languages? That's when the Localazy Figma plugin comes into play, designed to help you translate your designs efficiently and quickly 💨.
🤓 How does it work?
With Figma & Localazy, you can quickly test the compatibility of your design when new languages are introduced, translate banners and other pieces of visual content. After that, download translated strings to use them in your project.
Just select what you want to import and get your content transferred to Localazy and back in a few clicks.
Figma Plugin is available for all users on the Autopilot plan. Learn more in the documentation or contact us if you have any questions.
Now to the fun part. 🤭
🎨 How to use the Localazy Plugin for Figma
To demonstrate the uses of Localazy's Figma Plugin, we'll set up a demo project. We'll go step by step to every detail showing you how to integrate a Figma project with Localazy from the get-go.
Before we start
- Sign up for Figma; you can use the browser version or download a native version for Windows or macOS. 🖌️
- Create a free Localazy account if you don't already have one :) 🚩
- Activate the Autopilot plan in the Marketplace (don't worry, there is a 7-day trial) 🚀
- Grab your favorite drink, and let's go! 🍹
Creating a new Figma project
Let's start by logging in to Figma and in the dashboard, click on the New design file card to create a new file.
To make this tutorial short, we will pick the Prototyping in Figma example project, but all the following steps will be compatible with your own personal project.
Installing the plugin
Now that we have the design file set up, we must install the Localazy Figma plugin to localize the prototype. To do so, let's head to the top left corner click on the Figma logo ➡️ Plugins ➡️ Browse Plugins in Community and go there.
We must now search for "Localazy" in the search bar, and the plugin will come up.
Clicking on the plugin will give you access to more information about it, but you can now click on the blue Install button on the right. You can browse all other plugins available for Figma - you can read plugins recommended by our designer Ondra in this article.
Read about our favorite Figma plugins for product designers
Linking Figma with Localazy
We should now log in to Localazy and create a new project, just reserved to store and manage all the strings from our Figma project.
Heading back to the design file, let's follow the same path as before, going to the top left corner ➡️ Plugins ➡️ Localization plugin by Localazy.
Clicking on it will open the following window:
We now need to link our Figma project with Localazy's newly created project by authorizing access to Localazy and choosing the desired project to be linked from the dropdown.
Go back to your Figma project, and you'll notice that you have Localazy's Upload tab open, in which you can customize the name and type of the upload file.
Note that if you do not have the Autopilot or higher plan active, the plugin will notify you that you are not subscribed to the required plan, stopping you from proceeding.
We'll continue with default settings and click Upload to Localazy.
If everything is uploaded successfully, you'll see the following:
We should now head to our project at Localazy and translate the strings to the language of our choice.
To do so, we click Add Language button. I'll choose Portuguese and Spanish. You can add whatever languages you prefer personally. 😉
To start translating, simply click on the blue button referring to the language you want to translate.
For your own project, you can also order translations from our Continuous Localization Team, which will deliver translations pro-actively whenever you add new strings or change existing source strings.
You can find more about how our translation services work in the documentation.
If you choose to translate the texts yourself, you'll have machine translations to help. When the translation is finished, simply click the Save button.
After everything you need is translated, go back to your Figma project and open the Localazy plugin again. Head to the Download tab and pick the file and the language you would like to see your project in. As soon as you click Download to Figma, you'll be able to see the translated strings.
The original file will look like this:
To demonstrate the translation, we've downloaded Spanish:
If you'd like to see another language, just pick it and click the download button again. This time I'll choose Portuguese:
Translating specific nodes
Localazy Figma plugin allows you to pick specific nodes and translate them to whatever language you want without affecting the rest of the project.
Simply pick the nodes from the left column of the project or click the node itself on the canvas, then select the language from Localazy's Figma plugin and download.
In this particular case, we only changed the text node "Register" to German.
You can learn more about how our Figma plugin works in the documentation.
Additional settings
Besides the main features of the plugin, we have three additional options:
- Figma File share link - When enabled, each string will show a backlink to its Figma file
TextNode representation. This way, every contributor working on a project will instantly have an actual context, even if you updated the design recently.
- Use node name as source key - By default, Figma internal
TextNode id will be used to identify a string, but by ticking this option, the source keys will then be the TextNode names.
- Upload and download the entire file - This option allows you to switch the upload & download context according to your needs. Implicitly, context is set to a currently active page, and the context setting is applied only when nothing is selected. Then, only the selection will be uploaded/downloaded.
✔️ Closing words
Localization of your project just became more dynamic thanks to the ability to link your Figma project with Localazy. And, as you can see, it's incredibly easy to localize Figma projects with the Localazy Figma Plugin. We look forward to seeing our Figma plugin help you in your localization journey to success ✈️.
Did you like this tutorial? If you would like us to clarify something, please let us know in the comments below!
