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
570
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
3.4k
30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend
konkarin
0
39
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Practical Orchestrator
shlominoach
186
10k
Rails Girls Zürich Keynote
gr2m
94
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Designing for Performance
lara
604
68k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
It's Worth the Effort
3n
184
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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 リポジトリはこちら