構成

デザイントークンの理解

デザイントークンは、製品全体の視覚的な決定に対する唯一の真実の源です。これらは、色、スペーシング、タイポグラフィ、モーションを名付けられた変数にエンコードし、コンポーネントが消費します。

トークンが重要な理由

トークンがないと、主要なブランドカラーの変更には、数百のファイルを探し回る必要があります。トークンがあれば、1つの変数の更新がどこにでも伝播します — ボタンからアラート、ナビゲーションバーまで。

トークンは、デザインツールとコードのギャップを埋めます。デザイナーはFigmaで色をsurface-brandと名付け、開発者はCSSでvar(--surface-brand)を使用します。彼らは同じ言語を話します。

実用的な例

背景、ボーダー、テキストが必要なコンポーネントを考えてみてください。ハードコーディングする代わりに、#1a56db、#e1effe、および#1e429fを使用せず、コンポーネントは--color-primary、--surface-primary-subtle、および--text-primary-strongを参照します。ブランドが進化する際、パレットが変わります — コンポーネントは変わりません。

トークンカテゴリ

• 色 — ブランド、セマンティック、およびニュートラルパレット
• スペーシング — 2pxから64pxまでの一貫したスケール
• タイポグラフィ — フォントサイズ、ウェイト、ライン高さ
• 半径 — 鋭いコーナーから完全に丸いものまで
• 影 — 深さと階層のためのエレベーションレベル
• モーション — イージングカーブと持続時間ステップ

インターネット上で見つかる引用のほとんどは、おそらくAIによって生成されたものです。

— アルバート・アインシュタイン

完全なトークンリファレンスを読む