How to Translate Your Design to a Different Language

Published in

Geek Culture

5 min readApr 27, 2021

You must have noticed some applications would change the currency type, date and time formats, and even the language to your local region. This is Localisation. Supporting localisation in your design process would be a complex task but it is important to consider it from the initial phase of your process. You can gain huge success when your app is supported by different regions and countries. The audience that you have can be widely increased when localization is integrated with your design.

What is localisation?

Localisation is the process of adapting your product or service to a local region’s language, formats, and other attributes to meet the local’s requirements. In addition to this, localisation takes into account the region’s culture as well. This makes the user comfortable with the application when you reflect upon their local culture. When you’re doing so, make sure to consider the following points:

Ensure that the photographs and illustrations used are culturally appropriate.
Units of measurement are the same as that of the locality.
Date, time and currency formats are precise.
The translated information is clear and easy to understand.

Source: What is Localisation? by Spectra

Dynamic width and height

You must ensure to have all your assets in Auto Layout mode from the beginning of the design. This will save you a lot of time and effort when you integrate Localisation features into your design later on. This feature will automatically adjust the container of the text when you translate the text according to the region.

Global Fonts

At the initial phase of the design, one thing you always think about is Typography. Users won’t necessarily check for the font type you use, but they will definitely notice if there is a special character in their preferred language that is missing. Therefore, when selecting a font for your product, it is best to select a font that will provide multilingual support. You can refer to Google Noto Fonts for assistance with multilingual font support. You must also remember that the font size may differ from each language. One way to overcome this issue is to define different stylesheets for different languages.

Date and time formats

Date and Time format may seem unimportant to anyone because we never think of what format each and every country uses. But this small fact can make a huge difference for a user. Within the locality, the user is used to the format they follow. But if the product he/she uses has a different format, it will still get confusing for them to use it. Consider the date picker for an example, the US follows the format; MM-DD-YYYY while in Europe it is; DD-MM-YYYY. It may not seem important at a glance, but in the long run, thinking about these smallest details will provide a huge impact.

Source: Localization of Date, Time and Currency Formats by Verbatim, Using Locale Categories for Localization by Oracle

RTL support (Layout)

Another important fact you must think about is the layout a user reads their content from. Most languages are read from left to right but in Arabic, Hebrew, or Urdu, this is the complete opposite. If you straight away translate the content of one of these languages, it will be useless. Therefore, your entire layout and content must be redesigned that supports the right to left read languages.

Source: Right-to-left script by Wikipedia, Bidirectionality by Material Design

Culture

You might design an application with consistency all around the design. But think about the design if we localise it for the user’s cultural relevance? That will increase not only user experience but also market value. You can provide beautiful illustrations and images according to the festive seasons in the user’s region and this would make the user feel comfortable with the usage of the application.

Every small detail that you change in your design can impact the user in a big way. This can be considered a good and bad way both. Consider gestures and body language too when localising. One gesture might be harmless in one region and have completely opposite meaning in another. Therefore when using the graphical content, you must consider all factors possible.

Source: Importance of Culture in Localization by BinarySemantics

Translation vs Localisation

You might think that translation is the same as localisation. Although it seems like it should be the same, it isn’t!. Translating is the conversion of text from one language to another and this is an easier task than localisation because these don’t require any personal touch. Localisation is much more than that. This requires the designer to keep in mind even the local culture of the specific region when adding content. You must be respectful to the region that you’re targeting.

Source: Translation vs Localization: Is There a Difference? by Stephanie Harris

Plugins that can be used with Figma

Lokalise — Plugin

Translator — Plugin

Conclusion

You might dismiss the effort of localising your product but this is an important fact that you must consider. When you’re designing, you design with the user in your mind. So what if this user is from a different region? You must design your product according to his/her locality requirements, right? This process can get time-consuming and complex but after you are done, it’s rewarding to know that you’re including users all around the globe. Your users must be your main priority, not your product.