グローバルプロダクトの「崩壊」を未然に防ぐ。Figma変数とオートレイアウトによる究極のi18nワークフロー
こんにちは。UI/UXの現場で数々のプロダクトを見てきましたが、多くのデザイナーが最後に頭を抱えるのが「多言語対応（i18n）」です。
英語では完璧だったボタンが、日本語に翻訳した途端に突き抜け、アラビア語のRTL（右左表記）対応でレイアウトが粉々に砕け散る……。これをリリース直前の実装フェーズで発見するのは、開発チームにとって「悪夢」以外の何物でもありません。
今日は、Figmaの「変数（Variables）」と「オートレイアウト」を極限まで活用し、ボタンをクリックするだけで全言語のレイアウト検証が完了する、魔法のようなワークフローを伝授します。
これをマスターすれば、あなたのプロダクトは国境を越えても「美しいまま」です。
—
1. なぜ「変数」が必要なのか？
かつてのFigmaでは、テキストを打ち替えるたびにコンポーネントを複製していましたが、それは負債の元です。
Figmaの「変数（Variables）」は、デザインの「値」を抽象化する仕組みです。これを使うと、「ボタンのラベル」という名札（変数）に対し、「英語」「日本語」「ドイツ語」という異なる中身を紐付けることができます。
【第一歩】変数のセットアップ
1. 何も選択していない状態で、右サイドバーの Local Variables を開きます。
2. 「Create variable」から「String」を選択し、名前を `label/submit` とします。
3. 画面上のプラスボタンを押し、モード（言語）を追加します。
- `English`, `Japanese`, `German` など。
これで、UI上のテキストが「値」ではなく「参照」に変わります。
—
2. 破壊されないレイアウト：オートレイアウトの「呼吸」
多言語対応の最大の敵は「固定幅」です。これを解決する唯一の正解は、オートレイアウトを「コンテンツに合わせる（Hug Contents）」設定にすることです。
黄金のルール：固定幅を禁止せよ
- ボタンの幅： `Fixed` ではなく `Hug` にする。
- 左右のパディング： 最小値を確保する（例：`Horizontal Padding: 16px`）。
- 最大幅（Max Width）の設定： ここが重要です。長すぎる文章が入り込んだ時のために、コンテナに `Max width` を設定しておきましょう。
これにより、英語が「Submit」からドイツ語の「Bestätigen（確認）」に変わっても、ボタンは自動的に息を吸うように広がり、レイアウトを崩しません。
—
3. HelloWorld：言語切り替えの動作確認
準備ができたら、実際に切り替えてみましょう。
1. コンポーネントの配置： 任意のボタンコンポーネントを作成し、テキストレイヤーを選択します。
2. 変数の適用： 右サイドバーのテキスト設定にある「変数アイコン（菱形）」をクリックし、先ほど作った `label/submit` を選択します。
3. 魔法の瞬間： フレーム全体を選択し、右サイドバーの「Layer」セクションにある「Change variable mode」から、言語を切り替えてみてください。
一瞬でボタンの幅が変わり、配置が更新されるはずです。 これが、開発者が実装する前に「レイアウトの限界値」を視覚化するということです。
—
4. プロの現場で使う「検証用テンプレート」のコツ
さらに一歩進んだプロのTipsを共有します。それは「言語比較ボード」を作ることです。
- 検証用フレームの作成： 1つの画面内に、全言語分をオートレイアウトで並べます。
- 一括検証： 変数セットの「Mode」を切り替えるだけで、すべての言語の表示崩れを1画面で確認できます。
// Figmaで思考する際のヒント（擬似コード）
const button = {
text: “Submit”,
padding: 16,
behavior: “HugContents”, // 固定幅は捨てろ、適応力を持て
overflow: “TextTruncate” // それでも溢れる場合の最終防衛線
};
—
最後に：デザイナーが「開発の言語」を話すということ
多言語対応をFigma上で完結させることは、単に見た目を整えることではありません。「どの言語であっても、このUIは破綻しない」という設計上の仕様書をエンジニアに渡すことなのです。
「このテキストは最大で何文字まで許容できるのか？」
「改行したらレイアウトはどうなるのか？」
これらの問いに、Figmaの中で答えを出しておきましょう。そうすれば、実装フェーズでの無駄な修正指示が激減し、あなたはエンジニアから絶大な信頼を勝ち取ることになります。
さあ、あなたのプロダクトを世界へ羽ばたかせる準備はできましたか？ 次のプロジェクトから、ぜひこの「変数駆動のデザイン」を取り入れてみてください。劇的な変化が待っていますよ。