こんにちは！
UIデザイナーの自分（Yuny）です。
FigmaにVariables（変数）機能が搭載されて以降、デザインシステムの構築現場では大きな変化が起きています。
これまでStylesだけでは対応が難しかった「ライト／ダークモードの切り替え」や「デバイス幅に応じたスペーシングの動的変更」が、Figmaの標準機能だけで驚くほど滑らかに実現できるようになりました。
ただ、新しい仕組みだからこそ「覚えることが多そう」「せっかく作っても管理しきれずに破綻してしまうのではないか」という不安を感じる方も多いはずです。
変数の階層が複雑になりすぎて選択画面で迷ってしまい、結局数値を直接手入力してしまった経験を持つデザイナー仲間も少なくありません。
今回は、Variablesへの心理的ハードルを下げ、最初から完璧を目指さずにスモールスタートで運用を回すための設計ルールをお話しします。
チームで破綻させないための「2層トークン構造」と「ガバナンス設定」を身につけて、日々の制作作業をスッキリと効率化していきましょう。
Variablesはカラーや数値などの単一データを一元管理する機能です。タイポグラフィやグラデーションなどの複合プロパティは従来のStylesで管理します。まずは生の値（Primitive）と役割（Semantic）のシンプルな2層構造でスモールスタートすることが、運用破綻を防ぐ鉄則です。
- 1. Figma Variables（変数）とは？Stylesとの決定的な違い
- Variablesで管理すべき「単一値」
- Stylesで管理し続けるべき「複合プロパティ」
- 2. 破綻を防ぐ「2層トークン構造（PrimitiveとSemantic）」の設計ルール
- Tier 1：Primitiveトークン（生の値）
- Tier 2：Semanticトークン（役割と意味）
- 3. 実務でよく使う4つのVariables設定手順
- ① カラー変数（Color）：ダークモードとテーマ切り替え
- ② 数値変数（Number）：8ptスペーシングと角丸の共通化
- ③ ブーリアン変数（Boolean）：UIの表示・非表示切り替え
- ④ 文字列変数（String）：多言語対応とステータス表示
- 4. デザイナーが迷わないための「ガバナンス」設定（スコープ・非公開）
- スコープ（Scope）設定で不要な変数を非表示にする
- _（アンダースコア）によるライブラリ非公開化
- 5. 開発連携（Dev Mode・Code Syntax・AIコード生成）を見据えた設計
- Code Syntaxの登録で実装の翻訳コストをゼロにする
- AIコーディング・MCP連携における構造化データの価値
- 次のステップ：あわせて深掘りしたい知見
- まとめ：まずはカラー数色・スペーシングからのスモールスタート
1. Figma Variables（変数）とは？Stylesとの決定的な違い
FigmaのVariables（変数）を導入する際、最初に突き当たる疑問が「これまでのStyles（スタイル）と何が違うのか」という境界線です。
両者の役割を曖昧にしたまま導入してしまうと、デザイン作業中に「どちらを適用すべきか」で迷いが生じてしまいます。
使い分けの判断基準は、管理したいデータが「単一の値（Atomic Value）」か「複合パッケージ（Compound Properties）」かという点にあります。
それぞれの性質を正しく理解すれば、迷うことは一切なくなります。
Variablesで管理すべき「単一値」
Variablesは、カラーコードや余白のpx値など、それ以上分解できない単一のデータを保持することに特化しています。
最大の特徴は、Mode（モード）機能によって、Light／Darkテーマのように状況に応じた値を切り替えられる点にあります。
- ソリッドカラー: 背景色、テキスト色、ボーダー色などの単一のカラー値
- 数値（Number）: 余白（Padding／Gap）、角丸（Radius）、要素の幅・高さ
- ブーリアン（Boolean）: UIパーツの表示・非表示を制御する真偽値
- 文字列（String）: 多言語展開のラベルやステータス表示のテキスト
Stylesで管理し続けるべき「複合プロパティ」
一方のStylesは、複数のプロパティが組み合わさったパッケージです。
単一のVariablesでは表現しきれないリッチなビジュアル設定は、今後も変わらずStylesが主役を務めます。
- タイポグラフィ（Text Styles）: フォント名、サイズ、ウェイト、行間、文字間隔のセット
- グラデーション: 複数の色とカラーストップ位置の組み合わせ
- エフェクト: 複数のドロップシャドウやレイヤーブラーの重ねがけ
| 管理項目 | 推奨機能 | 理由・実務での役割 |
|---|---|---|
| ソリッドカラー（背景・文字色） | Variables | Mode機能によるLight / Darkテーマの瞬時切り替えに対応 |
| スペーシング（余白） | Variables | 8ptルール等の数値を共通化し、Auto Layoutに適用 |
| 角丸（Border Radius） | Variables | ボタンやカードの角丸を一元管理し、スコープ制限 |
| タイポグラフィ | Styles | サイズ・行間・ウェイトの複合設定を一発適用（数値のみVariables連携可） |
| グラデーション | Styles | 複数色と停止位置を持つ複合プロパティのためStylesで保持 |
| ドロップシャドウ・ブラー | Styles | X/Yオフセット・ぼかし・色の複合レイヤーのためStylesで保持 |
「カラーと数値はVariables、タイポグラフィとグラデーションはStyles」という基本原則をチーム内で共有するだけで、運用の混乱は一気に解消されます。
なおタイポグラフィに関しては、Text Stylesというパッケージを使いつつ、フォントサイズや行間の数値にのみVariablesを紐づけるハイブリッド運用が実務では扱いやすいです。
2. 破綻を防ぐ「2層トークン構造（PrimitiveとSemantic）」の設計ルール
デザインシステムやトークン設計の解説書を開くと、よく「3層構造（Primitive / Semantic / Component）」が推奨されています。
しかし、現場で最初から3層すべてを厳密に構築しようとすると、設定の手間と認知的負荷に圧倒されて運用が破綻しがちです。
これから導入する段階であれば、まずは最も重要な「Primitive」と「Semantic」の2層構造からスモールスタートすることをおすすめします。
この2階層さえしっかり組めていれば、中規模までのUI設計で困ることはほとんどありません。
Tier 1：Primitiveトークン（生の値）
Primitiveトークンは、具体的なカラーコードや数値を定義する「生の素材置き場」です。
ここには「ボタン」や「背景」といった画面上の役割や意味を持たせず、純粋な色の名前や数値のスケールとして定義します。
- 命名例:
_primitive/color/blue/600、_primitive/space/16、_primitive/radius/8 - 値の実装:
#2563EB、16px、8px - 運用のルール: PrimitiveトークンはUIに直接適用せず、後述するSemanticトークンから参照させるためだけに使用します。
Tier 2：Semanticトークン（役割と意味）
Semanticトークンは、「その値をどこで、何の目的で使用するのか」というデザイン上の役割を定義する階層です。
UIをデザインする際にデザイナーが選択パネルから選ぶのは、すべてこのSemanticトークンになります。
- 命名例:
color/surface/brand、color/text/primary、space/layout/md - 値の実装:
_primitive/color/blue/600（Primitiveを参照するエイリアス） - 運用のルール: 画面の背景色を変えたいときは、色コードを直打ちするのではなく、このSemanticトークンを割り当てます。
| 階層レベル | 命名規則フォーマット | 具体例 | 役割・用途 |
|---|---|---|---|
| Primitive（非公開） | _primitive/color/{colorName}/{scale} | _primitive/color/blue/600 | 生のカラーパレット（Hex値） |
| Primitive（非公開） | _primitive/space/{size} | _primitive/space/16 | 基準となるスペーシング数値（16px） |
| Semantic（公開） | color/surface/{role} | color/surface/brand | 背景色・カード面の役割 |
| Semantic（公開） | color/text/{emphasis} | color/text/primary | 本文テキストの主要カラー |
| Semantic（公開） | color/border/{role} | color/border/subtle | 境界線・区切り線の淡いカラー |
| Semantic（公開） | space/component/{gap} | space/component/gap-md | コンポーネント内の要素間余白 |
このように「生の色」と「画面上の役割」を分離しておくことで、将来的にブランドカラーが刷新された際も、参照元のPrimitiveを1箇所書き換えるだけでサイト全体のトーンが一瞬で更新されます。
また、特定のボタンや入力フォーム専用の「Componentトークン」は、必要に迫られた段階で初めて追加すれば十分です。
3. 実務でよく使う4つのVariables設定手順
Variablesの概要と構造を把握したところで、実務で頻出する4つの変数の具体的な設定手順を見ていきましょう。
日常のUI設計でこれら4種類を使いこなせるようになると、制作スピードとデータの整合性が格段に上がります。
① カラー変数（Color）：ダークモードとテーマ切り替え
カラー変数の真価は、複数モード（Mode）によるテーマ切り替えにあります。
LightモードとDarkモードをひとつのコレクション内で共存させる手順は以下の通りです。
- ローカル変数パネルでコレクションを新規作成し、モード列を「Light」「Dark」の2つ用意します。
- Semantic階層に
color/surface/primaryという名前でカラー変数を作成します。 - Light列の値には
_primitive/neutral/50（明るいグレー）を割り当て、Dark列には_primitive/neutral/900（濃いグレー）をエイリアスとして割り当てます。 - 作成した変数をフレームやカードのFillに適用します。
この設定を済ませておけば、親フレームの右パネルにある「Change variable mode」からDarkを選ぶだけで、子要素のコンポーネント全体が一瞬で反転表示されます。
画面ごとに別々のカンプを用意する必要がなくなるため、メンテナンスの工数を大幅に削減できます。
② 数値変数（Number）：8ptスペーシングと角丸の共通化
余白や角丸の数値をハードコード（直接入力）せず、Variablesで共通化することで、デザインの秩序が自然と保たれます。
特に8ptグリッドルールを採用しているプロジェクトでは、数値変数の導入が大きな威力を発揮します。
space/4,space/8,space/16,space/24,space/32などの基準スケールを数値変数として登録します。- オートレイアウト（Auto Layout）のPaddingやGapの入力欄にマウスを乗せ、表示される変数アイコンから対応する数値を割り当てます。
- 角丸（Radius）についても同様に、
radius/sm (4px),radius/md (8px),radius/lg (16px)を用意してコンポーネントに紐付けます。
手入力による「7px」や「15px」といった微細なズレがなくなり、チーム全体のデザイン品質が均一になります。
③ ブーリアン変数（Boolean）：UIの表示・非表示切り替え
ブーリアン変数は、要素の表示（true）と非表示（false）を切り替えるための真偽値データです。
バリアント（Variants）を無駄に増やしたくない場面や、コンポーネント内のパーツの出し入れに重宝します。
has_iconやis_badge_visibleというブーリアン変数を作成し、初期値をtrueに設定します。- コンポーネント内の対象レイヤー（例: アイコン）を選択し、右パネルのレイヤー表示（目のアイコン）を右クリックして変数をバインドします。
- インスタンス側で変数の値を
falseに切り替えると、レイヤーが自動的に非表示になります。
④ 文字列変数（String）：多言語対応とステータス表示
文字列変数は、テキストレイヤーに入力される文言をデータとして保持する仕組みです。
画面レイアウトを崩さずに多言語（日本語／英語）での見え方を検証したい場面で役立ちます。
label/submit_buttonという文字列変数を作成します。- モード列を「JA」「EN」に分け、JAには「送信する」、ENには「Submit」と入力します。
- ボタン内のテキストレイヤーを選択し、テキスト設定の「Apply variable」から割り当てます。
英語化によってボタン幅が想定を超えて広がらないか、テキストが意図せず折り返されないかを、デザイン段階で即座にチェックできます。
4. デザイナーが迷わないための「ガバナンス」設定（スコープ・非公開）
Variablesを本格的に運用し始めると、「変数の候補が多すぎて、どれを選べばいいか分からない」という新たな問題が発生しがちです。
この検索ストレスを解消するために、Figmaが用意している2つのガバナンス機能を初期段階で必ず設定しておきましょう。
スコープ（Scope）設定で不要な変数を非表示にする
スコープ設定は、変数を「どのプロパティパネルに表示させるか」を絞り込める機能です。
変数の編集画面を開き、「Scoping」のチェックボックスを調整することで設定できます。
- 角丸用の変数: 「Corner radius」のみにチェックを入れ、余白やサイズからは除外する。
- 余白用の変数: 「Auto layout padding and gap」のみに絞り込む。
- テキストカラー用の変数: 「Text fill」のみに限定し、背景色や線色の候補から隠す。
これにより、デザイナーが角丸を設定しようと選択パネルを開いた際、パディング用の数値変数が候補に出なくなります。
選択画面のノイズが消え、誤った変数を適用してしまうヒューマンエラーを未然に防止できます。
_（アンダースコア）によるライブラリ非公開化
Primitiveトークン（生の値）をデザイナーが間違えてUIに直接選んでしまう事故を防ぐための機能です。
Primitiveを直接適用してしまうと、Modeを切り替えても色が反転しなくなる原因になります。
Figmaでは、コレクション名やグループ名の先頭に _ （アンダースコア）または . （ドット）を付けるだけで、ライブラリ公開（Publish）の対象から一括除外できます。
- 設定例:
_primitiveというコレクション名、または_color/blue/600というグループ名
この設定を行っておけば、チームメンバーの画面には目的が明確なSemanticトークン（例: color/surface/brand）だけがクリーンに表示されます。
事故が起きない「仕組み」を初期に整えておくことが、無理のない継続運用の秘訣です。
5. 開発連携（Dev Mode・Code Syntax・AIコード生成）を見据えた設計
Variablesを構造化して管理する恩恵は、デザイナー単体の作業効率化にとどまりません。
エンジニアへのハンドオフ（実装引き渡し）の円滑化や、近年のAIコーディング連携においても非常に強力な武器となります。
Code Syntaxの登録で実装の翻訳コストをゼロにする
Figmaの変数設定画面には、「Code syntax」という入力欄が用意されています。
ここにエンジニアリング側で使用する変数名（CSS Custom Propertiesなど）をあらかじめ登録しておきます。
- Figmaの変数名:
color/surface/brand - Web（CSS）のCode syntax:
var(--color-surface-brand) - iOS（SwiftUI）のCode syntax:
Color.surfaceBrand
エンジニアがDev Modeで要素をインスペクトした際、脳内変換することなく、コードをそのままコピー＆ペーストして実装に組み込めます。
デザインとコードの命名が1対1で同期するため、デザインレビュー時の手戻りも激減します。
AIコーディング・MCP連携における構造化データの価値
近年、CursorやClaude CodeなどのAIエージェントを活用したフロントエンド開発が急速に浸透しています。
FigmaのVariablesによってデザイン上の決定事項が構造化されていると、AI連携の精度が飛躍的に高まります。
AIはFigmaのデータを解析する際、単なるHexコードではなく「これは背景色としての役割を持つトークンである」という文脈を正確に読み取ります。
その結果、ハードコードされた汚いスタイルではなく、デザインシステムの思想を反映したメンテナンス性の高いコードを一発で生成してくれます。
次のステップ：あわせて深掘りしたい知見
Variablesを基礎から理解した後は、オートレイアウトやデザインシステム全体の設計思想と組み合わせることで、UIの破綻をより強固に防げるようになります。
余白変数と組み合わせてレスポンシブなコンポーネントを組み立てる具体的な実践テクニックは、以下の記事で体系的に解説しています。
Googleが提唱するカラートークンや役割ベースの設計思想を深く学びたい方は、Material Design 3の入門解説も参考になります。
選択肢を絞り込むことでチームの認知負荷を減らすデザインの制約アプローチについては、こちらの記事で心理学の知見を交えて掘り下げています。
まとめ：まずはカラー数色・スペーシングからのスモールスタート
Figma Variablesは、一見すると設定項目が多くて難解な機能に感じられるかもしれません。
しかしその本質は、「デザインの意思決定を一貫したルールで整理整頓するための道具」にすぎません。
- カラーと数値はVariables、タイポグラフィとグラデーションはStylesで管理する
- 生の値（Primitive）と役割（Semantic）のシンプルな2層からスタートする
- スコープ設定と
_（非公開設定）でデザイナーの選択肢を適切に絞り込む - Code Syntaxを登録してエンジニアへの引き渡しとAIコード生成を円滑にする
最初から大規模なデザインシステムを組もうと気負う必要はありません。
まずはプロジェクトのブランドカラー数色や、よく使うスペーシングの数値から少しずつ変数化してみてください。
小さな整理整頓の積み重ねが、将来的にチーム全体を支える強固な制作基盤へと育っていくはずです。
