Internationalization testing with your Figma design

Localization of a web application or mobile application has several aspects. First you have to make sure that your application is well-internationalized. It is important that your developers externalize all texts in language resource files. Secondly you want to know if your user interface is ready for multiple languages. Not all languages are alike. You need to know if both ‘short’ and ‘longer’ languages fit in your designs.

Designing a user interface is happening more and more often in Figma. It is a great tool to prototype and to collaborate with other designers. Moreover, Figma is also used to prepare a project for developers. In Figma, designers specify every element. Developers can export assets from Figma and use them in their code. You can export all the texts of the (web) application from Figma.

Test your design for longer languages

But how will you make sure that your UI Design is ready for all languages that your app will be published with? There are plenty of plugins available for Figma that let you import and export the texts in your design. This means you can export the primary language that the designer used as a JSON file, have that translated and import a JSON file with the new language. You can repeat this process until you have imported all languages that you need and have your design adapted for every issue that occurred. Examples of adaptations are increasing the fixed-width of a button, or adapting the design to prevent unwanted line breaks or overflows.

Rigi has a feature that would make this process multiple times faster. Rigi is a Localization Management Platform to localize existing applications with visual context. But if the app does not exist yet, and the visual context is right there available in Figma, you can use that as a good alternative.

Example

In this case you can can export the source language from Figma and simulate a longer translation. A longer translation may include freely chosen characters, like ABC or some Japanese characters. If you also enclose the simulated text in curly brackets, this will help to recognize hardcoded or overflowing texts. A string like “Sign in” then for example becomes “{=Sign In 電源供給電 源供給=}”. You will instantly spot the problematic areas in your application when you load the simulated strings in Figma. There is no need to import all target languages one by one, which saves your developers tons of time.

From now on, your designers can be your gatekeepers to prevent broken interfaces as a consequence of newly added languages. Preventing internationalization issues in an early stage will give entire teams a huge efficiency gain. Now you can finally live up to the age old adage: Release early and often!