デザインシステムについてのインプット
よいデザインシステムとは
ざっくり言ったら「デザインに関するルール、ガイドライン」
くらいに理解した
よいデザイントークンとは
ざっくり言ったら「色や余白などのデザインシステムを構成するピース」
くらいに理解した
このトークンがあればデザインを一貫性を持って管理することができる
またこのトークンを使ってデザインと開発を同期させ相互にズレがないようにできる
（Single Source of Truthの元にする）
よいデザイントークンにはGlobal(Primitive)トークン、Aliasトークンがある
Aliasトークンは更にSemanticトークンやComponentトークンに分けられる
- Globalトークン: Tailwindのblue-500のように基底の命名にする
- Semanticトークン: text-primaryやborder-secondaryのようにどこ（どうやって）使うかで命名する
- Componentトークン: button-primaryのようにコンポーネントに特化した命名にする
よい元々Figma本体でのデザイントークン管理はできず、Tokens Studio(Figma Tokens)というサードパーティを使っていたが、2023年にvariablesという機能が追加されFigma本体だけで解決できるようになったらしい
元々Figma本体にもstyleという機能はあったがstyleはstyleを参照できず、デザインの変更に弱かった
またダークモードなどの対応も面倒だった
よいFigmaとコードを同期する
重要なこの設定がなんだかんだで一番大変そう
（一回設定すればあとはgithub actionsで回せるっぽい）
Tailwindに変換するならこの辺りも必要
よいTailwindは初めからGlobalトークンで全て定義されててそれを使ってスタイルしようっていう設計なのに対して、デザイントークンはSemanticトークンに置き換えてエイリアスで運用しようって考えだからあんまり相性良くないように感じた🤔
（というか最初の設定が一工程面倒）
よいデザイントークンの仕様の取り決めをしているコミュニティ
Design Tokens Community Group