📚 Figma plugin series 🔗
This article is part of the Figma plugin localization workflow series that outline proven integration approaches of the Figma plugin in the product's design and development stages.
The series consists of the following:
- Preview designs in other languages (this article)
- Connect designs and translations via screenshots
- Make Figma the Source of Truth
- Make Figma and codebase independent Sources of Truth
Before diving in, check out our documentation describing the installation and configuration of the Figma plugin, as we will skip this step. Also, take a look at further Figma-related articles to find more helpful examples and guides.
🎈 The Use Case 🔗
Using the Figma plugin as a preview for translations in different languages can be helpful for anyone who's using Figma and is considering or maintaining a multilingual project.
Knowing that the layout won't break when you introduce languages that tend to have long words, such as German, or those that are written with non-Latin characters (e.g., Japanese) or right-to-left (e.g., Arabic) can save a lot of time redesigning and reworking the content later on. So, in general, this approach is suitable for just about anyone. Whether you are just starting a new project or maintaining an existing one doesn't matter.
But to make this demonstration more specific, let's imagine that your team is starting a new product, and you know that you'll kick off the MVP in English only, but soon you want to follow with German, Spanish, and Arabic.
The minimal feature set is established, the designers are in the zone, creating astonishing prototypes, and everybody is keen to begin the development so that you can test your product and ship it as soon as possible.
Luckily, you remember that you should take a step back and ensure that the design will work in other languages, as localization of your product will be vital in a few months. This is a great time to connect the designs to Localazy and preview them in other languages.
🔌 Connecting to Localazy 🔗
First of all, set up a new account in Localazy. We're going to create two separate projects. The main one will be connected to our product codebase (via the CLI, API, or other means) and we will use it later in the series, so now you can ignore it.
The second project will serve as a playground for designers, and we will only translate it using a machine translation engine, which is the fastest way and included in the Autopilot subscription. This project won't be connected to our product codebase, only to our Figma designs.
💡 Preview translations in Figma 🔗
Upload designs to Localazy 🔗
First of all, open a file of your choice in Figma, initialize the Localazy Figma plugin and connect to your target Localazy project.
Then in the Plugin's settings, I'll check Use node name as source key for more readable source keys (instead of Figma's internal numerical IDs) and uncheck Upload & download the entire file to only upload text nodes I have currently selected.
Also, I won't upload screenshots to the playground since no human translator would benefit from them, and it would slow down the upload process unnecessarily. Neither is necessary, but such a configuration makes for a better experience - in my opinion.
Select the screen(s) you'd like to upload to the playground, fill in the file name under which the content will be stored in Localazy and select the target file format (JSON is a universal option). And upload.
Translate with MT 🔗
Open Localazy and add German, Spanish, and Arabic. For each language, open the options dropdown and select Pre-translate with MT.
In the next step, feel free to choose your favorite MT engine. Each of them can handle specific scenarios, terms, and tonality differently, and it cannot be said that one is always better than the other.
I'll go with DeepL for demonstration purposes since their API can generally handle the translation request quite swiftly, and the translation quality is usually satisfactory.
Make sure to check the option Approve all translations so that you can use them immediately without having to review and accept them afterward. Check the other options to ensure that all the keys will be included in the pre-translate operation.
It could take a few seconds, but after a few page refreshes, you should see all three languages fully translated.
Preview in Figma 🔗
We're ready to preview the design in other languages now. Go back to your Figma file and switch to the Download tab in the Localazy Figma plugin. Select the source file and desired language, and select the screen/nodes you've uploaded to Localazy previously.
Excellent, we have the design translated into German in just a few minutes. And we can also see that some labels are a little too long and almost overflow the container. Yikes! 🙈 Luckily, the development hasn't started yet, and we have plenty of time to account for that in the design phase. Time saved and money not wasted.
With Arabic, it gets more complicated as this is a right-to-left written language, and some headings are overflowing. The Figma plugin also does not automatically change the text alignment, so you still need to tweak the design manually. But it's definitely much less work than having to translate the complete design as well.
👨💻 Translating your actual product 🔗
With the design phase done, we are ready to move on to uploading our actual content via available integrations.
If you are using a project management platform, you would create a new task, specify what should be developed/achieved, and attach a link to relevant designs.
The developers would implement the design and create localization keys with the values from the design and choose key names according to their best judgment. From this point onwards, the design would become detached from the localization resources, and the Figma plugin would remain a handy preview tool for designers, which is not a bad thing at all.
Having developers create new keys is arguably the fastest development option and the design option as well since the designers don't spend extra time thinking about key names and validating that they are uploading the content into the correct project and file.
The obvious disadvantage is that the content in Figma is detached from what the end users will eventually see and interact with. That makes reiterating older designs especially challenging since the developers either need to look up how they named the content in code or create new keys and resolve the unused localization keys through other means.
⚖️ Pros and cons 🔗
Let me present some pros and cons to this approach which you should consider before deciding to go this route with your team.
➕ Pros 🔗
- Developers are the ones defining new keys and adjusting existing ones. This is the fastest approach from the developers' perspective and arguably the fastest approach overall.
- Designers don't need to prepare keys in Figma in any way for developers. They just upload them as they are, translate them via machine engines and preview the designs. This is the fastest way from the designers' perspective as well.
- Nobody needs to validate that everything was uploaded from Figma to Localazy into the correct projects and files. With this approach, there is no localization management overhead.
➖ Cons 🔗
- The Figma designs are detached from the actual localization resources. With time, the discrepancies between older designs and user-facing content will widen.
- Reiterating older designs poses a challenge for developers. They need to either look up the updated keys in the localization resources to avoid leaving behind unused source keys, create new source keys and resolve unused source keys differently or don't bother and pay for unused keys.
✔️ Closing word 🔗
I hope this article sheds more light on using the Figma plugin to make your designs more robust. Check more articles from the series about common Figma plugin workflows. If you have any questions or comments, leave us a message below.
The designs used for the demo project are made by Michail Nikolitsis and available in the Figma Community under a CC BY 4.0 license.
