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
180
デザインシステムcharcoalとJetpack Compose
gatosyocora
April 20, 2023
Tweet
Share
More Decks by gatosyocora
See All by gatosyocora
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
250
Other Decks in Programming
See All in Programming
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
『品質』という言葉が嫌いな理由
korimu
0
160
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
GAEログのコスト削減
mot_techtalk
0
110
Domain-Driven Transformation
hschwentner
2
1.9k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Bash Introduction
62gerente
610
210k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
GitHub's CSS Performance
jonrohan
1030
460k
Building Your Own Lightsaber
phodgson
104
6.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Docker and Python
trallard
44
3.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Automating Front-end Workflow
addyosmani
1367
200k
Into the Great Unknown - MozCon
thekraken
35
1.6k
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