📚 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 articles:
- Preview designs in multiple languages
- Connect designs and source keys via screenshots (this article)
- Make Figma the Source of Truth (coming soon)
- Make Figma and code base independent Sources of Truth (coming soon)
Before diving in, check out our documentation describing the installation and configuration of the Figma plugin, as we will skip this step. Also, look at other Figma-related articles to find more helpful examples and guides.
🎈 The Use Case
This workflow is suitable for anyone who'd like to help translators with the additional context in the form of screenshots depicting where the source key originates from. It is similar to the Preview design in other languages approach in which the designers mainly use the Figma plugin to ensure that the layout is robust enough to handle various languages. Since the designers already benefit from the plugin, why shouldn't the translators too?
There are pretty much only two scenarios where this approach is pointless. Either you use only machine translation engines for translations, or the screenshots of the designs won't help with the translation context whatsoever. However, there is no guarantee that you won't need professional quality translations at one point (there is a good chance that you will!), so uploading screenshots upfront isn't a bad idea. And presuming that the translators won't ever benefit from additional context is just not true - I bet they'll thank you for it sooner or later.
Imagine that you're working on a mobile app that should help users stick to new habits. Let's set up an exemplary scenario where we would benefit from this usage of the Figma plugin. Each recipe step, guide, and praise can contain multiple images, videos, and texts of varying lengths. However, if you look at the content more abstractly, we can identify that the number of unique layouts is relatively small, with greater emphasis on the quality of the content and the UX aspects. Hence, the number of screenshots to maintain will be quite small, and the quality of translations should improve thanks to them considerably. These are truly win-win conditions.
🔌 Connecting to Localazy
First of all, set up a new account in Localazy. Create a new project that will be connected to our product's codebase (via the CLI, API, or other means). For our example product, we would probably order professional translations since the translation quality is of utter importance to connect with our target audience. Still, you can also invite your own translators, rely on the community, or use machine translations.
Now, our designers want to preview the translations in Figma and ensure that their designs can handle various languages. Therefore, we're going to create a second project that will serve as a playground for designers. We will only translate it via machine pre-translate, which is fast and included in the Autopilot plan subscription. This project won't be connected to our codebase, only to our Figma designs.
Don't create the second project if you don't need a playground and want to upload screenshots to your main project only.
📸 Upload screenshots to Localazy
Open up the Figma file with the designs you'd like to upload. Initialize Localazy's Figma plugin and connect to the main Localazy project. If you were previously connected to the playground project, make sure to disconnect and connect to the correct project now.
Back in Figma, navigate to the settings tab and choose Upload only screenshots under the Screenshot settings. I'll keep the Upload & download the entire file option unchecked to upload only the layouts I select.
Select the screen(s) you'd like to upload screenshots of. You have to fill in the file name and select the target format. It doesn't affect anything since we're uploading the screenshots only; it's just how the plugin is built.
When you navigate to the Screenshots section in Localazy, you should see one uploaded screenshot but no content just yet.
📤 Upload content
Localazy supports hundreds of frameworks and programming languages and dozens of underlying file formats. It's entirely up to you what kind of content and how you will upload it.
Browse through the available integrations and decide whether you'd like to integrate your project via CLI, API, Zapier, or other means. Each type of integration and file format offers various kinds of available integration methods, so look up the one you are after and see your options.
In this example, I will use a manual file upload since this is the quickest way to validate whether this Figma workflow will suit our needs - at least from the designer's and localization resources management perspective.
Navigate to Integrate section and select Direct File Upload.
Add the localization file in any supported format and choose the file type if Localazy can't recognize it. Click on Next and configure the additional import options if required (most of the time, the default values are sufficient). And upload.
If the content structure is valid, you should see your project's newly added source keys.
🔗 Connect content with screenshots
Finally, we have both Figma screenshots and content ready in Localazy, and the last step is to connect them. Head again to the Screenshots section and open one of the uploaded screenshots.
Here we can see the screenshot itself, various metadata, and attached tags for easier management - the Figma tag representing the origin has been added for us automatically.
Most importantly, at the bottom, there is an input called Linked source keys that we can use to look up source keys in our project and connect them to this screenshot. However, looking up all the source keys for all the screenshots would be extremely tedious, especially considering that both will grow in numbers.
Thanks to the OCR mechanism, Localazy can detect what keys should be connected to the individual screenshots and suggest them to you. In the screenshot above, you can see there are multiple suggested keys. All of them are relevant, so we'll add them and save the changes.
I've uploaded only a few strings for this example. Hence the number of suggestions is so small. If I had uploaded all the content, the number of suggested keys would be larger. However, if you suspect that some source keys haven't been suggested in your case, you can always look them up manually.
When you now click on one of the linked source keys, you'll see that the screenshots tab has (1) attached screenshot. From this point onwards, the translators can preview the attached screenshot and benefit from its context while translating the content.
Updating the screenshots
What happens if the designs change, you may ask? Localazy keeps track of which layout the screenshot was generated from. So feel free to rename the screenshot and add more tags to it. If you make changes in Figma and upload the same layout again, Localazy can replace the existing screenshot with the updated one.
So are there any caveats?
We've learned that uploading your screenshots is effortless, and the only extra work the designers need to do is to open the Figma plugin and upload the content once the designs are ready (or updated). No problem there.
Attaching source keys to new screenshots is a little time-consuming, especially if the OCR mechanism fails to recognize all the source keys. But still, quite manageable.
The biggest challenge is arguably maintaining the older screenshots. Some screenshots can become outdated and no longer representative of your application (you drop a limited-time event feature, for instance). Somebody should delete such screenshots from Localazy to not get lost in the clutter.
Furthermore, it can happen that you add more content to an existing design (a new button) which means that you need to check for newly suggested source keys or add them manually if they weren't detected.
So the biggest caveat of this approach is that somebody should be responsible for managing the screenshots section in Localazy. The decision is yours - if you (or the translators) feel that the screenshots are crucial for the quality of the translations, then managing screenshots is definitely worth the extra effort.
⚖️ Pros and cons
➕ 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 upload screenshots generated from the Figma designs. There is hardly any extra work for the designers.
- The translators can preview where to translated content is used, which can improve the quality of translations considerably.
➖ Cons
- Somebody needs to link source keys to uploaded screenshots in Localazy and manage the screenshot section in Localazy.
- Updating older designs is especially challenging since you need to look up relevant screenshots in Localazy and ensure that appropriate source keys are linked.
- There is a risk that designers forget to change the target project and settings and mistakenly upload keys from Figma to Localazy.
✔️ Closing word
I hope this article helped you understand how you can attach screenshots generated from the Figma designs to your content in Localazy. Be sure to 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 Nickelfox Design and available in the Figma Community under a CC BY 4.0 license.
This is a companion discussion topic for the original entry at https://localazy.com/blog/figma-series-connect-designs-and-source-keys-via-screenshots