Figmaのカラー管理。バリアブル（Variables）とスタイル（Styles）について解説します

Figmaにおいてバリアブル（Variables）とスタイル（Styles」はどちらもカラーを管理する機能ですが、表現力（見た目）と拡張性（ロジック）という点で役割が明確に異なります。

結論から言うと、現在のFigmaのベストプラクティスでは以下のように使い分けます。

• バリアブル: カラー管理の「主役」。単色（ソリッドカラー）やテーマ切り替え（ライト/ダークモード）に使用。

• スタイル: バリアブルの「補助」。バリアブルで表現できないグラデーションや画像、複数の塗りが必要な場合に使用。

それぞれの詳細と、具体的な使い分けのルールを解説します。本来カラーシステムの構築はUIデザインの初期フェーズに行うべき工程ですが、本連載では解説の都合上この段階で実施しています。

※薬剤搬送ロボットハコブくんは技術検証用の仮想設定です。 実用化目的ではなく、制御・UIデザイン・HRI（人間とロボットの相互作用）の本質を探求するコンセプトとして定義しています。

バリアブル (Variables)

役割：デザインの論理的な管理（デザイン・トークン）

Config 2023で登場した新機能で、現在のUIデザインにおけるカラー管理の基本です。単なる色情報の保存場所ではなく値を扱います。

得意なこと

• モードの切り替え: Light Mode / Dark ModeやDesktop / Mobileのような表示の切り替えがワンクリックで可能です。

• エイリアス（参照）機能: Blue-500（プリミティブ）をButton-Primary-Background（セマンティック）として参照させるような、多層的なトークン設計が可能です。

• 開発連携: コード（CSS変数やJSON）との親和性が高く、エンジニアとの連携がスムーズです。

できないこと

• グラデーション

• 画像（イメージ塗り）

• 1つの要素に複数の色を重ねる（マルチフィル）

スタイル (Styles)

役割：複雑な見た目の保存（ビジュアル・プロパティ）

従来からある機能ですが、現在はバリアブルで対応できない「表現」を補うために使われます。

得意なこと

• グラデーション: 線形、放射状などのグラデーション設定。

• 画像: パターンやテクスチャとしての画像塗り。

• 複合的な塗り: 不透明度50%の赤の上に不透明度20%の黒を重ねるなど、複数のレイヤー構造を持つ塗り。

苦手なこと

• モードの自動切り替え（プラグインなしでは不可）。

• 値の参照構造を作ること（スタイルの中にスタイルを入れることはできません）。

おすすめの運用フロー（ハイブリッド構成）

現在のFigmaでは、基本はバリアブルで作り、必要な場合だけスタイルで包むという方法が最も効率的です。

手順の例

• バリアブルで色を定義する

• まずバリアブルに単色（例: #0066FF）を登録します。これが「素材」になります。

通常の使用（単色）

• ボタンの背景やテキストの色など、単色の場合はバリアブルを直接適用します。スタイルにする必要はありません。

スタイルの使用（グラデーションなど）

• グラデーションを作りたい場合、色の分岐点（ストップ）に1で作ったバリアブルを割り当てます。

• そのグラデーション設定全体をスタイルとして登録します。

ポイント:

こうすることで、バリアブルの色（#0066FF）を変更した際、それを使っている単色のボタンもグラデーションのスタイルも一括で更新されます。

違いのまとめ表

Figmaのバリアブル運用

Figmaのバリアブル運用において、Primitive（プリミティブ）とSemantic（セマンティック）の使い分けは、デザインシステムの保守性と拡張性（ダークモード対応など）を決める最も重要な概念です。

一言で言うと、色の名前（Primitive）と色の役割（Semantic）を分けて管理するルールです。

構造の全体像

まずはこの2層構造（+α）の関係性をイメージしてください。

Primitive（プリミティブ）の詳細

見た目に基づいた名前を付けます。

カラーパレットそのものであり、デザインのすべての色の源泉です。

• 命名のルール: 色相（Hue）と明度（Scale）で管理するのが標準的です。

• 値: 直接HEXコード（#0066FFなど）を持ちます。

• コレクション名: Primitives または Global

命名パターンの例

カテゴリー / 色相 / 明度

• Color / Blue / 500 （標準の青）

• Color / Blue / 100 （薄い青）

• Color / Neutral / 900 （濃いグレー）

ポイント:

Brand Blueのような名前は避け、単純にBlueにするのがコツです。ブランドカラーが赤に変わったときにBrand Blueという名前の赤色という矛盾が起きないようにするためです。

Semantic（セマンティック）の詳細

使用目的に基づいた名前を付けます。

デザインデータ上のオブジェクトには、このSemanticバリアブルを適用します。

• 命名のルール: 何の色か（UI要素）と状態（State）で管理します。

• 値: HEXコードではなく、Primitiveへのエイリアス（参照）を持ちます。

• コレクション名: Tokens または Semantic

命名パターンの例

カテゴリー / 対象 / 重要度・役割 / 状態

テキストの場合:

• Text / Primary （主要な文字 → 参照先: Neutral/900）

• Text / Secondary （補足文字 → 参照先: Neutral/600）

• Text / Link （リンク文字 → 参照先: Blue/500）

背景（Surface）の場合:

• Surface / Default （基本背景 → 参照先: White）

• Surface / Brand （強調背景 → 参照先: Blue/500）

境界線（Border）の場合:

• Border / Default （通常の線 → 参照先: Neutral/200）

