進め方
Design Tokenは、デザインシステムの土台を定義します。色、スペーシング、タイポグラフィ、エレベーション、ボーダー、モーションを扱い、生の値とセマンティックな意味を結びつける命名・使用ルールを含みます。
3層構造では、グローバル値、セマンティックなエイリアス、コンポーネント固有のトークンを分けます。この区別により、チームは使う理由を失わずに値を変更できます。既存の使用状況の監査とマルチブランドへのマッピングは、明確に別のタスクとされています。
期待される成果物
- トークンのカテゴリーと命名スキーム
- グローバル、エイリアス、コンポーネントの各トークンの関係
- 使い方とバージョニングのガイダンス
ブリーフからレビューまで
- 01基盤を棚卸しする
プロダクトに必要な色、レイアウト、タイポグラフィ、エレベーション、モーションの値を一覧にします。
- 02層を定義する
生のスケールとセマンティックな役割を分け、有用な場合にのみコンポーネント固有の名前を追加します。
- 03利用方法を文書化する
エイリアスをどこに適用するか、またコンポーネントがハードコードされた値ではなくエイリアスをどう参照すべきかを説明します。