Advance configure
Full project tutorial
Release Notes
Localization allows you to setup the language that user can use on project which be able to selected the default and available language that user can select localization for the ease of use in your product.
Current language support are English, Japanese, German, Spanish, French, and Italian.
To setup the localizations, you can select the default localization and available localizations per when you create a new project image below
To update the localization, click on the “Localizations” menu ****of the left menu and click “Language settings” button, The Edit Localization Modal will open immediately
When you finish the update the localization, Click “Save Changes” button
Once the update is successful, It will automatically update the the Localization Record Table on the right side of the localization page
Go to web editor
Current language is displayed on the top center.
You can click on it and change the language the editor will display
You can add or remove languages by going to the Localizations menu and clicking Language Settings
Add a Text component (other components support localization as well)
Click on the Text element you just added and start typing a word/sentence
After you are done typing the word/sentence press Enter or click outside the text input to create the localization. A localization key should appear below the input.
If you have two or more languages added, the translation button will appear on the right side of the input. If you click on it, it will open a pop where you can add translations for the current languages the project supports.
If you decide you don’t need a localization anymore you can remove by click the remove button on the bottom right corner.
If you already created a localization and need to use the same word/sentence in other parts of the app you can reuse the localization instead of creating a new one every time.
Let’s say I have a Text component with the a Home localization and I need to add a Button component that will have the same text.
Add a Button element
While the Button element is selected, on the Text Content field click the Set from variable option
This will open a popup where you should choose Localizations as source and the choose the Home localization in our case. Finally click the Save button.
Now those two Text and Button elements shared the same localization, this means if you update the text in one of those components it will be updated in both places, they also share all the translations in other languages.
Current recommended flow after a successful Figma import is the following.
Text , Button and Input components present, click on the Text Content input and press enter to add the localization. You shouldn’t need to write any text since it should be already there, just press enter or click outside of the input.It is recommend to update FE localizations in the Web Editor instead of the Localizations menu, specially if you use the Figma import feature.
Backend localizations are added automatically, cannot be removed only updated.
You can update the backend localizations in two places:
Localizations table
Database column popup
Notes: Localizations feature is not currently available in the mobile editor.
← Previous
Add link here
Next →
Add link here
On this page