Figmaにおける多言語対応（i18n）の極致：デザインシステムを「動的」に制御するエンジニアリング・アプローチ
グローバル展開するプロダクトにおいて、UIの多言語対応（i18n）を「手動でコピペしてレイアウト調整」しているようでは、プロフェッショナルとは呼べない。
英語から日本語へ、あるいはUIを破壊しかねないアラビア語（RTL）へと切り替えた瞬間、デザインは崩壊する。これを防ぐのはデザイナーの勘ではない。「変数（Variables）」と「オートレイアウト」、そして「APIによるデータパイプライン」を統合したアーキテクチャだ。
本稿では、Figmaを単なるお絵描きツールではなく、プロダクトの「フロントエンドの写し鏡」として運用するための、極限のワークフローを伝授する。
—
1. 概念設計：デザインシステムを「i18n対応」にするための前提
Figmaの「変数（Variables）」は、単なる色や数値の管理ツールではない。これは「UIの状態管理エンジン」である。
アプローチの核心
- Decoupling（疎結合）: 文言（Text Content）をデザインデータから切り離し、外部JSONで管理する。
- Constraint-based Layout: 文字数に応じて伸縮するオートレイアウトのルールを「最小・最大」で定義する。
2. 実装：変数とオートレイアウトの「防弾レイアウト」
まず、コンポーネントを作る前に、Figmaの「テキスト変数」と「オートレイアウト」を以下のように設計する。
1. Min-Width / Max-Widthの強制: オートレイアウト設定で、コンテナに対しては明示的な幅指定ではなく、`Min-width`を適用する。
2. Text Truncation（省略）の制御: 長すぎる言語向けに、あえて「クリッピング」を適用したバリアントを用意し、変数で切り替えられるようにする。
[Layout Strategy]
- Container: Flex (Auto-layout)
- Padding: 16px (Constant)
- Text Element: “Fill Container” (横幅追従)
- Constraint: “Truncate text” (Overflow: Ellipsis)
3. 自動化の深淵：CLIとAPIでFigmaを「コード化」する
FigmaのUIでポチポチと変数を更新するのはナンセンスだ。開発環境の `i18n.json` をそのままFigmaへ流し込むパイプラインを構築する。
独自ツール：`figma-i18n-sync` のアーキテクチャ
Figma API（REST API）を叩き、`POST /v1/files/:file_key/variables` を介してローカルのJSONを同期する。
/
- i18n JSONをFigmaのLocal Variablesへ流し込むためのトランスパイラの一部
/
const syncI18nToFigma = async (localeData) => {
// Figma API用のデータ構造に変換
const variables = Object.entries(localeData).map(([key, value]) => ({
name: `i18n/${key}`,
type: ‘STRING’,
value: value,
// ここでメタデータとして「文字数制限」を付与し、
// Figmaのプラグイン側で警告が出るように仕込む
description: `Max length: ${value.length 1.5}`
}));
await figmaApi.post(‘/variables’, { variables });
};
// 実行パイプライン：CI/CDのビルドプロセスでフックする
// npm run sync:design-tokens
パフォーマンス・ハック：メモリ消費の最適化
大規模なデザインシステムで全言語の全テキストを変数にすると、Figmaの描画負荷が跳ね上がる。
- 戦略: 頻繁に変更される「コアUIのラベル」のみを変数化し、長文や定型文は「コンポーネント・プロパティ」に限定する。
- メモリ対策: Figmaの「Branching」機能を活用し、言語ごとの検証用ブランチを分離することで、メインファイルのメモリ負荷を抑制する。
—
4. 現場の最前線：言語切り替え時の「レイアウト崩れ」検知
アラビア語（RTL）対応は鬼門だ。これを自動検証するために、Figmaプラグインを自作し、以下のチェックをCIに組み込む。
- RTL検知: `textAlign` が `LEFT` に固定されていないか。
- オーバーフロー検知: `text.width > container.width` を計算し、バウンディングボックスを突き抜けている要素を赤枠で囲んでレポート出力する。
// Figma Plugin内部でのレイアウト整合性チェックロジック
nodes.forEach(node => {
if (node.type === ‘TEXT’) {
const textWidth = node.width;
const containerWidth = node.parent.width;
// 文字溢れを検知した瞬間、デバッグモードで警告を発火
if (textWidth > containerWidth) {
figma.notify(`[I18n Error] Overflow in ${node.name}`);
node.fills = [{type: ‘SOLID’, color: {r: 1, g: 0, b: 0}}];
}
}
});
—
最後に：デザイナーとエンジニアの共通言語は「コード」である
Figmaを「デザインする場所」から「デザインが正しく機能するかを検証する環境」へと昇華させよ。
私が推奨する究極のワークフローは、「コードベースのJSONが単一ソース（Single Source of Truth）となり、それがFigmaに自動同期され、レイアウト検証までをCI/CDパイプラインの一部として組み込むこと」だ。
UI/UXは感覚ではない。数学的なロジックと、堅牢なデータ構造の積み重ねである。この領域に踏み込んだ時、君たちのプロダクトは国境を越え、あらゆる言語環境で完璧に動作するだろう。
さあ、GUIの檻から抜け出し、コードでデザインを制御する領域へ踏み込め。