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
790
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
4.1k
30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend
konkarin
0
56
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Designing for humans not robots
tammielis
253
25k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
Building an army of robots
kneath
306
45k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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 リポジトリはこちら