How to Internationalize Your XD Plugin

Ash Ryan Arnwine
Mar 27 · 7 min read
The Adobe XD start screen in Japanese, Spanish, and Korean.

The repo for this example

Steps to follow

1. First things first: check your manifest

"languages": ["en", "ja"],
"uiEntryPoints": [
{
"type": "menu",
"label": {
"default": "[Sample] Internationalizing a plugin",
"ja": "[サンプル] プラグインを多言語対応する方法"
},
"commandId": "mainCommand"
}
]

2. Move your UI strings to a new file

<h1>My website</h1>
<h1>Internationalizing your XD plugin</h1>
<p>You can do this with a standard JavaScript object.</p>
<footer>
<button uxp-variant="primary" id="cancel-button">Cancel</button>
<button type="submit" uxp-variant="cta" id="ok-button">OK</button>
</footer>
{
"en": {
"h1": "Internationalizing your XD plugin",
"p": "You can do this with a standard JavaScript object.",
"cancelButton": "Cancel",
"okButton": "OK"
},
"ja": {
"h1": "",
"p": "",
"cancelButton": "",
"okButton": ""
}
}

3. Get the application language

const { appLanguage } = require("application");

4. Import your strings

const strings = require("./strings.json");
{
en: {/* strings */},
ja: {/* strings */}
}

5. Show local strings

<h1>${strings[appLanguage].h1}</h1>
<h1>${strings[appLanguage].h1}</h1>
<p>${strings[appLanguage].p}</p>
<footer>
<button uxp-variant="primary" id="cancel-button">
${strings[appLanguage].cancelButton}
</button>
<button type="submit" uxp-variant="cta" id="ok-button">
${strings[appLanguage].okButton}
</button>
</footer>

6. Have a default to fall back on

Plugin TypeError: Cannot read property 'h1' of undefined
<h1>${strings[appLanguage].h1}</h1>
const supportedLanguages = require("./manifest.json").languages;
const uiLang = supportedLanguages.includes(appLanguage)
? appLanguage
: supportedLanguages[0];
<h1>${strings[uiLang].h1}</h1>
<p>${strings[uiLang].p}</p>
<footer>
<button uxp-variant="primary" id="cancel-button">
${strings[uiLang].cancelButton}
</button>
<button type="submit" uxp-variant="cta" id="ok-button">
${strings[uiLang].okButton}
</button>
</footer>

Is your XD plugin ready to go global?


Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Ash Ryan Arnwine

Written by

Lead Technical Evangelist for the Adobe Creative Cloud Developer Ecosystem.

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.