• Border / Interactive （入力欄の線 → 参照先: Blue/500）

なぜ2つに分ける必要があるのか？

面倒だから直接 Blue/500 をボタンに使えばいいのでは？と思うかもしれませんが、分けることで以下のメリットが生まれます。

① ダークモード対応（Theming）が自動化できる

これが最大のメリットです。

Semanticバリアブルには「モード」を持たせることができます。

• Semantic: Text / Primary

• Light Mode: Neutral/900（黒）を参照

• Dark Mode: Neutral/50（白）を参照

このように設定しておけば、デザイン上で Text / Primary を使っている箇所は、モードを切り替えるだけで一斉に色が反転します。もし直接 Neutral/900 を使っていたら、ダークモードでも黒い文字のままになってしまいます。

② 修正に強い（変更の局所化）

ブランドカラーを青から紫に変更したいとなった場合：

1. Primitiveに Purple を追加。

2. Semanticの Surface / Brand の参照先を Blue/500 から Purple/500 に変える。

3. 完了。 デザイン全体で数千箇所に使われていても、一瞬で反映されます。

推奨されるセットアップ手順

Figmaでバリアブルウィンドウを開き、以下の2つのコレクションを作成することをおすすめします。

Primitives（プリミティブ）

• ここに全ての色（Blue/100〜900, Neutral/100〜900..）を登録。

• このコレクションは他の人に非公開（非推奨）にしても良いくらいの「裏方」です。

Tokens（トークン）

• ここに Text Surface Border などのグループを作成。

• それぞれの値には、Primitives コレクションの色を割り当てる（右クリック > Create alias）。

• デザイナーはこのコレクションだけを使ってデザインする。

バリアブルのテンプレートリスト

一般的なWebサイトやアプリ開発で、これだけあれば8〜9割のケースをカバーできるという実用的なSemanticバリアブルのテンプレートリストを作成しました。

最初はこれをベースに作成し、プロジェクト特有の要素（例：ゴールド会員用の色など）が必要になったら追加していくのが最も効率的です。

推奨Semanticバリアブル リスト

以下の4つのカテゴリに分けて登録することをおすすめします。

1. Text（文字・アイコン色）

文字とアイコンは同じバリアブルを共有するのが一般的です。

2. Surface（背景色・面）

画面のベースやカードの背景です。「階層」を意識するのがコツです。

Dark Modeのヒント:

ライトモードではPage も Layerも白で同じに見えることが多いですが、ダークモードでは Page（黒）の上に Layer（濃いグレー）が乗る形になるため、必ず分けておきます。

3. Action / Brand（ボタン・強調）

ブランドカラーやアクションに関連する色です。背景(Bg)と文字(Fg)をセットで考えます。

4. Border（線）

線の色は多すぎると管理が大変なので、3種類に絞るのがベストです。

5. Status（状態・フィードバック）

エラーや成功などのシステムメッセージ用です。

運用のアドバイス

Q. バリアブルの「スコーピング（Scoping）」設定はすべき？

A. はい、最初にしておくと楽です。

Figmaのバリアブル編集画面で、各バリアブルの設定（歯車アイコン）からこの色がどこで使えるかを制限できます。

これを設定しておくと、ミスが激減します。

• Text / ... → Text のみにチェック（塗りに使えないようにする）

• Surface / ... → Frame や Shape のみにチェック（文字に使えないようにする）

• Border / ... → Stroke のみにチェック

Q. 「ホバー（Hover）」の色はどうする？

A. 必要になってから追加でOKです。

最初から全てにHoverを作ると数が倍増します。

必要な場合のみ、Action / Primary / Bg-Hover のように末尾に追加するか、Figmaのプロトタイプ機能で単に明度を下げる表現で済ませることも多いです。

まとめ

Figmaでのカラー運用における機能の使い分けと命名規則について、以下の3つの重要ポイントを定義しました。

1. 機能の役割分担：主役は「バリアブル」

• バリアブル (Variables): カラー管理のメイン機能。単色を扱い、モード切り替え（ダークモード対応）やコード連携を担う「論理的な背骨」です。

• スタイル (Styles): グラデーションや画像など、表現力を補うための補助機能。必要な場合のみバリアブルを包んで使用します。

2. 命名の2層構造：保守性を高めるルール

色を直接指定するのではなく、参照（エイリアス）を利用して役割を分離します。

• Primitive (素材): Blue/500 など、見た目に基づく名前。全色のパレット定義。

• Semantic (意味): Button/Primary など、用途に基づく名前。Primitiveを参照する。

• メリット: この構造にすることで、一箇所の変更で全体の色味を調整できたり、ダークモード対応が自動化できたりします。

3. 実践的セマンティックリスト

UIデザインの8割をカバーする基本的な役割定義を行いました。

• Text: Primary / Secondary / Disabled / Link / On-Color

• Surface: Page / Layer / Overlay / Disabled

• Action: Primary / Secondary (Bg & Fg)

• Border: Default / Strong / Focus

• Status: Error / Success / Warning

これで、デザインシステムのカラー運用の基礎知識編は終了です。 どのようなロジックで色を管理すれば、修正に強く、エンジニアにも伝わりやすいデータになるかが明確になりました。

頭の中の整理がついたところで、次はいよいよFigmaを動かして手を動かすフェーズに入ります。

LOG19 実践：Figmaへのコレクション作成とバリアブル登録では、今回決めたリストを実際にFigmaのバリアブル機能に登録していく具体的な手順と、効率的な操作のコツを解説します。