2025年11月26日

多言語対応でFigmaのParrotプラグインを使ってみた

Figma

Parrot

多言語対応

こんにちは、デザイナーの和田です。

先日、多言語対応が必要なプロジェクトがあり、FigmaのParrotプラグイン（無料）を使用しました。
Parrotプラグインは、Figmaでテキストの多言語対応や一括置換を行うことができるプラグインになります。

なぜ、このプラグインを使用したかというと、翻訳データをi18next形式のJSONで書き出すことが可能なこと。そして、翻訳データに変数を仕込めるという点が評価されたからです。
これらができることで、Figma（デザイン）から実装への流れをスムーズにした感じです。
あと、無料というのも決定した要因の一つです。

ただ、無料ということもあって、「えっ？」と思うところもありましたので、それらも共有できたらと思っています。

ということで、今回は、Parrotプラグインの基本的な使い方と、実際に使って感じた良い点や「えっ？」と思うところとその対処法などを書いていこうと思います。
これから導入しようと考えている方の参考になれれば幸いです。

Parrotプラグインのセットアップ

まずは、デザインしているFigmaファイルにParrotプラグインをインストールして実行してください。
そうすると最初に「Set up your file」が表示されますので、こちらでセットアップを行ないます。

最初に、「Reference Language」で基本の言語を選択します。ここでは日本語をベースにデザインしているので「Japanese - ja (日本語)」を選択します。
次に「Target Language」で翻訳後の言語を選択します。ここでは「English - en (English)」を選択します。
翻訳する言語は複数選択することができます。
また、セットアップ後に翻訳する言語を増やすこともできますので、途中で対応する言語が増えても問題なさそうです。
最後に「Finish Setup」ボタンをクリックでセットアップが完了します。

Parrotウインドウの説明

Parrotウインドウには、「Layers」「Massages」「Export」「Setup」の4つのタブがあります。

Layersタブ

こちらのタブが、メインで作業する場所になります。
本タブでは、選択したフレーム内にあるテキストを一覧で表示し、翻訳キーと翻訳データの登録・編集を行うページになります。
ここで、テキストごとに翻訳キーを割り当てるという地道な作業をしていくことになります。

※ 翻訳キー名の編集はできません。

左の列：Figmaのレイヤー名
中央の列：翻訳キーを登録するエリア
右の列：選択されたフレーム内にあるテキストデータが表示されます。翻訳キーを登録すると、このテキストデータが翻訳データとして登録されます。

Messagesタブ

こちらのタブでは、登録した翻訳キーが一覧として表示されます。

ここで、登録された日本語や英語などの翻訳データを編集したり、翻訳キーを削除することができます。

Exportタブ

こちらのタブでは、登録した翻訳キーと翻訳データを書き出すページになります。
画面右上の「Export Target」から書き出すフォーマットを選べます。
書き出せる形式は以下の３つになります。

・i18next - json format
・Android - Resource XML
・iOS - .strings File

Setupタブ

こちらは、本ブログの最初に動画を載せているので割愛します。

翻訳キーの登録と翻訳方法

先のタブの紹介でも書きましたが、翻訳キーの登録はLayersタブで行います。

翻訳キー登録エリアを選択して、テキストデータに合わせた翻訳キーを登録していきます。

会社名の英語表記や日付など、翻訳したくないテキストには「Do not translate this layer...」を選択してください。下の例では、「Asial Corporation」を翻訳しない設定にしています。

また、すでに登録されている翻訳キーから選択したい場合は、「Text matches」エリアにリコメンドが表示されますので、そこから選ぶことができます。

ひと通り登録し終えたら、ウインドウ右上の「Japanese - Ja」から「English - en」を選択すると翻訳が開始されます。それで、「English - en」の表示になったら翻訳終了になります。以下のログイン画面では翻訳対象が少ないため一瞬で翻訳が完了していますが、要素が多い一覧画面などになると、一画面の翻訳に3分以上かかる場合がありますのでお気をつけください。

翻訳データの編集方法

翻訳データは、Figma上のテキストもしくはParrotウインドウで編集することができます。

ただし、編集した後はすでに登録されているデータに変更を加えないといけませんので、その場合はParrotウインドウで表示される「Use」ボタンをクリックしてください。また、編集したけど、登録されているデータに戻したい場合は「Revert」ボタンをクリックしてください。

変数の登録方法

Parrotプラグインでは、翻訳データに変数を設定することが可能です。

変数を設定する場合は、以下の要領でできます。

該当するテキスト（ここでは、「高橋優子」と「メールアドレス」）をParrotウインドウで選択
ツールバーが表示されますので、「<x>」をクリック
変数名を入力してenterキー

Parrotプラグインの良い点

翻訳データを一括管理できる：Figma上の文言をバラバラに管理する必要がなく、翻訳キーで統一できるため表記揺れなどが少なくなる。
操作が簡単：難しい操作をしなくても多言語対応ができる。
デザイナー・エンジニアの連携が取りやすい：JSONでの書き出しや変数の設定などができる。
Figmaコンポーネントと相性が良い：1つの翻訳キーを複数画面で使い回せるため、Figmaコンポーネントとの相性が良く、変更が全体に自動反映される。

Parrotプラグインの「えっ？」な点

翻訳キー名を編集できない：翻訳キー名を変更したい時やタイポした時などの対応がきつかったです。このような場合は、結局新しい翻訳キーを作成して、既存のテキストにキーの振り直しが発生しました。
→対処法：画面に多く表示されるテキストは、なるべくFigmaのコンポーネントにして、そのコンポーネントに翻訳キー割り当て、キーの振り直しを極力少なくする。

翻訳キーが多くなってくるとMessagesの一覧に全てのキーが表示されない：Messagesで翻訳データの編集や削除ができない場合がある。
→対処法：翻訳キーを少なくする...

要素が多いページでは翻訳に時間がかかる：一覧画面など要素が多い画面は翻訳に3分以上かかってしまう。
→対処法：都度翻訳するのではなく、翻訳された画面をコピーして、変更がある箇所だけを修正する。例えば、ホバーのイメージやトーストを表示した画面など。

一覧画面などの要素が多いページは翻訳版の作成に時間がかかる：1画面の翻訳に3分以上かかる場合がある。
→対処法：こちらも、なるべく翻訳画面をコピーして、変更がある箇所だけを修正する。

文章を翻訳すると末尾の「.(ピリオド)」が2つ表示される（「. . 」となる場）：
→対処法：これは、手動で直すしかありませんでした。