Localization

Resources

There are various videos available on the Apple website that document the process of localisation.

What is localisation?

Localisation refers to adapting your content into local languages as well as cultures. It's not simply translating the text elements into said language but also reflecting the local culture in your website. This includes making sure of the following:

• Ensuring that images and illustration are culturally appropriate
• Units of measurement are the same as that of the locality
• Date, time and currency formats are accurate
• The translated data is clear and easily understandable

Dynamic width and height

It is important that you can setup your assets in Auto Layout from the beginning so you can incorporate localization features to your design later. Adding Auto Layout to the texts in your UI will help you adapt the containers to another language.

Global Fonts

While selecting a font for your application, it's best to select fonts that provide multi-lingual support. You've to also keep in mind that font sizes may vary from language to language. One solution for this would be to define different stylesheets for different languages.

Date and time formats

These might seem trivial issues but they can make all the difference. Take date pickers as an example, date pickers in the US follow the MM-DD-YYYY format while the ones in Europe follow the DD-MM-YYYY format. Even though it might not seem very obvious to us, users are used to a certain format.

Layout

Most languages are read from left to right but that is not the case for Arabic. Simply adding the translated content would be useless here. You'll need to take into consideration the layout of the page when it comes to localization.

Local Culture

While your app and product page should each provide a consistent experience across all markets, it’s sometimes valuable to refine certain elements for cultural relevance.

Translation vs Localisation

Although it might seem like it, please keep in mind that translation and localisation are NOT equivalent to each other. Merely translating the content to another language is perfect when you're talking about documentations as most of the time, these don't require a personal touch but localisation is so much more than that. It requires keeping in mind the local culture and adding content that is respectful to the locality you're targeting.

Flags of the world

The Flags of the World plugin gives you the ability to add the flag of any country to your design project. You can download it from the plugins section in Figma or head over to this link.

Lokalise

Lokalise is a translation manager app that works seamlessly with Figma, Sketch and Adobe XD. Working with it is very easy. You can select the texts you want to translate from your layout and then, open the plugin. Lokalise will copy the texts and will organize them in their platform, where you or your team will be able to translate each of the words in multiple languages.

Translate your UI content

For this exercise, we will use the Translator plugin for Figma. Let's go to Community, then to plugins and look for the Translator plugin and install it.

Now, go to our exercise file in Figma. Select the title and the text that we want to translate. For this example, we will translate our text from English to Spanish. Go to the tab bar and click on Plugin < Translator < Spanish.

After a couple of seconds you will see that all our selected texts will be translated to Spanish. Make sure to fix some of the text spaces in case there are some changes.

Conclusion

Designing user interfaces while keeping localisation in mind might be a time consuming process but in the end it's rewarding in terms of making your users across the globe feel included. Since, you've already designed a flexible UI that is easily adaptable, it'll save you from redesigning when you branch out.