Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか / multi-framework-designsystem-with-arkui-and-radixui

Transcript

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