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?
Connect your project with Figma & LocalazyWith 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.
Figma DashboardTo 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.
Figma Example Prototype ProjectInstalling 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.
Browse plugins in FigmaWe must now search for "Localazy" in the search bar, and the plugin will come up.
Find the Localization plugin by LocalazyClicking 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.
Create a new project in LocalazyHeading back to the design file, let's follow the same path as before, going to the top left corner ➡️ Plugins ➡️ Localization plugin by Localazy.
Open the Localazy pluginClicking on it will open the following window:
Link the Figma project with your Localazy projectWe 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.
Authorization and Project SelectionGo back to your Figma's 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 Enterprise plans, the plugin will notify you that you are not a subscriber to the mentioned plans, stopping you from proceeding.
We'll leave it stock and click Upload to Localazy.
Localazy's Figma Plugin Upload TabIf everything is uploaded successfully, you'll see the following:
Upload Tab Successful UploadWe 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. 😉
Localazy - Add LanguagesTo 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 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:
Figma prototype in EnglishTo demonstrate the translation, we've downloaded Spanish:
Figma prototype translated by Localazy in SpanishIf you'd like to see another language, just pick it and click the download button again. This time I'll choose Portuguese:
Figma prototype translated by Localazy in PortugueseTranslating 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.
One text node translated to GermanIn 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
TextNoderepresentation. 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
TextNodeid will be used to identify a string, but by ticking this option, the source keys will then be theTextNodenames. - 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!
This is a companion discussion topic for the original entry at https://localazy.com/blog/design-localization-with-localazy-figma-plugin
