menu

Product Design

Are you a product designer working in tech? This community is for you.

Channels
Team

How do you handle i18n? (Internationalization)

December 11, 2019 at 7:54pm

How do you handle i18n? (Internationalization)

December 11, 2019 at 7:54pm (Edited 4 months ago)

Hi there!

I'm currently working in a Product (Android & iOs) that supports 2 languages: English and Spanish. We are having some problems, that happen in different parts of the process, but are all kinda related.

Some of those problems are:

- We are duplicating screens in Figma, which means double work. We have duplicated artboards in the files, so if something changes or if we are doing a handoff, we have to duplicate our efforts, and also this is prone to error as there are more moving parts.

- If something changes after handoff, is difficult/painful to remember to change the Figma files.

- It is not clear what is the final source of truth regarding copy. Is the truth in the Figma file? Or is it in what the app has in Production? Or is it in the Pull Request that someone created to change a letter? Who knows! ¯_(ツ)_/¯

- EXTRA PROBLEM: Android and iOs handle their strings differently, and that is a major pain in handoffs.

I did some research and I've seen a lot of different takes: some use Google Sheets, some use paid tools, others made internal tools. But I couldn't find a satisfactory answer, or how those tools would work in a Workflow that has Figma on it.

How do you handle this in your workflow? What tools are you using to minimize this pains?

Thanks a lot!


December 11, 2019 at 8:08pm

We have only English screens in Figma, and all the translations come from on online editor that supports versioning (tagging), we test the app in multiple languages using the latest version of the translations pulled from an online translations editor, then when publish to prod/staging, a latest version is tagged with the version number, and that exact revision is used for the deployed app.

like-fill
1
  • reply
  • like

December 18, 2019 at 7:04pm

BTW, I'm currently building yet another community-powered translations editor. If you decide to use it in your app, I may help with integration: https://helptranslate.com

  • reply
  • like

December 19, 2019 at 3:53pm

Design with Context in just one language best option is English. Then give the design to your dev team. They should add all the wordings from your design at the UI of each platform. Then they should export A json file for english. After that someone should translate this json to another language. You can use many services for this task lokalise or phraseapp.

  • reply
  • like

At design level you should try for each element to give enough space based on the ratio of the length of these languages. If you need to design for a global product an easy trick is to give a full length in each element

  • reply
  • like

Even if you see a lot of plugins to upload from sketch languages this will never work well. There are a lot of plugins to translate but also not work well with nested symbols and they are only for dummy test

  • reply
  • like

December 20, 2019 at 12:14pm

We designed our product Emvi in Figma using just one language and added i18n later in our application. I would recommend to make the language files the single source of truth and get back to Figma if something doesn't fit. So that you don't have to to do the work twice.

  • reply
  • like