Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか / multi-framework-designsystem-with-arkui-and-radixui
by konkarin
Slide 1
Slide 1 text
Radix UIとArk UIを併⽤した
マルチフレームワーク対応
デザインシステムの道はあるか
Vue Fes Japan 2024 After Talk
2024.10.29
Slide 2
Slide 2 text
Speaker
株式会社ヤプリ
エンジニアリングマネージャー
こん
てぃらの という
猫と暮らしています。
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
過去に⾃⼒でデザインシステムを
実装していた。いろいろ⼤変すぎ
て塩漬け😭
Radix-UIを使って、実装とデザインの
差を埋める活動を始めた💪
Slide 7
Slide 7 text
ヘッドレスUIライブラリ使って
デザインシステムリベンジできそう？
Slide 8
Slide 8 text
スタイルを持たないアクセシブル（a11yに準拠した）なUIライブラリのこと。
1. Headless UI
○ ちょっと数が少なめ‧‧‧。
2. Radix UI
○ 王道。すでにCRMで採⽤している。
○ Radix Vueが有志で作られている。実質マルチフレームワーク対応！
3. Ark UI
○ Chakra UIの素。マルチフレームワーク対応！
ヘッドレスUIライブラリ
Slide 9
Slide 9 text
スタイルを持たないアクセシブル（a11yに準拠した）なUIライブラリのこと。
1. Headless UI
○ ちょっと数が少なめ‧‧‧。
2. Radix UI
○ 王道。すでにCRMで採⽤している。
○ Radix Vueが有志で作られている。実質マルチフレームワーク対応！
3. Ark UI
○ Chakra UIの素。マルチフレームワーク対応！
ヘッドレスUIライブラリ
Slide 10
Slide 10 text
良さそう
Slide 11
Slide 11 text
Ark UIにあってRadix UIにないもの、その逆もいくつかある
Ark UIとRadix UIの差分
Slide 12
Slide 12 text
どっちも使えば幅広くできそう💡
Slide 13
Slide 13 text
⾃前で作るしかない。。。
とはいえ参考にできるものはいくつかある。
● shadcn/ui, shadcn/vue（中でRadix UIを使っている）
● その他UIライブラリ（いっぱいある）
ヘッドレスUIライブラリにないもの
Slide 14
Slide 14 text
フレームワーク間でスタイル共有したい。
1. Utility系CSS（TailwindCSS, UnoCSS, ...）
○ CRMで採⽤。
2. CSS Modules
○ 弊社で事例なし。
3. CSS in JS（Emotion, Kuma UI, PandaCSS, ...）
○ 弊社で事例なし。でも良さげ。
スタイルの統⼀
Slide 15
Slide 15 text
フレームワーク間でスタイル共有したい。
1. Utility系CSS（TailwindCSS, UnoCSS, ...）
○ CRMで採⽤。とりあえず試す。（筆者ほぼ使ったこと無い
2. CSS Modules
○ 弊社で事例なし。
3. CSS in JS（Emotion, Kuma UI, PandaCSS, ...）
○ 弊社で事例なし。でも良さげ。
スタイルの統⼀
Slide 16
Slide 16 text
Radix UIとArk UIを併⽤した
マルチフレームワーク対応
デザインシステムの道はあるか
Vue Fes Japan 2024 After Talk
2024.10.29 ありそう
Slide 17
Slide 17 text
作った
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
interface/styleの共通部分
https://github.com/konkarin/multi-framework-design-system/tree/main/packages/common/DropdowmnMenu
Slide 21
Slide 21 text
● Ark UIにしかないCombobox、Radix UIにしかないDropdownMenuを作った
● どっちもドキュメントのサンプルコードをコピペで⼤体実装できる👍
○ 必要ならカスタムできる。
● Tailwindで⾒た⽬の実装を簡単に共通化できた。
○ 必要なら拡張できる。
● コンポーネントのinterfaceも共通化できた。
○ 必要なら拡張できる。
説明
Slide 22
Slide 22 text
https://github.com/konkarin/multi-framework-design-system
リポジトリはこちら