デザインシステム

デザインシステムとは、プロダクト全体を組み立てる部品のセットです。色、書体、余白、ボタン、入力欄、カード。これらを「背景色」「角の丸み」のような名前つきの値、つまりトークンとして定義し、FigmaでもコードでもCSS変数やTailwindの設定として同じように使えるようにします。

トークンの上にコンポーネントを重ねます。それぞれにバリエーションと状態があり、どんなときに使うかを説明したドキュメントがつきます。誰も開かないPDFではなく、プロダクトと一緒に更新され続けるドキュメントです。

小さなものでも、私のプロジェクトには必ずこれがあります。新しい画面が必要になっても、すでにある部品を組み合わせるだけでほぼできあがり、ブランドの見え方もどこでもそろいます。すでに土台があるプロダクトなら、一からつくり直さずに整理して、ドキュメントにまとめることもできます。