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
230
デザインシステムcharcoalとJetpack Compose
gatosyocora
April 20, 2023
Tweet
Share
More Decks by gatosyocora
See All by gatosyocora
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
310
Other Decks in Programming
See All in Programming
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
私の後悔をAWS DMSで解決した話
hiramax
4
210
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
230
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Cache Me If You Can
ryunen344
2
1.4k
Navigating Dependency Injection with Metro
zacsweers
3
960
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.2k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
RailsConf 2023
tenderlove
30
1.2k
How to train your dragon (web standard)
notwaldorf
96
6.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
For a Future-Friendly Web
brad_frost
180
9.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Why Our Code Smells
bkeepers
PRO
339
57k
Music & Morning Musume
bryan
46
6.8k
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