デザインシステムとトークン

デザインシステムは、画面を作るための部品と、その使い方のルールをまとめたものです。デザイナーだけのものではなく、デザインとコードで同じ部品を共有することに価値があります。

公開されている例として、Google の Material Design、IBM の Carbon、デジタル庁のデザインシステムなどがあり、構成や書き方の参考になります。ただし、他社のものをそのまま使うより、自分たちのプロダクトで実際に使う部品から少しずつ作るほうが定着しやすいです。

デザイントークンは、色・余白・文字の大きさ・角の丸みなどの値に名前をつけたものです。「#1A73E8」ではなく「color.text.link」のように名前で使うと、デザインとコードで同じ値を共有でき、変えるときも1か所を直すだけで済みます。

画面では意味のトークンを使うのが基本です。「blue.600」を直接使うと、ブランドの色を変えたりダークモードにしたりするときに、使っている場所を全部探すことになります。ダークモードは、意味のトークンの指す先を切り替えて実現します（color.bg.surface がライトでは white、ダークでは gray.900）。部品のトークンは、部品ごとに細かく調整したいときだけ足します。全部の部品に作ると数が増えすぎて管理しきれなくなります。

色のトークンは、2段階で作るのが基本です。①明るさの段階を持つ基本の色（パレット）、②そこから用途ごとに選んだ意味の色です。

状態の色（赤・黄・緑）は、文字の色・背景の色・枠の色をそれぞれ用意すると使いやすくなります。「エラーの赤い文字」と「エラーの薄い赤の背景」は別のトークンです。

文字は、大きさだけでなく、太さ・行の高さ・文字の間隔を組みにしてトークンにします。画面では組みの名前で使います。

数値は一例です。日本語は漢字が詰まって見えやすいので、本文の行の高さは文字の大きさの 1.5〜1.8 倍程度にすることが多いです。種類は 6〜8 個程度に絞ると、迷いにくくなります。

余白も色と同じように、決まった段階をトークンにして、そこから選びます。4 や 8 の倍数がよく使われます。

落とし穴：トークンにない値（13px の余白など）をデザインで使うと、実装で近い値に丸められるか、例外の値が増えていきます。迷ったら既存のトークンに合わせるか、トークンとして追加するかを決めます。

ダークモードは、OS の設定に合わせて画面を暗い配色にするものです。色を反転するのではなく、意味のトークンの指す先を切り替えて作ります。そのため、画面で基本の色（blue.600 など）を直接使っていないことが前提になります。

Web では、OS の設定を prefers-color-scheme で受け取り、CSS のカスタムプロパティの値を切り替えます。

:root { --color-text-primary: #1f2328; --color-bg-surface: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --color-text-primary: #e6e8eb; --color-bg-surface: #16181c; }
}

Figma の変数とコード：Figma の「変数（Variables）」でトークンを定義し、「モード」でライト・ダークを切り替えられます。コードでは CSS のカスタムプロパティ（--color-text-primary など）や、iOS・Android の色の定義になります。名前の付け方をデザインとコードでそろえ、どちらを正にするか（Figma から書き出すか、コードの定義を正にするか）と、更新の手順をエンジニアと決めておきます。

デザインシステムは、作ることより使われ続けることが大事です。追加・変更・廃止の流れが決まっていないと、画面ごとのその場しのぎの部品が増え、Figma とコードがずれていきます。

定期的に、デザインシステムの担当（デザイナーとエンジニア）で要望と使われ方を見直す場を持つと、ずれが小さいうちに直せます。