If Figma is your team's go-to for design, you want the tools in your localization workflow to sync with it automatically - and that's perfectly reasonable. After all, by cutting out manual work from your process, you'll be minimizing human errors, delays, and other unsavory bits.
Not only that, but we already know that having proper context has a significant impact on localization quality. It can give your linguists a full view of the current feature flow and help them come up with the best linguistic solutions for each screen. Plus, it almost completely prevents concatenation and placeholders blunders - that's when your translator translates pieces of strings separately, without knowing or having any control over what they'll apply to or how they'll come together at the end.
That's why a Figma localization plugin is one of the most useful features a localization tool can have. It's a huge asset to UX teams. Today, I wanted to take a closer look at a new Figma plugin released by one of the most exciting new-gen localization tools in the market today, Localazy® (more about them here).
🕹️ What can the Localazy Figma plugin do?
Trying to stay on top of the thousands of words that make up a design can be pretty tricky, especially when your team is dispersed over several departments. Handling copy changes at various points along the process can get messy pretty fast, causing discrepancies and inconsistencies. The manual labor involved in updating strings can keep your team away from other essential tasks and delay feature rollouts in your global markets. Plus, external vendors, like freelance translators, will never be as immersed in your product as your in-house team. Giving them enough context is crucial for localization success.
Lucky for us, the Localazy plugin for Figma offers a simple, easy-to-use solution. It's a great way to streamline your processes and take out some of the friction localization workflows are infamous for. Here are a few things it can help you do:
1. Translate a single design into multiple languages
If you've ever tried maintaining different versions of screens for each language, you know it can get out of hand fast. With this plugin, there's no need to deal with that at all. You can sync the source strings with Localazy from a single board and page, and easily switch between the localized versions of the copy when you need to. If all your languages currently require identical layouts, it's a huge time saver that'll definitely prevent some of the chaos product teams deal with when localizing.
2. Save time preparing new releases for localization
Migrating copy from Figma to set up a localization process is usually a huge hassle. There's no designated way to export strings into a translatable format or keep string IDs in order. And to ensure your linguists get the proper context, you also need to manually create screenshots and upload them to the CAT tool of your choice (if you're lucky and that tool supports screenshot context).
But with this Figma plugin, it all happens automatically. You can set it up to use your textbox ID as a string ID so that the exported file already has all the data your dev team needs for production. Plus, once you give the plugin a file share link, every string in Localazy will include an automatically generated backlink to its exact location in Figma. Rather than just getting visual context, your linguists can view the entire user flow and understand it better.
3. See your localized copy in layout with the click of a button
Remember concatenation blunders? Now they're no longer an issue. After the initial localization phase is done, you can pull the translated copy into your layout with a single click. You, your team, and your linguists will be able to see precisely how the newly-localized texts look in layout, identify issues such as overflowing lines and mistranslated placeholders, and quickly correct them before they get to production.
4. Quickly push copy to localization, then to production
Say goodbye to the copy-paste dance, become you'll no longer be needing it. Using this plugin, you can take your texts through the various localization stages with barely any manual effort. By automating tasks, using the sync feature wisely, and minimizing human involvement, you'll be able to release new localized versions much faster than before. That's ideal for agile teams, as they can focus on the things that matter - like quality and strategy - and leave the grunt work to the machines.
5. Get your copy continuously translated with the help of the Localazy linguist team
If you're a send-and-forget type of person, this feature will be right up your alley. Using the Figma plugin, you can set up your account so that any new strings in a specific project are automatically sent out for translation. Then, when you push strings into Localazy via the plugin, they'll be translated by a human in a predefined time frame. Localazy promises to have translations ready within 2-5 business days.
You currently don't have much control over who will be doing the localization, which may be an issue - but the Localazy team is highly responsive and will do their best to ensure you get the results you're after. As always when working with an external provider for localization, keep an open mind but leave your guard up in terms of quality.
💸 How much does the Localazy Figma plugin cost?
Plugin access is available for Localazy users on the Autopilot tier and up. The price tag of $49/month includes all other features on this plan - including webhooks, screenshots, and other integrations. Plus, you'll be getting your money back in the form of translation credits.
🤔 Is the Localazy Figma plugin worth it?
Handling localization workflows manually may work if you only have a small number of strings, but larger products can greatly benefit from the time and effort saved by automation. As I often tell clients, if you feel the amount of manual labor weighs on you, it's probably a good choice to invest in some time-saving tech. You can try the Autopilot tier for free for 7 days before you make your decision. If you're considering Localazy for this feature, use that time to try some workflows and see exactly how many work hours you'll be getting back.
🖌️ How to use the Localazy Figma plugin
Using this plugin is pretty straightforward. Here's how you do it:
1. Setting up the plugin for work
- Start by ensuring your account is on the Localazy Autopilot plan or higher. Then, visit the plugin page in the Figma plugin shop to install the plugin on your Figma account.
- Create an empty project on Localazy. This is where your strings will show up once you finish setting everything up.
- Go back to your Figma board and open the plugin (right-click anywhere and choose plugins > Localization plugin by Localazy).
- Click ‘connect plugin’. You'll be transferred to Localazy to choose the project you'd like to sync. Pick the project from the dropdown and click ‘Authorize’.
2. Uploading your texts to Localazy
- Select the frames or text boxes you'd like to sync with Localazy.
- Visit the Settings tab of the plugin for additional settings. Here you can:
- Add a Figma share link - Let Localazy generate a backlink for each string so that your linguists have the full context as they work.
- Check ‘use node names as source keys’ - Give each string an ID that's identical to the text box's name. It's a great way to auto-generate key IDs for your developers. A word of warning, though: This should only be used if you're sure all your text boxes have unique names (unless, of course, they contain the same text). If they don't, Localazy will get confused and overwrite them.
- Check ‘Upload and download the entire file’ - Ensure your actions impact all screens on the page, instead of having to select all screens manually.
- Once you're done, click ‘Upload to Localazy’ on the Upload tab of the plugin. Note that you can choose the file name and type before uploading to better match your preferences and settings. There's a great selection of file types, from JSONs and XMLs to more specific ones.
- Wait for the upload to complete, and voila! All your content is ready to be localized at Localazy.
3. Translating your content inside the Localazy platform
You can have the strings translated by your team, use machine translation, or have the Localazy translation team work on them. This is where your carefully crafted localization process fits in. You can read the Localazy documentation on their website to learn more about working with the platform.
4. Downloading the localized strings back to Figma
- Open the Figma plugin again in your Figma project
- Select the frames you want to update (leave them unselected if you want the entire page updated).
- Pick the localized file and language in the Download tab
- Click ‘Download to Figma’
- Your text boxes will automatically be populated with the localized copy.
Note you can also do this in a new copy of your project if you want to keep separate copies for every language. Simply create a Figma copy of the source project, connect the plugin to Localazy as you did before, and download the strings into the new project.
5. Exporting the localized strings for production
Once you've finalized your translations and are happy with the result, you can easily export a file with the translations and key IDs through the Localazy platform. Simply visit the File management tab in your project dashboard to download.
That's it! I feel plugins like this one can completely change the game for Figma-based workflows, and I'm excited to see what features and capabilities they'll include in future releases. I hope this review will help make localization easier and simpler for you. Good luck :)
This article was originally published at #writingTech by Michal Kessel Shitrit
This is a companion discussion topic for the original entry at https://localazy.com/blog/agile-localization-for-ux-the-localazy-figma-plugin-changes-the-game
