デザインシステムとは

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

何でできているのか

機能しているデザインシステムのほとんどは四つの層を持ち、うまくいかないものはたいてい一つ目が欠けています。

デザイントークン: すべての土台にある名前付きの値。色、タイポグラフィ、余白、角丸、影、モーション。

コンポーネント: 再利用される部品。値を直書きするのではなくトークンを参照するように作られたもの。ボタン、フォームフィールド、モーダル。

ガイドライン: どの場面でどのコンポーネントを使うか、そのための文言をどう書くか、アクセシビリティが何を要求するか。

ドキュメント: 以上のすべてを人が見つけられる、読める場所。

コンポーネントライブラリではありません。 ライブラリは一つの層です。トークンのないデザインシステムは、一貫性のない値の上に一貫したコンポーネントを載せることになります。

Figma ファイルではありません。 Figma ファイルはその一つの表現です。コードが同じ決定を参照していなければ、よく似た二つのデザインシステムがあるだけです。

ドキュメントではありません。 ドキュメントはシステムを記述します。トークンを決める前にドキュメントサイトから始めたチームは、何もないものの説明を書いたことになります。

デザインシステムの壊れ方は崩壊ではなく浸食です。誰も放棄を決めたりはしません。ただ、外側に値が積み上がっていきます。

どれも単体では筋が通っています。まとめて見ると、誰も作ろうと決めていない複数のデザインシステムが並走するコードベースになります。

対抗策は規律ではありません。規律は規模に耐えません。システムを最も抵抗の少ない道にすること、つまりそれを使うすべてのツールから、そのツールが期待する形式で、手作業の一手間なしに手に入る状態にすることです。

手作業なら、最初にまとまった体系ができるまで、たいてい数日から数週間かかります。個々の判断が難しいからではなく、判断が数百あり互いに影響し合うからです。どの組み合わせでもコントラストが保たれる色スケール、単なる反転ではないダークモード、リブランドに耐えるセマンティックな命名。

Flash DSM はプロンプト、URL、Figma ファイル、スクリーンショットからトークン層とコンポーネント仕様を生成し、その後もコード・Figma・コードを書く AI エージェントと同期させ続けます。