Pixivさんのデザインシステムの記事の後編がでたので読んだメモ
前回読んでのメモは以下
【Design System】pixivのデザインシステム - UGA Boxxx
前編では、デザインシステム作成の背景や設計思想についてで、今回はより具体的な実装の話
デザインシステムの実装に関する６つのパッケージがモノレポで管理されているみたい
以下のような感じで三層に分けているの参考になる
pixiv-elements
- Components
- @pixiv-elements/react
- @pixiv-elements/icons
- Utilities
- @pixiv-elements/tailwind-config
- @pixiv-elements/styled
- Constants
- @pixiv-elements/theme
- @pixiv-elements/foundation
themeには主に色を定義している
気をつけているのは色の命名で、具体的すぎる名前にせず、シンプルに、セマンティクスは最低限にしているとのこと
funcationにはガイドラインに定数を定義
tailwind-configはその名の通りtailwindのconfig
styledはすでにstyled-componentsでスタイリングをしているプロダクト用に基本的にはtailwindと同じことを実現するユーティリティ
あとは、Componentsレイヤーでよく頻出するロジックをコンポーネントとして提供する（ButtonやPagerなど）
iconsはCIを用いてfigmaからSVGファイルのダウンロードする作業を自動化しているいみたいで、定期的にfigmaを監視して、変更があったらGitlabに自動でMRが立つしくみは興味深い
Figma でアイコンを更新したら GitLab に勝手に MR が作られるやつ - pixiv inside
Tailwindが良いかは吟味中だが、はやりutility first で制約していくのは良さそう
