5 Best Practices for UI Localization

Until recently, UI localization and design were two independent processes. Moreover, usually, localization was initiated after the product succeeded and was about to scale. The growing customer demand to use products in their native languages, though, makes teams release multilingual products right from the start. Localization becomes an ongoing process for most companies.

To empower design teams to participate in the company’s localization initiatives more actively, we’ve launched plugins for Adobe XD, Figma, and Sketch. This post will embrace user interface localization best practices and showcase how you can use the plugins to adapt them to your localization workflows.

Stop Predicting. It Doesn’t Work

How’s that happening that your perfectly crafted designs in English look awkward in different languages? The reasons are multiple:

• Character set differences across languages
• Left-to-right and right-to-left direction differences
• Affected text readability after translation
• Illustrations that do not correlate with specific cultures
• And more

When you start to search for best practices for UI localization, you might come across such ideas as create designs thinking in advance of the language peculiarities and similar. How’s that even possible if you translate UI into 30 languages, for example? You will eventually run into unexpected issues as you need to see the translated variant to evaluate it.

That’s why, at Crowdin, we developed a new approach to design localization that won’t make you look for a crystal ball and predict things. Our plugins for Adobe XD, Figma, and Sketch allow you to collaborate on multilingual UI with the copywriting and development teams, synchronize texts across tools, and test translated versions before they move any further in the product development cycle.

UI Localization Best Practices

The techniques below will help you streamline localization for your products. Our plugins for Adobe XD, Figma, and Sketch have all the functionality to help you quickly adopt these practices and make sure your localization efforts are cost-effective and time-efficient.

1. Integrate Design Localization in the Product Development Workflow

Localization is a natural part of product development. Yet, due to the lack of integrity between the systems, it can be postponed and usually becomes an afterthought. Nevertheless, by investing your efforts in localization before the development starts, you can save up much time fixing inconsistencies after the release.

Furthermore, the “final” product version is a myth. With every product iteration, there will be changes in design, translated versions, and the localization cycle will start all over.

We recommend connecting all the tools your product teams use. So that source and translated texts could be synchronized across your design tool (Adobe XD, Figma, or Sketch), localization management platform (Crowdin), and version control system (Azure Repos, Bitbucket, GitHub, or GitLab).

With Crowdin plugins, you can send the source texts with keys, from Adobe XD, for example, to Crowdin for translation. You can add a key naming pattern to generate identifiers automatically. From Crowdin, changes in the sources, and translated files will arrive at the repository as merge requests and can be smoothly integrated into the codebase.

And in the reverse direction, source texts from the repo are uploaded to Crowdin. From there, you can upload them to your design tool.

So at any step of the localization cycle, neither designers nor developers waste time copying and pasting texts in prototypes and codebases. And if any change occurs, the texts can be updated across tools automatically. See the documentation for the Crowdin plugin for Adobe XD, Figma, and Sketch.

2. Prototype With the Real Copy

A clear user interface is not only about great aesthetics. Visual and text parts connect to create great digital experiences. Today, the copy-first approach is becoming more popular than ever. It is based on the idea that by integrating live copy right from the start, you can move design concepts closer to the final product and speed up the review process for everyone involved.

But where should you get those texts to abandon the usual Lorem Ipsum? Jumping between the Google Sheet from your copywriting team and your design tool is monotonous.

At Crowdin, we believe that any process that involves copy-pasting is inefficient at its core. Hence, our plugins for Adobe XD, Figma, and Sketch will allow you to get the production-ready copy from Crowdin and use it in the mockups. Here’s how the process will look like inside Figma.

3. Give Visual Context to Increase Translation Quality

UI copy is full of short one-word-long strings that can’t be interpreted correctly without any background information. For example, the word book translated as a noun or a verb has different meanings.

So once you start any localization project, think about how you can provide context for translation to avoid any potential mistakes. And when you deal with user interface localization, the context for the translation team is essential.

To provide the context faster, you can use our plugins and send multiple Screenshots to Crowdin in a click. Screenshots will arrive at the platform with all the strings tagged, and translators will open them for reference in the Crowdin Editor every time the visual context for the copy is required.

4. Customize the Translated Variants Before the Development Starts

Usually, a lengthy translated copy breaks the UI pattern and requires resizing. And unfortunately, without a well-established localization process, these and other inconsistencies are spotted after they go live. But suppose you can identify the breaking components earlier in the process and warn developers of the elements that should scale. In that case, your team saves much time fixing bugs either in the last minutes before the release or right after it.

With Crowdin plugins for Adobe XD, Figma, and Stech, you can preview and customize the translated prototypes before they move any further in the development process. With this approach, you no longer think in advance of text differences as you can go through all your designs and review each language separately for any overlooked user experiences. Check out how the preview for the translated mockups will look like in the Sketch interface. See the documentation for the Crowdin plugin for Adobe XD, Figma, and Sketch.

5. Generate Android and iOS Localization Files From Your Design Tool

The source files your team uploads to Crowdin can be of any format. Crowdin supports 100+ file formats. Regardless of the initial source format, you can export from Crowdin strings in the Android XML and Strings formats.

What does that mean for the design teams? This technology helps to achieve more automation integrating texts into the real product and start localization at the app prototyping step. Here’s a simple use case.

Let’s say you collaborate with the development team on app localization. As you prototype and add strings to your mockups, you also send them for translation to Crowdin with the keys. Keys are the identifiers for each text element that will allow Crowdin to integrate them in the codebase through the development tools’ integrations.

So once the strings are uploaded with the keys to Crowdin, engineering teams can launch custom exporters via Crowdin API or CLI to get the source and translated files in the Android XML and Strings formats. For engineers, it means they are no longer burdened with integrating the relevant texts into the codebase manually and that translators didn’t have to wait for the resource files to be exported from the codebase to work on the content.

Start Building Interfaces That Work Everywhere

The guidelines for user interface localization above should help you create inclusive digital experiences for the global audience with much less effort.

Use Crowdin plugins to start adapting these practices to your localization workflows right away. To get started, register a Crowdin account and connect one of the plugins to the localization project under it.