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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 • gatosyocora • 2021年新卒入社 • Androidエンジニア • pixiv Androidアプリ 2

Slide 3

Slide 3 text

アジェンダ 1. デザインシステムcharcoal 1. なぜ作ったのか 2. 設計思想 2. charcoal-android 1. Jetpack Compose対応コンポーネント 2. 保守・運用 3

Slide 4

Slide 4 text

デザインシステム以下をまとめたもの • スタイルガイド：デザインの原則がまとまったドキュメント • UIライブラリ：UIの実装をまとめたもの • ルール・ツール群：リソース管理のルール、変換スクリプトなど 4

Slide 5

Slide 5 text

なぜデザインシステムを作ったのか？プロダクトに大きな柔軟性を生む • リブランディングしやすい • 良しとするデザインが定まっている • →プロダクトの意図がユーザーに伝わりやすい • 要素を変えやすい • UI実装にかかるコスト低減 5

Slide 6

Slide 6 text

charcoal • ピクシブ株式会社のデザインシステム • Web版はOSSとして公開中 • https://github.com/pixiv/charcoal • Android版, iOS版は公開準備中 6

Slide 7

Slide 7 text

charcoalの設計思想 https://pixiv.github.io/charcoal/docs/#/ 7

Slide 8

Slide 8 text

Bold 20 Bold 16 Reguler 20 charcoalのConstants (Design Token) Text 1 Text 3 Surface 1 Tx Tx Tx LikeOn ShareAndroid BookmarkOn 8

Slide 9

Slide 9 text

charcoalのComponents 9

Slide 10

Slide 10 text

charcoalで使用している色について • WCAG3 (W3C Accessibility Guidelines) を参考に決めている • https://www.w3.org/TR/wcag-3.0/ 1

Slide 11

Slide 11 text

ピクシブのAndroidアプリとcharcoal-android 1 一部導入済導入予定導入しない

Slide 12

Slide 12 text

charcoal-androidの実装 • Android View • Material components for androidをベース • 画面に対して CharcoalTheme を設定すると適用される • Jetpack Compose • charcoalのトークンに準拠するようにラップ 1

Slide 13

Slide 13 text

Jetpack Compose対応コンポーネント • RadioButton • TopAppBar • CharcoalButton • CharcoalSwitch • CharcoalCheckbox 1

Slide 14

Slide 14 text

RadioButton 1

Slide 15

Slide 15 text

CharcoalRadioButtonColors 1

Slide 16

Slide 16 text

Point：alphaの合成 1

Slide 17

Slide 17 text

TopAppBar 1

Slide 18

Slide 18 text

CharcoalTopAppBarStyle 1

Slide 19

Slide 19 text

Point：alphaをcharcoalのものに合わせた 19

Slide 20

Slide 20 text

Point：alphaをcharcoalのものに合わせた 2

Slide 21

Slide 21 text

charcoal-androidのカタログアプリ 2

Slide 22

Slide 22 text

MagicPodによるVRT 2

Slide 23

Slide 23 text

WebとのDesign Tokenの同期 • 更新されていればPRを作成 • CIで変換 • 色、文字スタイルなど：json -> xml • アイコン：svg -> vector drawable 2

Slide 24

Slide 24 text

Vector Drawableへの変換 • VectorDrawableToolを使用 • Android Studioで使用されているGUIツール • ビルドしてCIで利用 2

Slide 25

Slide 25 text

まとめ ● デザインシステムcharcoal ○ ピクシブのプロダクトのためのスタイルガイド、UIライブラリ、ルール・ツール群をまとめたもの ○ プロダクトに大きな柔軟性が生まれる ● charcoal-android ○ charcoalのDesign Tokenに合わせるためのいくつかのPoint ○ カタログアプリとVRT ○ WebとのDesign Tokenの同期 2