Figma Translate Plugin: デザイン翻訳を速く進める方法

なぜデザイン内翻訳がチームにとって重要か

ローカリゼーションは従来、引き継ぎの多いプロセスでした。デザイナーが画面をエクスポートしたりテキストをスプレッドシートにコピーし、翻訳者に送って数日後に返却ファイルを受け取り、各文字列を手動でデザインツールに貼り直す。この往復のたびにテキストの配置ミス、スペーシング崩れ、ソースファイルで既に更新された古い文言を使うリスクが生じます。

翻訳を Figma 内で直接行うと、これらの問題の多くが軽減されます。翻訳者やプラグインは各文字列の周囲の視覚コンテキストを正確に見ることができます。ボタンラベルはスプレッドシートの一セルではなく、アイコンの横にあり、固定幅のコンテナ内にあり、垂直スペースが限られた画面上に存在します。

コンテキストの喪失は、翻訳されたインターフェースが不自然に感じられる最大の理由のひとつです。「Set」のような単語は画面によって名詞にも動詞にもなります。翻訳者がデザインファイル内で作業すると、どの要素がその文字列を使い、周囲の UI とどう関連するかが見えるため、曖昧さが減ります。

レイアウトドリフトも外部翻訳ワークフローの隠れたコストです。ドイツ語の文字列は英語より約30%長くなることが多く、日本語は短くなる場合もありますが異なる行間が必要です。デザインに文字列を戻した後にこれらの違いに気づくと、レイアウト作業を二回行うことになります。

Figma 翻訳プラグインのセットアップ

Figma Community には複数の翻訳プラグインがあります。Google Translate や DeepL などの機械翻訳 API を使うものもあれば、Crowdin、Lokalise、Phrase などの翻訳管理システムに接続するものもあります。正しい選択は精度要件、予算、翻訳メモリやグロッサリー機能の必要性によって決まります。

プラグインをインストールするには、Figma を開き Community タブで名前を検索します。Install をクリックすると、右クリックメニューの Plugins に表示されます。ほとんどの翻訳プラグインは翻訳サービスの API キーが必要です。プラグイン内の設定パネルでキーを貼り付け、デフォルトのソース言語とターゲット言語を設定します。

チーム全体の一貫性を保つため、プラグインを Figma 組織に追加して全デザイナーが同じ翻訳エンジンとグロッサリーを使えるようにしましょう。共有グロッサリーをサポートするプラグインもあり、製品用語やブランド名が全画面・全プロジェクトで統一されます。

• 翻訳プロバイダに合った翻訳プラグインを Figma Community で検索する。
• プラグインをインストールし、設定パネルで API キーを追加する。
• デフォルトのソース言語（通常は英語）を設定する。
• Figma for Teams や Enterprise を使っている場合は共有ライブラリに公開する。
• 機械翻訳すべきでない製品用語やブランド名の共有グロッサリーを作成する。

翻訳ワークフローのステップ

Figma での一般的な翻訳ワークフローは、翻訳したいレイヤーの選択から始まります。個々のテキストレイヤー、フレーム全体、またはページ全体を選択できます。ほとんどのプラグインは選択範囲内のすべてのテキストノードを再帰的に検出します。

コンテンツを選択したら、プラグインを開いてターゲット言語を選びます。複数言語に同時翻訳でき、各ロケール用に別のページやフレームを作成するプラグインもあります。元のテキストを残したい場合は、プラグイン実行前にフレームを複製してください。

バッチ操作こそプラグインが真に時間を節約する場面です。40個のデータラベル、12個のメニュー項目、複数のツールチップがあるダッシュボードを想像してください。スプレッドシートで一つずつ翻訳すれば午後いっぱいかかりますが、プラグインなら1分以内にフレーム全体を処理できます。

プラグイン完了後、各画面を順番に確認します。コンテナからはみ出した文字列、ラベルが2行になったボタン、機械翻訳が誤った用語を探します。Figma コメントやカラーアノテーションで問題を記録しましょう。

• 翻訳するコンテンツ量に応じてレイヤー、フレーム、またはページ全体を選択する。
• 元の言語バージョンを残したい場合は翻訳前にフレームを複製する。
• バッチモードで選択範囲内のすべてのテキストノードを一括翻訳する。
• 翻訳後、すべての画面でオーバーフロー、切り詰め、用語の誤りを確認する。
• Figma コメントを使って人間のレビューや修正が必要な文字列にフラグを立てる。

翻訳後のレイアウト管理

テキスト拡張は翻訳後の最も一般的なレイアウト問題です。英語は比較的コンパクトな言語です。ドイツ語、フランス語、ポルトガル語への翻訳は文字列長を20〜40%増やすことが多いです。日本語や中国語のように文字数は減っても、幅の広いグリフや異なる行間が必要になることもあります。

