デザインシステムcharcoalとJetpack Compose

Transcript

1. gatosyocora デザインシステムcharcoalとJetpack Compose
2. 自己紹介 • gatosyocora • 2021年新卒入社 • Androidエンジニア • pixiv Androidアプリ 2
3. アジェンダ 1. デザインシステムcharcoal 1. なぜ作ったのか 2. 設計思想 2. charcoal-android 1. Jetpack Compose対応コンポーネント 2. 保守・運用 3
4. デザインシステム 以下をまとめたもの • スタイルガイド：デザインの原則がまとまったドキュメント • UIライブラリ：UIの実装をまとめたもの • ルール・ツール群：リソース管理のルール、変換スクリプトなど 4
5. なぜデザインシステムを作ったのか？ プロダクトに大きな柔軟性を生む • リブランディングしやすい • 良しとするデザインが定まっている • →プロダクトの意図がユーザーに伝わりやすい • 要素を変えやすい • UI実装にかかるコスト低減 5
6. charcoal • ピクシブ株式会社のデザインシステム • Web版はOSSとして公開中 • https://github.com/pixiv/charcoal • Android版, iOS版は公開準備中 6
7. charcoalの設計思想 https://pixiv.github.io/charcoal/docs/#/ 7
8. Bold 20 Bold 16 Reguler 20 charcoalのConstants (Design Token) Text 1 Text 3 Surface 1 Tx Tx Tx LikeOn ShareAndroid BookmarkOn 8
9. charcoalのComponents 9
10. charcoalで使用している色について • WCAG3 (W3C Accessibility Guidelines) を参考に決めている • https://www.w3.org/TR/wcag-3.0/ 1
11. ピクシブのAndroidアプリとcharcoal-android 1 一部導入済 導入予定 導入しない
12. charcoal-androidの実装 • Android View • Material components for androidをベース • 画面に対して CharcoalTheme を設定すると適用される • Jetpack Compose • charcoalのトークンに準拠するようにラップ 1
13. Jetpack Compose対応コンポーネント • RadioButton • TopAppBar • CharcoalButton • CharcoalSwitch • CharcoalCheckbox 1
14. RadioButton 1
15. CharcoalRadioButtonColors 1
16. Point：alphaの合成 1
17. TopAppBar 1
18. CharcoalTopAppBarStyle 1
19. Point：alphaをcharcoalのものに合わせた 19
20. Point：alphaをcharcoalのものに合わせた 2
21. charcoal-androidのカタログアプリ 2
22. MagicPodによるVRT 2
23. WebとのDesign Tokenの同期 • 更新されていればPRを作成 • CIで変換 • 色、文字スタイルなど：json -> xml • アイコン：svg -> vector drawable 2
24. Vector Drawableへの変換 • VectorDrawableToolを使用 • Android Studioで使用されているGUIツール • ビルドしてCIで利用 2
25. まとめ • デザインシステムcharcoal ◦ ピクシブのプロダクトのためのスタイルガイド、UIライブラリ、ルール・ツール 群をまとめたもの ◦ プロダクトに大きな柔軟性が生まれる • charcoal-android ◦ charcoalのDesign Tokenに合わせるためのいくつかのPoint ◦ カタログアプリとVRT ◦ WebとのDesign Tokenの同期 2