【入門編】Figmaでデザインシステムを構築する手順！大規模開発を効率化するデザイントークンの活用法 – UI/UX・デザインツール活用バイブル

やあ、後輩の皆さん！UI/UXデザインとフロントエンド開発の魅力的な世界へようこそ。

プロダクト開発が大きくなるにつれて、こんな悩みにぶつかったことはありませんか？
「このボタンの青色、コード側とデザイン側で微妙にカラーコードが違っている…」
「ダークモード対応を頼まれたけれど、すべての画面の配色を手作業で変えるなんて気が遠くなる…」
「デザイナーとエンジニアの間で、マージンやフォントサイズの共通言語がない…」

分かります、その辛さ。私もかつては同じ泥沼にハマっていました。
ですが、安心してください。現在のFigmaには「Variables（変数）」という強力な武器があります。これを使って「デザイントークン」を正しく構築すれば、デザインの変更が一瞬で全体に波及し、エンジニアとの連携も驚くほどスムーズになります。

これをマスターすれば、毎日の作業が劇的に楽になりますよ。

今回は、大規模開発にも耐えうるデザインシステムの核「デザイントークン」の思想から、FigmaのVariablesを使った実効的なセットアップ、そして一瞬でライト／ダークモードが切り替わる感動的なプロトタイピングの構築まで、手取り足取り解説しますね。

さあ、一緒に次世代のプロダクト開発プロセスへ踏み出しましょう！

—

1. なぜ「デザイントークン」が必要なのか？

実装に入る前に、少しだけ「思想」のお話をさせてください。ここを理解しておくと、Figmaの操作で迷うことが一切なくなります。

デザイントークンとは「デザインの最小意思決定単位」

デザイントークンとは、カラーやタイポグラフィ、スペーシング、角丸（border-radius）といったデザインの最小要素に「意味のある名前（識別子）」を与えたものです。

従来は `#0066FF` という生のカラーコードを直接デザインやコードに使っていました。しかしデザイントークンでは、これを段階的に抽象化します。

私たちは現場で、トークンを主に3つの階層（レイヤー）に分けて管理します。

[ Tier 1: Primitive Token ] (生の値)
└─ Global / Raw: “blue-500” = #0066FF
│
[ Tier 2: Semantic Token ] (意味・文脈)
└─ Alias / Meaning: “color-bg-primary” = {blue-500}
│
[ Tier 3: Component Token ] (コンポーネント専用)
└─ Specific: “button-primary-bg” = {color-bg-primary}

Primitive Token（原始トークン）： `#0066FF` ＝ `blue-500` のような、値そのものの名前。
Semantic Token（文脈トークン）： `color-bg-primary`（主要背景色）のように、「どこでどう使われるか」の意味を持たせた名前。
Component Token（構成要素トークン）： `button-primary-bg`（プライマリボタンの背景色）のように、特定のパーツに閉じさせた名前。

こうしておくと何が起きるでしょう？
ブランドカラーが「青」から「紫」に変わった時、`color-bg-primary` が指す先を `purple-500` に変えるだけで、アプリ全体の主要背景が一瞬で切り替わります。ダークモードの実装も、`color-bg-primary` の参照先を「ライト時：`white`」「ダーク時：`gray-900`」と切り替えるだけで完了するのです。

FigmaのVariablesは、まさにこの「参照（エイリアス）」を扱うために生まれた機能なんですよ。

—

2. ステップ1：Figmaでの基礎セットアップ（Variablesの準備）

それでは、実際にFigmaを開いて手を動かしていきましょう！
まずはデザインシステムの土台となるVariablesパネルを準備します。

1-1. Variablesパネルを開く

1. Figmaで新規ファイル（Design File）を作成します。
2. キャンバス上の何もない場所をクリック（選択解除状態）します。
3. 右側のサイドバー（Local styles などがある領域）にある 「Local variables」 の横のアイコン（設定マークまたはアイコン）をクリックします。

