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
1
74
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
2.1k
30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend
konkarin
0
33
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
We Have a Design System, Now What?
morganepeng
50
7.2k
Embracing the Ebb and Flow
colly
84
4.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
A Tale of Four Properties
chriscoyier
156
23k
Testing 201, or: Great Expectations
jmmastey
38
7k
Docker and Python
trallard
40
3.1k
How GitHub (no longer) Works
holman
311
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
KATA
mclloyd
29
13k
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 リポジトリはこちら