Figmaへのコレクション作成とバリアブル登録
LOG18では、色の名前（Primitive）と色の役割（Semantic）を分ける重要性について学びました。
実際のプロダクト薬剤搬送ロボットアプリのUIデザインを題材に、Figma上で実際にバリアブルを登録していく実践編です。
一見するとただ色を登録するだけに見えますが、ここでの設計が後のダークモード化やブランドカラー変更の工数を劇的に減らします。手順を追って進めていきましょう。
※薬剤搬送ロボットハコブくんは技術検証用の仮想設定です。 実用化目的ではなく、制御・UIデザイン・HRI（人間とロボットの相互作用）の本質を探求するコンセプトとして定義しています。
戦略：コレクションを2つに分ける
※意外と見つけにくいですが、Figmaのフレームやセクションの外側のアートボードをクリックすると右側のパネルにバリアブルが出ます。
まず、Figmaのバリアブル機能（Local variables）を開き、2つの「コレクション（入れ物）」を作成します。 最初は手間に感じるかもしれませんが、この2階層管理がプロの鉄則です。
Primitives（プリミティブ）
役割： 素材置き場。HEXコード（
#2196F3など）を直接持つ場所。思考： このアプリにはどんな色が使われているか？
Tokens（トークン）
役割： 意味・用途置き場。Primitivesの色を参照（エイリアス）する場所。
思考： このボタンや背景にはどの色を使うべきか？
手順①：「Primitives」の登録
まずは素材を登録します。すでに整理されているカラーパレットやガイドラインの色をそのまま入力します。
重要なコツ：スラッシュ / でグループ化 名前をつける際、カテゴリー / 具体名 のようにスラッシュで区切ると、FigmaのUI上で自動的に階層化され、管理が非常に楽になります。
登録リスト例
コレクション名：Primitives（プリミティブ）
Primary
名前:
Primary/Blue値:#2196F3名前:
Primary/Dark値:#1565C0名前:
Primary/Darker値:#0277BD名前:
Primary/Accent Blue値:#03A9F4名前:
Primary/Light Blue値:#4FC3F7
Background
名前:
Background/Background1値:#E3F2FD名前:
Background/Background2値:#BBDEFB名前:
Background/Background3値:#90CAF9名前:
Background/Cyan Light値:#B3E5FC名前:
Background/Cyan Lightest値:#E1F5FE
Neutral
名前:
Neutral/Black値:#1A1A1A名前:
Neutral/Gray Dark値:#424242名前:
Neutral/Gray Medium値:#757575名前:
Neutral/Gray Light値:#9E9E9E名前:
Neutral/Gray Lighter値:#BDBDBD名前:
Neutral/Gray Pale値:#E0E0E0名前:
Neutral/Gray Lightest値:#F5F5F5名前:
Neutral/Off White値:#F8F9FA名前:
Neutral/White値:#FFFFFF
Status
名前:
Status/Success値:#4CAF50名前:
Status/Success Light値:#81C784
Delivery
名前:
Delivery/Delivery値:#E65100名前:
Delivery/Delivery Light値:#FFF3E0
名前:
Warning/Warning値:#E53935名前:
Warning/Warning Dark値:#C62828名前:
Warning/Warning Light値:#FFEBEE
手順②：「Tokens」の登録
次に、実際のデザイン作業で使うための意味を持ったバリアブルを作ります。 ここではHEXコードを直接入力しません。ライブラリ（エイリアス）機能を使います。
登録の操作方法
コレクションを
Tokens（トークン）に切り替える。カラーバリアブルを作成する。
色を指定する部分で右クリック（またはライブラリアイコンをクリック）。
さきほど作った
Primitivesコレクションの中から色を選ぶ。
登録リスト例
使用ガイドラインに基づいて、以下のように役割を与えていきます。
コレクション名：Tokens（トークン）
アクション・リンク
名前:
Surface/Text/Border/Action/Status参照値:
Blue/Primary意味：メインのアクションボタンの背景色
テキスト
名前:
Text/Primary(またはText/Body)参照値:
Neutral/Black意味：本文や主要なラベルの文字色
背景 (Surface)
名前:
Surface/Base参照値:
Neutral/White意味：画面全体の背景色
状態 (State)
名前:
State/Success参照値:
Success/Success意味：完了時のアイコンやテキスト色
なぜこの構成にするのか？
この作業を終えると、デザインデータは最強のメンテナンス性を手に入れます。
修正に強い： 将来、「ブランドカラーの青をもう少し濃くしたい」となった場合、
PrimitivesのPrimary/Blueの値を1箇所書き換えるだけで、ボタンもリンクもアイコンも、それを参照している箇所が一斉に更新されます。ダークモード対応：
Tokensコレクションに「Dark Mode」という列を追加し、例えばSurface/Baseの参照先をNeutral/BackgroundからNeutral/Blackに切り替えるだけで、一瞬でダークモードが完成します。
まとめ
バリアブルは 素材 (Primitives)と 意味 (Tokens)の2つのコレクションに分ける。
名前は
/を使ってグループ化し、整理しやすくする。Tokens には直接色コードを入れず、Primitives を参照（エイリアス）させる。
これで、拡張性の高いデザインシステムの土台が完成しました。 さらには登録したこれらのバリアブルを実際にFigmaのデザインデータ（フレームやテキスト）に適用していくフローがあり、その作業も必要になります。
