Design Token
Jina Aneeが提唱
Design Systemにおいて最小単位のstyleを定義するもの
予めプロジェクト内で使うDesignの要素を定義しておく
無尽蔵な中から色を選択するのではなく、予め用意された色を選択することで統一感を保てる
順序は知らないが、Tailwindでstylingする際に、
small とかでmarginの幅が決定することに近いFigmaのようなデザインファイルと、実装のズレをなくすために使える
参考
わかりやすい
>#WIP
割と数を列挙したもの
例
Global tokenの中から特によく使うものに別名を付けたもの
例えば、
--red-700 に error という名前をつけるなどDesign Tokenの対象の例
これはFigma Tokensで指定できるもののの一部
ここまでできるんだったら、
FigmaとStorybooksと、React Componentとtailwindを紐付けて
このCOmponentはFigmaのここに対応してます、とかできそう
そもそもTailwindを使うなら、Figma上のデザインをTailwindに合わせてもいいな
もちろん逆でもいい。というか普通は逆だろう
Figmaのルールに従って、Tailwindのルールを生成する
具体例
Design Tokenの考え方
>デザイントークンは色、余白、行間、Elevation(高さ)、フォント、フォントサイズ、シャドウ、アニメーション時間など複数のコンポーネントやテキスト要素にまたいで使われる情報を保存します。 ref
具体例
プロダクトの背景色
Design Tokenの利用例
これはStyle Dictionaryを使っている
一箇所を変えれば、デザインファイルも、実装も変わっていることがわかる