Figma i18n Plugin

A Figma plugin for designers to preview the design draft for a multilingual environment. By the way, it also applies to FigJam.

How to build and apply

You need to build the code runs on the main thread in a sandbox, and the code for UI via React.

Build main thread code

cd figma && pnpm install && npm run build-vite

Build UI

cd ui && pnpm install && npm run build-vite

Apply

Download desktop app and import plugin. The imported file is in the root directory of the project, named manifest.json.

How to use it

Step 1 Upload config file

The config file must be in JSON format as following.

{
  "zh-cn": {
    "id-1": "实验",
    "id-2": "事实",
    "id-3": "洞察力",
    "id-4": "机遇"
  },
  "en-us": {
    "id-1": "Experiments",
    "id-2": "Facts",
    "id-3": "Insights",
    "id-4": "Opportunties"
  },
  "ja-jp": {
    "id-1": "じっけん",
    "id-2": "じじつ",
    "id-3": "どーさつ",
    "id-4": "つくえ"
  }
}

This is a nested object with the first layer of the optional language and the second layer of the translation result of the string ID binding.

Step 2 Translate

Select the original language and dest language, and translate the words.

Step 3 Checkout report

Now, you can checkout the report via report.

Example

I prefer to use FigJam for the example, but this also applies to Figma.

Related articles

Vite+Figma打造设计师专属的i18n插件