This feature is available starting from Pro plan.
The Lokalise plugin for Adobe XD enables you to:
Push texts from Adobe XD to Lokalise.
Set key names (or use any of the patterns for automatic naming).
Create new keys and screenshots in Lokalise.
Match Adobe XD texts to existing Lokalise keys.
Pull translated texts from Lokalise to Adobe XD.
Seamlessly switch Adobe XD design language.
Getting started
Installation
Launch Adobe XD and open Plugins > Discover plugins.
Next, switch to the Browse tab, type "lokalise" into the search bar and press Enter.
Finally, click Install:
Activating the plugin
In order to activate the plugin, open your Adobe XD project, and then proceed to Plugins > Lokalise:
Setting up
After the plugin is activated, you'll need to authorize Adobe XD to access your Lokalise projects. In order to achieve that, click the Login button:
Next, press Connect:
Finally, press Allow access (you may also click Switch account to login on behalf of another Lokalise user).
Now Adobe XD can exchange data with Lokalise.
You will be asked to perform some initial setup:
Project — choose an existing Lokalise project or set "Create new project".
Name — this option will appear if you have chosen "Create new project" from the dropdown above. Enter a new project name here, and it will be created for you.
Language — the base language of your design in Adobe XD.
Platform — the platform that your translation keys should be linked to. Lokalise supports four platforms: Web, Android, iOS, and Other.
Default key naming pattern — choose how newly created translation keys should be named. Keys that are already present in your Lokalise project won't be affected.
Text styling enabled — if the text contains words with additional styling, the plugin will synchronize it properly. For example, if you have a text "Welcome to the app" (note that the word "app" is bold), the corresponding translation value on Lokalise will be
Welcome to the <b>app</b>.
Once you are ready, click Save. If you'll need to re-adjust these settings later, simply click on the Settings button. You will be presented with a similar dialog box, but the Project dropdown will be inactive. To connect to another project, you should first disconnect from the current one by pressing the Disconnect project button. This button is available in the Settings dialog as well:
Also you may logout by pressing the corresponding button and then login on behalf of a different Lokalise user:
Pushing translations to Lokalise
Once the initial setup is completed, you may choose the texts to export to Lokalise platform for further translation. To achieve that, simply click on the text element that you are interested in. Alternatively, hold the left mouse button and drag the selection choosing multiple elements. Finally, you can hold the Shift key and keep clicking on the elements to add them to selection:
Once the elements are selected, they will be listed in the Lokalise plugin pane. For each element you will see the key name that it will be assigned (following the naming pattern chosen in the Settings dialog) and the character limit (by default there's no limit). To change the key name, simply click on it, enter a new name, and then press Enter:
Also you can provide the character limit which will be also respected by Lokalise:
Note that if an element is already linked to a translation key on Lokalise, it cannot be edited and its name will be greyed out.
To link an element to an existing key in the chosen Lokalise project, click on the key icon:
The plugin will search automatically for translation keys that contain the same text as the chosen Adobe XD element. Choose the key and click Link:
Later you may click on the key icon again and click Unlink to break the link between the element and the key:
After selecting the elements, click the Push button which will upload your texts to Lokalise. You will be presented with a dialog to setup the uploading options:
Match texts to existing translations in Lokalise — if checked, strings in Adobe XD will be matched to the already existing translations in the Lokalise project.
Create missing keys in Lokalise — if checked, all missing keys will be created in the Lokalise project.
Link new duplicate texts to a single Lokalise key — if checked, duplicate texts in Adobe XD will be matched to a single Lokalise key. In other words, the plugin won't create separate translation keys for similar texts.
Tag newly created keys (comma separated) — if checked, you can add tags that will be assigned to the Lokalise keys.
Update Lokalise translations with modified texts — if checked, all already linked keys in Lokalise will be updated with the modified texts from Adobe XD.
Apply custom translation statuses to inserted translations — this option will be available only if your Lokalise project has custom translation statuses (CTS) enabled. Please note that CTS is available only starting from the Pro plan and above. When this option is checked, you may select custom translation statuses (one or more, depending on whether multiple CTS are permitted in your project) to add to newly created translations.
Apply custom translation statuses to updated translations — this option will be available only if CTS is enabled for your Lokalise project. When checked, you may choose custom translation statuses to add to the updated translations.
Update screenshots — if checked, screenshots in Lokalise will be created or updated with the new ones.
Push hidden elements — even if the chosen text elements are hidden in Figma, they will still be uploaded to Lokalise.
Once you are ready, press Confirm to start the uploading. After the process is completed, you will see a brief summary:
The keys will be available in your Lokalise project:
Now you may perform translations as usual. Please note that it is possible to add as many new languages to the project as needed: the list of languages will be synchronized for you automatically.
Screenshots
Learn more about managing screenshots and screenshots workflow.
Please note that your XD text elements must be grouped into artboards. If the texts were not added to any artboard, the screenshots won't be created!
Note that each key on Lokalise has an attached screenshot. Click on it to see where exactly the text is located:
You may further adjust the screenshots by navigating to the Screenshots page and choosing one of the elements:
Here you may check which keys this screenshot was attached to.
To adjust the key's area, choose Coordinates > Edit coordinates and then draw a new area:
Pulling translations from Lokalise
Once you have translated your texts on Lokalise, it's time to pull them back to Adobe XD. To achieve that, return to the Adobe XD project, choose the elements that you wish to update, and click Pull:
You will see a small reminder saying the texts pulled from Lokalise will replace the texts in Adobe XD. Click Confirm to start the pulling process.
To see how your design looks in another language, click the Switch language button:
Choose a language from the dropdown and click Confirm:
Your Adobe XD design will be translated to a chosen language:
To return to the base language, simply click the Switch language button again and choose another language.
Note that it is not needed to pull changes when you've performed initial (first-time) translation for a given language: you may press Change language right away.
Plural keys support
Our plugin supports plural keys as well. To make your key plural, simply click on the +plural text next to its name:
After the key is pushed to Lokalise, you'll see all its plural forms and will be able to switch between them:
After switching to a different language, the plural forms for the key will be updated accordingly.
Disabling/uninstalling the plugin
To uninstall or disable the plugin, open the main menu and proceed to Plugins > Manage plugins. Find Lokalise in the list, click on the dots next to its name, and choose either Disable or Uninstall.
This will not affect your existing translations, and you can install the plugin back any time.