ここで Figma のオートレイアウトが力を発揮します。コンポーネントが hug-contents や fill-container のオートレイアウトを使っていれば、多くの拡張問題は自動的に解決されます。hug-contents のボタンは手動リサイズなしで長いドイツ語ラベルに合わせて広がります。

アラビア語やヘブライ語のような右から左の言語は、テキスト翻訳以上の対応が必要です。レイアウト全体をミラーリングする必要があるかもしれません。左側のナビゲーションは右に移動し、方向を示すアイコンは反転が必要です。一部のプラグインは RTL ミラーリングを自動処理しますが、すべての要素をミラーすべきではないため手動確認は必要です。

行間とフォントフォールバックも重要です。デザインシステムが CJK 文字やキリル文字を含まないラテン書体を使っている場合、Figma はシステムフォントにフォールバックします。フォールバックフォントはメトリクスが異なる可能性があり、垂直方向の整列やアイコンとテキストの間隔に影響します。

• ボタンやタグには hug-contents のオートレイアウトを使い、長い翻訳にも対応できるようにする。
• テキストコンテナは fill-container 幅と auto height に設定し、水平方向のオーバーフローを防ぐ。
• テキスト拡張と収縮の両極端を代表するドイツ語と日本語で早期にテスト翻訳を行う。
• RTL 言語ではレイアウトをミラーしつつ、再生ボタンなどのユニバーサルアイコンは元の向きを保つ。
• CJK やキリル文字のロケールに切り替えてフォントフォールバックの挙動を確認する。

多言語デザインのベストプラクティス

最初から複数言語をサポートするデザインシステムを構築することは、すべて英語前提のシステムにローカリゼーションを後付けするよりはるかに容易です。最も重要な原則はコンテンツと構造の分離です。Figma コンポーネントはレイアウト、スペーシング、視覚スタイルを定義し、中のテキストは長さや方向が変わり得る変数として扱うべきです。

コンポーネントバリアントはロケール固有の違いを処理する強力な方法です。コンパクトな言語用のバリアントと冗長な言語用のバリアントを異なるパディングやフォントサイズで作成できます。ナビゲーションコンポーネントには LTR と RTL のバリアントを用意できます。

文字列の外部化はソフトウェアエンジニアリングから借りた手法で、デザインでもうまく機能します。各コンポーネントインスタンスにテキストをハードコードする代わりに、JSON ファイルやスプレッドシートなどの構造化された形式で文字列を保存し、プラグインで Figma に取り込みます。

最後に、翻訳パスのたびに実行する QA チェックリストを作成しましょう。チェックリストは切り詰め、オーバーフロー、フォントフォールバック、RTL ミラーリング、日付・数値フォーマット、未翻訳のプレースホルダー、文化的に敏感な画像をカバーすべきです。

• 初日から可変長テキストを念頭にコンポーネントを設計する。
• ナビゲーション、カード、リストアイテム用に LTR と RTL のバリアントを作成する。
• UI 文字列を JSON や CSV で外部に保存し、コンテンツプラグインで Figma に同期する。
• 翻訳パスのたびに切り詰め、フォールバックフォント、フォーマット、文化的感度をカバーするローカリゼーション QA チェックリストを実行する。
• ロケール固有のスペーシングとフォントサイズのオーバーライドをデザインシステムに文書化する。

プラグインでは不十分な場合

翻訳プラグインはスピードと利便性に優れていますが、限界があります。機械翻訳は短い UI 文字列、ボタンラベル、ナビゲーション項目にはうまく機能しますが、マーケティングコピー、法的テキスト、トーンやニュアンス、規制上の正確さが重要なコンテンツでは困難です。

複雑なローカリゼーションニーズには、Figma を翻訳管理システムと統合することを検討しましょう。Crowdin、Lokalise、Phrase は文字列をプロの翻訳者に送り、レビュー済み翻訳をデザインファイルに戻す Figma プラグインを提供しています。

CMS 統合もプラグインだけでは不十分なシナリオです。Web サイトやアプリがヘッドレス CMS からコンテンツを取得する場合、デザインファイルと CMS は同期が必要です。CMS を更新せずに Figma で文字列を翻訳すると、デザインと実際の製品表示にギャップが生じます。

最後に、プロの翻訳者を雇うべきタイミングを知りましょう。ネイティブスピーカーは文化的ニュアンス、慣用表現、文脈依存の意味を捉えます。最良のワークフローは初回パスに機械翻訳、品質レビューに人間、レイアウト確認にデザインレビューを使います。

• ボタンラベルやメニュー項目のような短く文脈の明確な UI 文字列には機械翻訳を使う。
• マーケティングコピー、法的テキスト、オンボーディングフローはプロの翻訳者に依頼する。
• 3つ以上のターゲット言語があるプロジェクトでは Figma を翻訳管理システムに接続する。
• CMS をコンテンツの唯一の信頼源とし、Figma を視覚的なプレビューレイヤーとして使う。
• 初回翻訳が機械生成でも、ローンチ前にすべてのロケールでネイティブスピーカーのレビューパスを予算化する。