Localizations

Creating localizations is usually a very tedious process - from creating the source text files to identifying what all should be localized. However, the most painful process is to actually test the localizations. Not only each language is different, meaning that some texts might render improperly, but each translated text is usually of different length - leading to huge problems with layout and so on.

Fortunately, as with every prototyping options, this too is backed by a production code and can be simulated right within the editor. Supernova allows you to do dynamically add languages and test them just by selecting the different language option.

Open the localization settings under the `Top Menu > Project > Localizations`Open the localization settings under the `Top Menu > Project > Localizations`

Open the localization settings under the Top Menu > Project > Localizations

Probably the most time-saving feature though is the option to automatically localize the app to 30 languages. While the translations are not flawless (human touch is required to make it feel and sound good), they are good enough to provide a solid starting point that just needs review.

Adding a language

In order to add localization for a different language, first, make sure localizations are enabled for the project. You do that by checking the option to Enable Localizations. When localizations are enabled, the entire app is immediately localized to Base Language using the texts provided in the original design.

To add additional languages, simply click on the + button on the right and select your desired language. This adds another row to the list of app languages - saying that none of the localization strings are translated. Next, we need to do that.

🚧

Base Language

Only the English language can be set as a base language for now. We are using Google Neural Network for the automatic translation and from our testing, only by using English we are able to provide translations of sufficient quality. We'll be revisiting the topic on a regular basis and see if we can improve this going forward.

Usually, this should not be a problem though, because apps that do require localizations are usually English-based anyway.

Localizing content

There are 2 ways how to localize the content - manual and automatic. We suggest you use a combination of both, automatic localization option to prepare the content for you, and then manual to correct what doesn't sound right.

Translating manually

Some of the components such as buttons or labels can contain texts - those texts are extracted by Supernova and used as base key-pairs to be translated. When you select the component with localization option enabled, a new panel is available to you. Write the text there and the rest is done automatically!

Localization in live mode - testing with English languageLocalization in live mode - testing with English language

Localization in live mode - testing with English language

Localization in live mode - testing with Czech languageLocalization in live mode - testing with Czech language

Localization in live mode - testing with Czech language

Translating automatically

In order to make the process as seamless as possible, we've added a second option - smart translation engine that is using Google Neural Translation Engine. Supernova is able to detect all the localization pieces automatically and run them through the network, giving you very close localization to all supported languages.

To do that, simply go to settings again and Enable Automatic Localization. Once enabled, you'll be asked to provide Google API key - the service is paid (but costs next to nothing even for the largest projects). You can learn about the Google API keys here. One the key has been validated by Supernova, click on the "Translate" option and watch the magic happen. You can then test the localizations the same way as when doing it manually.