この記事の目的
デザインシステムの導入を検討するにあたり、情報整理のための記事です。
デザインシステムとは
企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント
それらを具体的にデザイン・実装するためのUIパターンやコンポーネント
などを備えた一連のリソースのこと
https://blog.nijibox.jp/article/design_system/
構成要素ざっくり
デザイン原則：プロダクトに関わるステークホルダーがプロダクトを作っていく上で大事にすることを言語化したもの
原則に基づいたルール(スタイルガイド)
原則に基づいたツール(コンポーネントライブラリ)
デザイントークンとは
キーワード：Single Souce of Truth
名前と値のペアであり、その名前に関連した情報
それ以上分割できない、粒度の小さい情報
導入のメリット
対デザイナー
- デザインの修正を気軽にしやすくなる（これが１番大きい）
- 最初の設定さえきっちりしていれば、色変えたいけど工数かかるよな...とかなくなる
- figmaのローカルスタイルを定義するのの拡張版のような感じなので、一回定義しなおしてしまえばデザインがしやすくなる
- デザインする時にブレがなくなる（ここのボーダーの色他と違ってた〜などがなくなる）
対エンジニア
- うまくツールで連携していけば、variablesに定義するところまでを自動化できる
- storybookへの反映もうまくできそう
- フロントエンド領域（主にマークアップ）が苦手な人が実装する箇所がもっと減る
- githubをうまく利用すればfigma更新したら自動でデザイントークンリリースできる形へ設計可能
- 心得として未完成の状態（70%の状態）で進めていくことが大事
導入すると良いツール
figma tokens
jsonコミットしてPRを作ってくれる
style dictionary
↑で作った変数を出力してくれる
figma更新で各ドメインに対応したものを自動リリース
https://zenn.dev/ubie_dev/articles/7a6413af237eae?redirected=1#style-dictionary
流れイメージ
https://qiita.com/takusan64/items/b574b5f82594d3f8bf05
figmatokens
- プラグインに先にスタイルを設定→該当するものをクリックすることで適用される
- 既存のスタイルガイドの要素に適用すればその内容は反映される＋コピーした内容やコンポーネント化した内容でも、figma tokensがきちんと適用されていれば、一気に変更が可能
- ただし、すでにある要素でコンポーネント化していないものについては、コピーして作成していたとしても個別で適用していかないといけない→ここが時間かかりそう
https://blog.microcms.io/styledictionary-storybook/
https://note.com/seyanote/n/n7b327a9cfd72
https://engineerteam.note.jp/n/n91ea9db3bb5d
定義するべき項目
figma tokensで定義できるもの 可能な限り
figmatokens→style dictionary→storybookまでの連携
↓gitlab連携のパターン
https://creators.bengo4.com/entry/2023/02/28/120000#2Tokens-Studio-for-Figma%E3%82%92GitLab%E3%81%AB%E9%80%A3%E6%90%BA%E3%81%99%E3%82%8B
CSSとの連携
cssプロパティなども全部トークン経由で更新している会社もある（noteさんなど）
tailwindだとconfigに全部設定できるので楽そう..
bootstrapはあまり参考記事が見つけられず...
https://smth.uk/use-design-tokens-to-customise-bootstrap/