Pixivさんのデザインシステムの記事の後編がでたので読んだメモ
前回読んでのメモは以下
【Design System】pixivのデザインシステム - UGA Boxxx
前編では、デザインシステム作成の背景や設計思想についてで、今回はより具体的な実装の話
デザインシステムの実装に関する6つのパッケージがモノレポで管理されているみたい
以下のような感じで三層に分けているの参考になる
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 で制約していくのは良さそう