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
デザインシステムcharcoalとJetpack Compose
Search
gatosyocora
April 20, 2023
Programming
1
99
デザインシステムcharcoalとJetpack Compose
gatosyocora
April 20, 2023
Tweet
Share
More Decks by gatosyocora
See All by gatosyocora
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
150
Other Decks in Programming
See All in Programming
TypeScriptから始める VR生活
tamagokakeg
2
140
HonoのRPCで真の型安全が欲しかった
kosei28
1
170
RaaP
ksss
0
170
The grand strategy of Ruby Parser
yui_knk
5
500
一文字エイリアスのすすめ
fujimura
0
200
The Hotwire Landscape After Turbo 8 @ Helvetic Ruby 2024, Zurich
marcoroth
0
120
ペパボOpenTelemetry革命
pyama86
2
1.3k
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
990
JS RPCを理解する
yusukebe
5
310
TypeScript Custom GitHub Action Development Tips
peaceiris
5
910
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
420
From LALR to IELR: A Lrama's Next Step
junk0612
0
110
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Debugging Ruby Performance
tmm1
70
11k
Writing Fast Ruby
sferik
622
60k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Gamification - CAS2011
davidbonilla
77
4.6k
The Language of Interfaces
destraynor
151
23k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Agile that works and the tools we love
rasmusluckow
325
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Transcript
gatosyocora デザインシステムcharcoalとJetpack Compose
自己紹介 • gatosyocora • 2021年新卒入社 • Androidエンジニア • pixiv Androidアプリ
2
アジェンダ 1. デザインシステムcharcoal 1. なぜ作ったのか 2. 設計思想 2. charcoal-android 1.
Jetpack Compose対応コンポーネント 2. 保守・運用 3
デザインシステム 以下をまとめたもの • スタイルガイド:デザインの原則がまとまったドキュメント • UIライブラリ:UIの実装をまとめたもの • ルール・ツール群:リソース管理のルール、変換スクリプトなど 4
なぜデザインシステムを作ったのか? プロダクトに大きな柔軟性を生む • リブランディングしやすい • 良しとするデザインが定まっている • →プロダクトの意図がユーザーに伝わりやすい • 要素を変えやすい
• UI実装にかかるコスト低減 5
charcoal • ピクシブ株式会社のデザインシステム • Web版はOSSとして公開中 • https://github.com/pixiv/charcoal • Android版, iOS版は公開準備中
6
charcoalの設計思想 https://pixiv.github.io/charcoal/docs/#/ 7
Bold 20 Bold 16 Reguler 20 charcoalのConstants (Design Token) Text
1 Text 3 Surface 1 Tx Tx Tx LikeOn ShareAndroid BookmarkOn 8
charcoalのComponents 9
charcoalで使用している色について • WCAG3 (W3C Accessibility Guidelines) を参考に決めている • https://www.w3.org/TR/wcag-3.0/ 1
ピクシブのAndroidアプリとcharcoal-android 1 一部導入済 導入予定 導入しない
charcoal-androidの実装 • Android View • Material components for androidをベース •
画面に対して CharcoalTheme を設定すると適用される • Jetpack Compose • charcoalのトークンに準拠するようにラップ 1
Jetpack Compose対応コンポーネント • RadioButton • TopAppBar • CharcoalButton • CharcoalSwitch
• CharcoalCheckbox 1
RadioButton 1
CharcoalRadioButtonColors 1
Point:alphaの合成 1
TopAppBar 1
CharcoalTopAppBarStyle 1
Point:alphaをcharcoalのものに合わせた 19
Point:alphaをcharcoalのものに合わせた 2
charcoal-androidのカタログアプリ 2
MagicPodによるVRT 2
WebとのDesign Tokenの同期 • 更新されていればPRを作成 • CIで変換 • 色、文字スタイルなど:json -> xml
• アイコン:svg -> vector drawable 2
Vector Drawableへの変換 • VectorDrawableToolを使用 • Android Studioで使用されているGUIツール • ビルドしてCIで利用 2
まとめ • デザインシステムcharcoal ◦ ピクシブのプロダクトのためのスタイルガイド、UIライブラリ、ルール・ツール 群をまとめたもの ◦ プロダクトに大きな柔軟性が生まれる • charcoal-android
◦ charcoalのDesign Tokenに合わせるためのいくつかのPoint ◦ カタログアプリとVRT ◦ WebとのDesign Tokenの同期 2