Introduction

デザイントークンとは、デザインシステムを構成するための全ての値であり、データとして表されます。例えば hsl で表現されたカラーや、透明度などの値などを含みます。

種類

デザイントークンは、グローバルトークン、セマンティックトークン、コンポーネントトークンの 3 つに分類されます。

利用コンテキストにとらわれない名前で表される、デザイン言語のプリミティブな値です。セマンティックトークン、コンポーネントトークンは、必ずグローバルトークンを利用して構成されます。

#F08B71

特定コンテキストで利用され、尚且つその値が複数の場所に現れる場合に利用される値です。グローバルトークンで構成され、実際の値は持ちません。

$bg-primary-color

特定のコンポーネント特有の値です。

$button-bg-primary-color

利用することは最も簡単ですが、コンテキストを持たないためその意図を測りにくいのが特徴です。そのため、できるだけセマンティックトークンとコンポーネントトークンの利用を推奨します。

セマンティックはその意図を表すため、意図に合った利用をしましょう。