デザイントークンとは

デザイントークンとは、色・余白の刻み・フォントサイズといった一つのデザイン上の決定を保持する名前付きの値です。決定に名前を与えることで、デザインツールとコードの双方で再利用でき、場所ごとに値を手で書き写す必要がなくなります。

そもそもなぜ値に名前を付けるのか

主要なボタンに使う色を考えてみてください。直接書いてしまうと、スタイルシートでは #2563EB、Figma の塗りでは 16 進数のフィールド、そして先週誰かが打ち込んだコードでは文字列として現れます。同じものが三か所にあり、互いに何の関係もありません。

トークンにすれば、名前のもとに一度だけ現れます。

--color-action-primary: #2563EB;

ほかはすべてその名前を参照します。値を一度変えれば、使っている箇所すべてが変わります。この間接参照こそが考え方のすべてで、トークンに関する残りの話はここから派生します。

トークンが扱う範囲

  • 色: パレット、スケール、背景・境界線・文字・ステータスといった意味的な役割
  • タイポグラフィ: 書体、サイズ、ウェイト、行の高さ、字間
  • 余白: 一貫したスケール。通常は 4px または 8px を基準にする
  • 角丸と線幅
  • 影とエレベーション
  • モーション: 時間とイージング曲線
  • ブレークポイントとレイアウトの寸法

トークンは変数ではない

この区別は重要です。CSS 変数は仕組みです。デザイントークンは決定であり、たまたまその仕組みを通して表現されているにすぎません。

実務上の違いは可搬性です。トークンは特定の技術から独立して存在します。だからこそ同じトークン群を CSS カスタムプロパティ、Tailwind の設定、Figma のバリアブル、Swift、Kotlin として出力できます。CSS の一行としてしか存在しないなら、それは変数です。

フォーマット

W3C の Design Tokens Community Group は、ツール間の共通の受け渡しを想定した JSON フォーマットを公開しています。各トークンに $value と $type を与えます。

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

普及の度合いにはばらつきがありますが広がってきており、デザインツールとビルドパイプラインのあいだの中立な交換フォーマットとしては最も近い存在です。

Flash DSM との関係

Flash DSM はプロンプト、サイトの URL、Figma ファイル、スクリーンショットから完全なトークン群を生成し、CSS カスタムプロパティ、Tailwind の設定、Tokens Studio JSON、Figma のバリアブルとして書き出します。