移行中の知識
デザイントークン
Design Token
定義
デザイントークン（design token）とは、色、寸法、typography、duration等のデザイン上の判断を、名前・種類・値を持つ再利用可能なdataとして表し、design tool、実装code、複数のplatform間で共有・変換しやすくするための単位です。単なる色見本や任意のCSS custom propertyと同義ではなく、「何の判断を表す値か」を識別でき、system内で参照・変更・変換できることが重要です。Design Tokens Community Groupはvendor-neutralな交換formatを2025.10でfirst stable versionとして公開していますが、これはW3C Recommendationではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
design system
Brand colorを役割名で運用する
見るポイント
`#0055AA`という値を各screenへ直接コピーするだけでなく、surface、text、interactive state等の役割に対応するtokenとして管理する。themeやbrand variationで実際の色値を変えても、利用側が「何のための色か」という意図を保てるかを見る。token名の付け方自体を唯一の正解にはしない。
multi-platform product
Spacingの判断をdesignとcodeで共有する
見るポイント
design tool上のspacing scaleとcode上の値が別々に増殖しないよう、共通のdesign decisionとしてtokenを交換・変換できる形にする。ただしtokenが存在するだけで、どのspacingをどこで使うかというlayout判断まで自動的に決まるわけではない。
注意
誤解しやすい点
- CSS custom propertyやFigma variableであれば、意味や運用を問わずすべてdesign tokenだと考える。
- raw valueをtoken化すればdesign consistencyや良いvisual hierarchyが自動的に成立すると考える。
- token数を増やしてすべての値を抽象化すること自体をdesign systemの成熟度だと考える。
- DTCG 2025.10をW3C RecommendationやW3C Standards Trackの規格として扱う。
関連
関連する概念
出典