すると、画面中央に Variables ダイアログが立ち上がります。ここが私たちの「デザインシステムの司令塔」です。

![Variables Panel](https://via.placeholder.com/600×300?text=Figma+Local+Variables+Panel) (イメージ)

—

3. ステップ2：2層構造のカラー・トークンを構築する

では、実務で絶対に崩れない「Primitive」と「Semantic」のカラー構造を作っていきましょう。

2-1. Collection（コレクション）の作成

まずはトークンを整理する箱（コレクション）を作ります。
1. パネル左上のドロップダウンをクリックし、「Create collection」 を選択。
2. 名前を `Primitives` に変更します。

2-2. Primitive Token（生のカラー）の登録

`Primitives` コレクションの中に、ベースとなる色を定義します。

1. 「Create variable」 ボタンを押し、「Color」 を選択。
2. 以下のように名前と色（HEX値）を入力していきます。

※ `blue/500` のようにスラッシュ `/` を使うと、Figma上で自動的にフォルダ階層化されて視認性が最高になります！

2-3. Semantic Token（文脈カラー）の作成とエイリアス（紐付け）

ここが一番の魔法のポイントです！新しいコレクションを作って、Primitive Tokenを参照させます。

1. コレクション切り替えドロップダウンから 「Create collection」 を選び、名前を `Semantics` にします。
2. 「Create variable」 ＞ 「Color」 を選択。
3. 名前を `color/bg/default` と入力します。
4. 値（Value）のカラーピッカーを開く代わりに、右クリックまたはカラーコード欄で 「Libraries / Variables Icon」（または『Shift + 鍵盤アイコン』）を選択し、先ほど作った `Primitives` の中から `gray/100` を選びます。

これで、「`color/bg/default` は `gray/100` を参照する」というエイリアス（別名）構造が完成しました！

同じ手順で、テキスト用とアクセント用のSemanticトークンも作りましょう。

`color/text/default` ➔ 参照先: `gray/900`
`color/brand/primary` ➔ 参照先: `blue/500`

—

4. ステップ3：スペーシング（余白）のVariables化

カラーだけでなく、余白（Spacing）や角丸（Radius）も数値（Number）としてVariable化できます。これによってデザインの「8ptグリッド規則」を厳密に保てます。

1. 新しいコレクション `Tokens` を作ります（または `Semantics` 内に含めてもOKです）。
2. 「Create variable」 ＞ 「Number」 を選択。
3. 以下のトークンを作成します。

`space/sm` : `8`
`space/md` : `16`
`space/lg` : `24`
`radius/md` : `8`

これらをレイアウトのPaddingやGapに割り当てることで、デザイン内の「適当な13pxマージン」みたいな事故が絶滅します。

—

5. ステップ4：実践！ライト/ダークモードのマルチモード実装

Variablesの真骨頂、「Mode（モード）」 機能を使いましょう。1つのSemanticトークンに「Light」と「Dark」の2つの文脈を持たせます。

4-1. Modeを追加する

1. `Semantics` コレクションを開きます。
2. テーブルの右上にある 「＋ Add mode」 列追加ボタンをクリックします。（※有料プランまたは教育プラン等でマルチモードが有効化されます）
3. 列のヘッダー名をそれぞれ 「Light」 と 「Dark」 に変更します。

4-2. Darkモード時の参照先を打ち替える

`Semantics` コレクションのテーブルで、Dark列の参照先を以下のように書き換えてください。

テーブルはこんな美しい状態になっているはずです。

[ Semantics Collection ]
Variable Name │ Light Mode │ Dark Mode
———————-┼——————–+——————–
color/bg/default │ primitive.gray/100 │ primitive.gray/900
color/text/default │ primitive.gray/900 │ primitive.white
color/brand/primary │ primitive.blue/500 │ primitive.blue/500

思想が綺麗に整理されていますね！これがプロのデザインシステムです。

—

6. ステップ5：HelloWorld！コンポーネント適用と動作確認

さあ、仕掛けは整いました！
実際にコンポーネントを作り、一瞬でダークモードに切り替わる「感動のHelloWorld」を体験しましょう。

5-1. カードコンポーネントの作成

1. キャンバス上に Frame (`F`キー) を作成します（幅 300px, 高さ 180px 程度）。
2. その中に Text (`T`キー) で「Hello, Design System!」と配置します。
3. FrameとTextを選択し、Auto Layout (`Shift + A`) を適用します。

5-2. Variables（トークン）の適用

ここが重要です。色や余白を「直接指定」せず、すべて先ほど作った「Semantic Variables」を割り当てます。

1. Auto Layoutの設定:

Padding（上下左右の余白）の入力欄をクリックし、変数アイコン（半透明の丸アイコン）を押して `space/md` (16) を選択。
Corner Radius（角丸）に `radius/md` (8) を選択。

2. 背景色（Fill）の設定:

Frameの Fill（塗り）のカラーピッカーを開き、Variablesタブから `color/bg/default` を選択。

3. 文字色の設定:

Textを選択し、Fillから `color/text/default` を選択。

見た目は「明るいグレーの背景に、暗いグレーの文字」でカードが出来上がったはずです。

5-3. 感動の瞬間：モード切り替え！

作成したカード Frame を選択してください。

1. 右側のサイドバー「Layer」セクションの横にある 「Change variable mode」 アイコン（層が重なったようなマーク）をクリックします。
2. `Semantics` ➔ `Dark` を選択してみてください。

…いかがでしょう！？
一瞬で背景がダークグレーになり、文字が白に反転したはずです！

さらに、このカードを親フレーム（例えば「Desktop」フレーム）の中に入れ、親フレーム側のModeを `Dark` に設定すると、中にある子コンポーネントすべてが自動的にダークモードに同期されます。

手作業で1つずつ色を変えていたあの不毛な時間には、もう二度と戻れません。

—

7. エンジニア連携（Dev Mode）の真価

この設計の素晴らしいところは、Figma上だけで完結しない点です。

エンジニアが Figmaの Dev Mode を開くと、CSS/Style情報には以下のように表示されます。

/ Figma Dev Mode が書き出すコードのイメージ /
.card {
background-color: var(–color-bg-default, #f8f9fa);
color: var(–color-text-default, #202124);
padding: var(–space-md, 16px);
border-radius: var(–radius-md, 8px);
}

デザイナーが指定した「トークン名」がそのままコードのCSS変数名（またはTailwindのクラス名）として参照できるため、コミュニケーションコストが「ゼロ」になります。

「ここの余白、15pxですか？16pxですか？」なんて確認チャットは、今日で卒業です！

—

8. まとめ：小さな1歩が、未来の大規模開発を救う

今回の知見を振り返りましょう。

1. 3層のトークン設計思想（Primitive ➔ Semantic ➔ Component）を理解する
2. Figma Variablesで Primitive を作成し、Semantic にエイリアス（参照）接続する
3. Semantic トークンに「Light / Dark」の Mode を設定してテーマ切り替えを自動化する
4. コンポーネントには「生の値」ではなく「Semantic Variable」を割り当てる

デザインシステム構築は、一見すると「最初に準備することが多くて大変そう」思えるかもしれません。しかし、一度この仕組みを作ってしまえば、プロダクトが10ページ、100ページと巨大化しても、破綻することなく高速に洗練されたUIを生み出し続けることができます。

最初は「メインカラー」と「背景色」の2つだけでも構いません。ぜひ今日、手元のFigmaファイルで Variables を作成して、あのモード切り替えの爽快感を味わってみてください！

何か分からないことがあれば、いつでも聞いてくださいね。あなたのプロダクト開発が劇的に楽しく、効率的になることを心から応援しています！