Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか ...
Search
konkarin
October 29, 2024
2
760
Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか / multi-framework-designsystem-with-arkui-and-radixui
konkarin
October 29, 2024
Tweet
Share
More Decks by konkarin
See All by konkarin
普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 2024 Nuxt3 version up
konkarin
4
4k
30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend
konkarin
0
53
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Language of Interfaces
destraynor
158
25k
The Pragmatic Product Professional
lauravandoore
35
6.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Done Done
chrislema
184
16k
Faster Mobile Websites
deanohume
307
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Transcript
Radix UIとArk UIを併⽤した マルチフレームワーク対応 デザインシステムの道はあるか Vue Fes Japan 2024 After
Talk 2024.10.29
Speaker 株式会社ヤプリ エンジニアリングマネージャー こん てぃらの という 猫と暮らしています。
None
None
None
過去に⾃⼒でデザインシステムを 実装していた。いろいろ⼤変すぎ て塩漬け😭 Radix-UIを使って、実装とデザインの 差を埋める活動を始めた💪
ヘッドレスUIライブラリ使って デザインシステムリベンジできそう?
スタイルを持たないアクセシブル(a11yに準拠した)なUIライブラリのこと。 1. Headless UI ◦ ちょっと数が少なめ‧‧‧。 2. Radix UI ◦
王道。すでにCRMで採⽤している。 ◦ Radix Vueが有志で作られている。実質マルチフレームワーク対応! 3. Ark UI ◦ Chakra UIの素。マルチフレームワーク対応! ヘッドレスUIライブラリ
スタイルを持たないアクセシブル(a11yに準拠した)なUIライブラリのこと。 1. Headless UI ◦ ちょっと数が少なめ‧‧‧。 2. Radix UI ◦
王道。すでにCRMで採⽤している。 ◦ Radix Vueが有志で作られている。実質マルチフレームワーク対応! 3. Ark UI ◦ Chakra UIの素。マルチフレームワーク対応! ヘッドレスUIライブラリ
良さそう
Ark UIにあってRadix UIにないもの、その逆もいくつかある Ark UIとRadix UIの差分
どっちも使えば幅広くできそう💡
⾃前で作るしかない。。。 とはいえ参考にできるものはいくつかある。 • shadcn/ui, shadcn/vue(中でRadix UIを使っている) • その他UIライブラリ(いっぱいある) ヘッドレスUIライブラリにないもの
フレームワーク間でスタイル共有したい。 1. Utility系CSS(TailwindCSS, UnoCSS, ...) ◦ CRMで採⽤。 2. CSS Modules
◦ 弊社で事例なし。 3. CSS in JS(Emotion, Kuma UI, PandaCSS, ...) ◦ 弊社で事例なし。でも良さげ。 スタイルの統⼀
フレームワーク間でスタイル共有したい。 1. Utility系CSS(TailwindCSS, UnoCSS, ...) ◦ CRMで採⽤。とりあえず試す。(筆者ほぼ使ったこと無い 2. CSS Modules
◦ 弊社で事例なし。 3. CSS in JS(Emotion, Kuma UI, PandaCSS, ...) ◦ 弊社で事例なし。でも良さげ。 スタイルの統⼀
Radix UIとArk UIを併⽤した マルチフレームワーク対応 デザインシステムの道はあるか Vue Fes Japan 2024 After
Talk 2024.10.29 ありそう
作った
None
None
interface/styleの共通部分 https://github.com/konkarin/multi-framework-design-system/tree/main/packages/common/DropdowmnMenu
• Ark UIにしかないCombobox、Radix UIにしかないDropdownMenuを作った • どっちもドキュメントのサンプルコードをコピペで⼤体実装できる👍 ◦ 必要ならカスタムできる。 • Tailwindで⾒た⽬の実装を簡単に共通化できた。
◦ 必要なら拡張できる。 • コンポーネントのinterfaceも共通化できた。 ◦ 必要なら拡張できる。 説明
https://github.com/konkarin/multi-framework-design-system リポジトリはこちら