Overview
You can preview how a design will look in one of the 35 languages supported by iOS by adjusting the Preview Controls of an Artboard or a Component.
To show you how to preview localizations in Judo, we’ve created a welcome screen for an app called Global Gains.
🔻 Download the starter Judo file to follow along.
In the starter file, you’ll find:
A Component labeled Global Gains
An Artboard labeled Spanish with an Instance of the Global Gains Component
In this tutorial, you’ll learn how to use the Preview Controls of an Artboard, and add and configure languages in the Translation Manager, so you can preview a design in multiple languages at the same time. By the end of this tutorial, you should end up with two more Artboards—one with the Global Gains screen translated in French, and the other in Arabic.
ℹ️ Need a refresher on Artboards, Components, and Properties? Check out this tutorial.
Add a Language
When you select a language from the Preview Control of an Artboard or a Component, your design will remain in English until you add the translations to the file. For example, if you change the Language to Spanish in the Preview Control, the design will still appear in English until you provide the Spanish translations.
To fix this, let’s first add Spanish to the Translation Manager. From the menu bar, open the Text menu and then click on Translations… To add Spanish to the Translation Manager, click on the globe icon and select Spanish from the menu.
Add Translations
Once you’ve added a language in the Translation Manager, you can either double click on each empty cell to manually add in a translation, or click on the cloud icon to get automatic translations from Google.
Remember how we had set the Language Preview Control of the Artboard to Spanish on the canvas? Since we just added in the translations, the design on the canvas now appears in Spanish.
Now you can see how the screen in Spanish looks in comparison to the original English version.
⬇ Note
If you have already manually filled in the translation for a Key, clicking on the cloud icon will only generate translations for empty cells.
Edit Translations
If you’d like to edit a translation that you had manually written or had generated by Google, you can double click on the cell with the translation and make adjustments.
⬇ Note
If you add any new Text layers or edit any existing ones, you will have to go back to the Translation Manager to update the Key translations. You can click on the cloud icon again to generate new translations from the Google.
Add More Translations
You can add as many languages to your Judo file as you’d like. Since we’d also like to see how the screen looks in French and Arabic, let’s start by duplicating the Artboard labeled Spanish twice, and then rename one to French and the other to Arabic from the Layers panel.
Then, from the Inspector panel, change the Language Preview Control of the French Artboard to French, and the Arabic Artboard to Arabic.
Since we hadn’t added translations for both languages earlier in the Translation Manager, the designs reverted back to English. Let’s open the Translation Manager again from the Text menu and then click on the globe icon to add French and Arabic. Then, click on the cloud icon to get automatic translations from Google.
Since we've already added each language in the Preview Controls, each Artboard will be automatically translated on the canvas.
⬇ Note
Since Arabic is read right to left, the Leading edge of the screen is the right side, so all of the content will shift to the other edge of the screen.
Remove a Language
If you’d like to remove a language that you had inserted in the Translation Manager, click on the globe icon to open the list of languages and then click on the language that you’d like to remove to deselect it from the list.
SwiftUI Code Breakdown
Let’s open the Code Inspector to break down the code of one of the Artboards.
#Preview("Spanish") {
Global_Gains()
.environment(\.locale, Locale(identifier: "es"))
}
#Preview is used in SwiftUI development to show how views will look during development. In this case, it's specifying a preview with the title "Spanish" that contains the content within the braces. Global_Gains() instantiates a SwiftUI view called Global_Gains.
.environment(\\.locale, Locale(identifier: "es")) sets the environment for the preview. In this case, the preview is shown with the Spanish locale ("es"), which affects how localized content, such as dates and number formatting, is displayed in the preview.
Resources
🔻 Check out the finished Judo file!