デザインシステム用語集

デザインシステムの仕事で使う語彙を、平易に定義しました。製品ではなく分野そのものを説明しているので、Flash DSMを開かなくても役に立ちます。

Figma バリアブル

Figma バリアブルとは、色・数値・文字列・真偽値を Figma ファイル内に保存する名前付きの値で、ライトとダークのようなモードに対応します。Figma におけるデザイントークンの標準的な形ですが、Figma の REST API から読み出すには Enterprise プランが必要です。

カラースケール

カラースケールとは、一つの色相の濃淡を順に並べた集合で、慣習的に 50 から 900 まで番号を振ります。刻みが知覚的に均等に見え、特定の組み合わせが既知のコントラスト比を満たすように設計されており、任意の 16 進数ではなく役割と段階で色を選べるようになります。

セマンティックトークン

セマンティックトークンとは、保持する値ではなく果たす役割にちなんで名付けられたデザイントークンです。--color-red-600 ではなく --color-text-danger のように命名し、通常はプリミティブトークンを参照するため、参照側の名前を変えずに元の値だけを差し替えられます。

ダークモードトークン

ダークモードトークンとは、ライトテーマと同じセマンティック名に結び付けられた二つ目の値の集合です。モードを切り替えると --color-surface のような名前が別の色を指すようになり、どのモードが有効かをコンポーネント側が知る必要はありません。

タイプスケール

タイプスケールとは、デザインシステムが許容するフォントサイズを順に並べた集合で、通常は基準サイズに一定の比率を掛けて作ります。テキストをこの段階に限定することが、多人数で作る画面のタイポグラフィを一貫させる仕組みです。

デザインからコードへ

デザインからコードへとは、Figma などのツールで下した決定を動作するフロントエンドのコードに変える工程を指します。長く使える方法はキャンバスからマークアップを生成することではなくデザイントークンを受け渡すことです。画面が変わってもトークンは有効なままですが、生成されたマークアップはそうではありません。

デザインシステム

デザインシステムとは、チームが一貫したプロダクトを作るために共有するデザイン上の決定、コンポーネント、ルールの総体です。通常はデザイントークン、コンポーネントライブラリ、利用ガイドライン、ドキュメントを含み、デザインとコード双方の単一の情報源として維持されます。

デザイントークン

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

デザイントークンのための MCP

Model Context Protocol は、AI アシスタントを外部のツールやデータに接続するためのオープン標準です。デザイントークンに適用すると、MCP サーバーがプロジェクトの最新のトークン値を AI コーディングエージェントに提供し、生成されるコンポーネントがモデルの創作した値ではなく実際のデザインシステムを参照するようになります。

トークンドリフト

トークンドリフトとは、デザインシステムに記録された決定と、プロダクトが実際に使っている値とが少しずつ食い違っていく現象です。Figma ファイル、スタイルシート、AI が生成したコードといった面が共有の情報源を参照しなくなり、独自の値を溜め込むことで起こります。