多言語対応（i18n）をFigmaでスマートに管理する！言語ごとの文字数オーバーを防ぐ変数とオートレイアウトの組合わせ術
プロダクトをグローバル展開する際、フロントエンドエンジニアとプロダクトデザイナーを最も苦しめるのが「言語切り替え時のUI崩壊（Text Overflow / Layout Break）」です。
英語（EN）基準で美しく組まれたUIは、ドイツ語（DE）に切り替えた瞬間にテキスト長が1.5倍に膨れ上がってボタンを突き破り、日本語（JA）では不自然な改行を生み、アラビア語（AR）ではレイアウトの反転（RTL: Right-to-Left）によって壊滅します。そして多くの場合、これらは「実装フェーズに入ってから発覚し、デザインの手戻りが発生する」という最悪のボトルネックを生み出します。
本記事では、FigmaのVariables（変数モード）とAuto Layoutを極限まで使い倒し、デザイン段階で言語切り替えテストを一撃で完了させ、エンジニアリングの実装とシームレスに同期させる次世代のi18nプロトタイピング・アーキテクチャを解説します。
—
1. i18nプロトタイピングのアーキテクチャ設計：Variables Modeの活用
従来の「言語ごとに画面を複製（Copy & Paste）する」運用は即座に捨ててください。メンテナビリティが完全に破綻します。
FigmaのVariables（String変数）とModes（モード）を組み合わせることで、「単一のUIコンポーネントに対して、レイヤー/フレーム単位で言語モードを切り替える」データ駆動型デザインを構築します。
i18n Collectionの設計構造
Variablesには、UI文字列を管理するための専用コレクション（例: `i18n-strings`）を作成し、以下のようにモード（言語軸）を定義します。
| Variable Name (Key) | Mode: `en-US` (Default) | Mode: `ja-JP` | Mode: `de-DE` (Max Length) | Mode: `ar-SA` (RTL) |
| :— | :— | :— | :— | :— |
| `btn.checkout.label` | Proceed to Checkout | 購入手続きへ進む | Zur Kasse gehen | إتمام عملية الشراء |
| `dashboard.metric.users` | Active Users | アクティブユーザー | Aktive Benutzer | المستخدمون النشطون |
| `error.network.timeout` | Request timed out. | タイムアウトしました | Zeitüberschreitung… | انتهت مهلة الطلب |
親フレームの「Layer」