Figma Variables（変数）完全ガイド：条件分岐とモード切替で実現する「生きた」プロトタイピングの極意
テックリードの皆さん、日々のUI設計とプロトタイピングにお疲れ様です。
「画面遷移だけのプロトタイプに疲れた」「多言語対応やダークモードの検証のために、わざわざ別画面を作るのはもう限界だ」「エンジニアに意図を伝えるために、コードを書くような感覚でロジックを組みたい」――そんなフラストレーションを抱えていませんか？
かつてのFigmaは「見た目」を作るだけのツールでした。しかし、Variables（変数）とAdvanced Prototyping（条件分岐）の登場により、Figmaは「ロジックを持ったミニ・アプリケーション開発環境」へと進化しました。
本記事では、単なる機能紹介にとどまりません。デザインシステムとコードベースを完全に同期させ、開発スピードを劇的に高めるためのプロの実践テクニックを、アーキテクトの視点から余すことなく解説します。
—
1. Variables（変数）の本質と、エンジニアが熱狂する理由
Figmaの変数機能は、CSSカスタムプロパティ（CSS Variables）やデザイントークンの概念をそのままキャンバスに持ち込んだものです。
扱えるデータ型は以下の4つ：
- Color: テーマカラーやブランドカラー（モード切替の核）
- Number: 数値計算、カウンター、パディング・レイアウトの制御
- String: 多言語対応（i18n）、テキスト動的変更
- Boolean: 表示/非表示の切り替え、チェックボックスの状態管理
これらが強力なのは、「デザインデータが状態（State）を持つようになる」からです。画面ごとの静的なカンプを作る時代は終わり、1つの画面があらゆる状態に変形する「シングル・ソース・オブ・トゥルース（SSOT）」をプロトタイプ層で実現できます。
—
2. 実装パターン：モード切替と条件分岐の極意
ここでは、実務で即座に使える「多言語対応」「テーマカラー変更」「数値計算（カート機能）」の設計と実装手順を解説します。
パターンA：モード切替（ダークモード ＆ 多言語化）
デザインシステムにおいて、モード切替はもはや必須要件です。これをVariablesで構築します。
1. Variablesパネルの構築:
- `Color / Background` という変数を作成し、Defaultモードに白（`#FFFFFF`）、Darkモードに黒（`#1A1A1A`）を設定。
- 同様に `String / Label_Welcome` を作成し、`JA` モードに「ようこそ」、`EN` モードに「Welcome」を設定。
2. コンポーネントへのバインド:
- フレームの背景色を右クリックし、作成した `Background` 変数を紐付け。
- テキストレイヤーも同様に `Label_Welcome` 変数に紐付け。
3. モードの適用:
- プロトタイプを配置するフレームを選択し、右サイドバーの「Layer」セクションから「Variables」アイコンをクリック、適用するモード（例: `Dark` や `EN`）を指定するだけです。
パターンB：条件分岐（Conditional）と数値計算（Number）
ショッピングカートの数量変更や、ログイン認証のモックなど、軽いインタラクションをコードレスで検証します。
- シナリオ: 「＋」ボタンを押すと数量が1増え、小計が連動して変わる。ただし、在庫上限（例: 5個）を超えるとアラートが出る。
【インタラクション設定の手順】
1. 「＋」ボタンを選択し、Prototypingタブで「On click」トリガーを設定。
2. アクションに 「Set variable」 を選択し、変数 `cart_count` に `cart_count + 1` を代入。
3. 続けて 「Conditional（条件分岐）」 を追加：
- If: `cart_count > 5`
- Action:
- `cart_count` を `5` に固定（上限超過を防ぐ）
- アラート用レイヤーの `Boolean` 変数 `show_limit_warning` を `true` に設定。
これで、エンジニアが実装する際の「状態管理の仕様」が、そのまま動くプロトタイプとして視覚化されます。
—
3. 開発スピードを劇的に高める神プラグイン ＆ ショートカット
プロトタイピングの規模が大きくなると、手動での変数管理は破綻します。ここで紹介するツールとショートカットを駆使して、作業効率を極限まで高めてください。
絶対入れるべき神プラグイン
1. Tokens Studio for Figma (旧Figma Tokens)
- 選定理由: 標準のVariables機能が登場する前からデザイントークン管理を牽引してきた最強プラグイン。GitHub等の外部リポジトリとの双方向同期（JSON連携）において、今なお標準機能よりも高度な階層管理やTypography/Shadowトークンの扱いが得意です。
2. Variable management / ImportExport
- 選定理由: 標準のVariablesはCSVでのインポート・エクスポートしかサポートしていませんが、より複雑なデータ構造のハンドリングや、既存プロジェクトからの変数一括移行において、ヒューマンエラーを防ぐために必須のユーティリティです。
現場で差がつく！隠れたキーボードショートカット
- `⌥ + Option + V` (Mac) / `Alt + Shift + V`：変数の素早いバインド。レイヤーを選択した状態でこのショートカットを使うと、変数の割り当てメニューが即座に呼び出せます（※プラグインや最新のコンテキストメニュー活用含む）。
- `⌘ + ⌥ + K` (Mac) / `Ctrl + Alt + K`：コンポーネント化のショートカットですが、変数を仕込んだマスターコンポーネントの管理において、インスタンスとの差分（Override）を確認・リセットする操作と組み合わせて多用します。
—
4. チーム開発で絶対守るべき「変数名の命名規則（Naming Convention）」
エンジニアとデザイナーが共通言語を持つために、変数の命名規則はコードベース（CSS/SCSS, TypeScript）の設計思想と完全に一致させる必要があります。
推奨命名規則（階層構造の徹底）
FigmaのVariablesは `/`（スラッシュ）区切りでグループ化が可能です。以下の構造をチームの共通ルールとして定着させましょう。
[Category] / [Property] / [Variant / State]
- Color tokens:
- `color / background / primary`
- `color / text / muted`
- `color / interactive / hover`
- Spacing tokens (Number):
- `spacing / 1 (4px)`
- `spacing / 2 (8px)`
- `spacing / 4 (16px)`
—
5. 【実務直結】デザインシステム同期のための設定ファイル構成例
FigmaのVariablesを起点として、CI/CDパイプラインに組み込み、コードと完全に同期させるためのベストプラクティスです。ここでは、デザイントークンとして書き出したJSON/YAMLデータを、開発側（Style Dictionary等）で処理しやすい構成例を示します。
JSON 構成例 (`tokens/globals.json`)
Figmaからエクスポート、あるいはTokens Studio経由でGit管理するデザイントークンの実例です。エンジニアはこのJSONをビルドしてCSS変数に変換します。
{
“color”: {
“background”: {
“default”: {
“value”: “#FFFFFF”,
“type”: “color”,
“description”: “ライトモード時のベース背景色”
},
“dark”: {
“value”: “#1A1A1A”,
“type”: “color”,
“description”: “ダークモード時のベース背景色”
}
},
“brand”: {
“primary”: {
“value”: “#0066FF”,
“type”: “color”,
“description”: “プロダクトのメインアクセントカラー”
}
}
},
“spacing”: {
“scale”: {
“sm”: {
“value”: 8,
“type”: “number”,
“description”: “小規模なマージン・パディング (8px)”
},
“md”: {
“value”: 16,
“type”: “number”,
“description”: “標準的なマージン・パディング (16px)”
}
}
}
}
YAML 構成例 (`config.yml` – Style Dictionary用)
Figmaの変数をプロダクトのコード（React Native, Flutter, Webなど）へ自動変換するための設定ファイル例です。
source:
- “tokens//.json”
platforms:
css:
transformGroup: “css”
buildPath: “build/css/”
files:
- destination: “_variables.css”
format: “css/variables”
filter:
type: “color”
js:
transformGroup: “js”
buildPath: “build/js/”
files:
- destination: “tokens.js”
format: “javascript/es6”
このパイプラインを構築することで、「デザイナーがFigma上でVariablesの値を微調整する ➔ Gitにプッシュされる ➔ 自動でプロダクトのCSS変数やTypeScriptの定数が更新される」という、究極のシームレスなデザインOpsが完成します。
—
6. まとめ：プロトタイプを「ドキュメント」から「動く仕様書」へ
FigmaのVariablesと条件分岐機能は、単なる「リッチなモックを作るおもちゃ」ではありません。
- 仕様の曖昧さを排除する（状態変化やエラーハンドリングの視覚化）
- 手戻りを劇的に減らす（デザインとコードのトークン同期）
- チーム間の共通言語を作る（エンジニアファーストな設計）
これらを実現するための強力な武器です。
今日からあなたのチームでも、画面を並べるだけのプロトタイプを卒業し、「変数を仕込んだ、息づくプロトタイプ」の構築に挑戦してください。プロダクトの品質と開発スピードが、次元の違う領域へと加速するはずです。