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
650
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.6k
30万行を超えるCMSのNuxt3移行戦略 / Yappli tech conference 2023 Frontend
konkarin
0
44
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Language of Interfaces
destraynor
157
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Facilitating Awesome Meetings
lara
53
6.3k
Writing Fast Ruby
sferik
628
61k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
GraphQLとの向き合い方2022年版
quramy
45
14k
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 リポジトリはこちら