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
160
デザインシステムcharcoalとJetpack Compose
gatosyocora
April 20, 2023
Tweet
Share
More Decks by gatosyocora
See All by gatosyocora
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
230
Other Decks in Programming
See All in Programming
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
イベント駆動で成長して委員会
happymana
1
320
cmp.Or に感動した
otakakot
2
150
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
100
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.5k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
330
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing for Performance
lara
604
68k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How STYLIGHT went responsive
nonsquared
95
5.2k
Making Projects Easy
brettharned
115
5.9k
For a Future-Friendly Web
brad_frost
175
9.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Practical Orchestrator
shlominoach
186
10k
How to Ace a Technical Interview
jacobian
276
23k
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