UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Design System】pixivのデザインシステム

pixivのデザインシステムの記事を拝見 inside.pixiv.blog

いま参画しているプロジェクトにまさに下のようなモチベーションになりつつあるので参考になった

ピクシブには多数のサービスがありますが、使っているサービスが変わっても「これは pixiv のサービスの一部だ」と感じられるようにしたいというモチベーションです。

ここも共感

ただし、ピクシブには 15〜20 程度の Web アプリケーションがある(しかもその大半が 5 年以上の歴史を持っている)ので、この状態を本当に実現しようと思うとまだまだ先は長いです。

課題

Reactコンポーネント集ではダメだったとのこと
→React縛りになる
→サービス特有のUIをつくりたい場合どうするのか

Bootsrapのようなフレームワークは作りたくないけど、定数配布以上の制約をつくりたい

解決案:Tailwind.css

Tailwind.css は「ユーティリティファースト」を謳った CSS フレームワーク

「Tailwind に存在しないクラスはガイドラインの範囲外なので書けない」という制約がつくれる

結果、「定数(Constants)」「ユーティリティ」「コンポーネント」の三層構造でデザインシステムを構築するというアイデア

デザインシステムを利用するチームは少なくとも「定数(Constants)」「ユーティリティ」を取り入れて始めることができる