How to develop the plugin deal with i18n in Figma Plugin?

Hi, guys!

Where are you live? L.A? Ottawa? Melbourne? Am I? I'm live in Tokyo.

As many of you know, it's very difficult to handle internationalization. In particular, units of currency and inches, centimeters are very tricky.
I have traveled to U.S and Cebu, Hanoi, HongKong several times, and every time I arrive in a country and see the expiration date on yogurt at the airport kiosk, my head crashes. And, If I were to move from Seattle to Vancouver, it would be unbelievable to me as a Japanese person that the notation would be different even though we are in the same English-speaking country.(Actually, it's not.)

Of course, in the current web world, there are i18n libraries in Javascript and other server side languages, so there is nothing wrong with converting from unixtime to your local time. Yes, within the web world... This is determined based on the value of the browser's "window.navigator.language", but unfortunately, no function or variable to obtain such an environment variable was found in the API of Figma Design's Plugin.

But it is engineers who confront such problems, isn't it? In this article, I will write about my own solution.

Retrieve from UI screen.

I've written in conclusion, but this is the way to do it. (Of course, a few tips are necessary, so please read to the end if you can.)

Figma Plugin can be developed in two types with or without UI screen.

What?" You want to make a plugin with no UI that supports internationalization?" I was the same way. So this title.
The Figma plug-in UI has a mode in which the UI is not displayed.

Oh, you who think that because I am Japanese, my English is even weirder than it originally was, look at the sample below.

figma.showUI(__html__,{width:0,height:0, title:""})
figma.ui.hide()

Yes, this is HIDE mode!

Let's make the sample a little more clear.

When internationalizing an alert.

Normally, it is recommended to use 'Figma.notify' instead of 'Alert' in Javascript when warning users in Figma. However, as mentioned above, Figma API does not have a way to obtain user language information, so internationalization is supported by using hide mode and combining it with HTML on the UI side.

1. Append '"ui":"ui.html",' to manifest.json.

{
  "name": "AlertSample",
  "id": "XXXXXXXXXXXXXXXX",
  "api": "1.0.0",
  "main": "code.js",
  "ui":"ui.html",
  "editorType": [
    "figma"
  ]
}

1. Add function to call ui.html from code.js. (This is a file that runs in the background.)

function showAlert(message) {
    figma.showUI(__html__,{width:0,height:0, title:""})
    figma.ui.hide()
    figma.ui.postMessage({type:"alert", message:message})
}

main(){
    //Figma.notify("Hi!")
    showAlert({en:"Hi!",es:"Hola!"})
}

main()

1. ui.html as shown below.

<script>
onmessage = (event) => {
  if (event.data.pluginMessage.type === "alert"){
    let massage = event.data.pluginMessage.message.en
    if (window.navigator.language == "es"){
      massage = event.data.pluginMessage.message.es
    }
    alert(massage)
  }
}
</script>

It's easy. But this still has bugs. The plugin does not disappear when the alert is closed. Adding "figma.closePlugin()" to code.js will exit without an alert, so this is also not cool.

"Then what should I do?"

OK! Go back to code.js and close it again.

Final Code

function showAlert(message) {
    figma.showUI(__html__,{width:0,height:0, title:""})
    figma.ui.hide()
    figma.ui.postMessage({type:"alert", message:message})
}

main(){
    //Figma.notify("Hi!")
    showAlert({en:"Hi!",es:"Hola!"})
}

main()

figma.ui.onmessage = (msg) => {
    if (msg.kind === "exit"){
        figma.closePlugin()
        return
    }
}

<script>
onmessage = (event) => {
  if (event.data.pluginMessage.type === "alert"){
    let massage = event.data.pluginMessage.message.en
    if (window.navigator.language == "es"){
      massage = event.data.pluginMessage.message.es
    }
    alert(massage)
    parent.postMessage({ pluginMessage: { kind: 'exit', type:""} }, '*')
    return
  }
}
</script>

Yes, this way we could easily support internationalization. The sample code is in Javascript and does not use the i18n library, but this method should make it easy to support multilingualization using json files, which are often used. (It is the same as using TypeScript.)

In addition to the alert, I can easily use things like window.confirm, which does not exist in the Figma API, to receive language as an argument from ui.html and process each language separately.

Sum up

I hope that the world will soon become a peaceful place where people can travel a lot.