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
220
デザインシステムcharcoalとJetpack Compose
gatosyocora
April 20, 2023
Tweet
Share
More Decks by gatosyocora
See All by gatosyocora
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
280
Other Decks in Programming
See All in Programming
從零到一:搭建你的第一個 Observability 平台
blueswen
0
310
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
0
200
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
150
TypeScript LSP の今までとこれから
quramy
1
460
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
480
バリデーションライブラリ徹底比較
nayuta999999
1
580
PT AI без купюр
v0lka
0
210
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
130
インターフェース設計のコツとツボ
togishima
2
670
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
310
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
2
1.9k
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
184
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Code Reviewing Like a Champion
maltzj
524
40k
We Have a Design System, Now What?
morganepeng
52
7.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
RailsConf 2023
tenderlove
30
1.1k
Bash Introduction
62gerente
614
210k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
470
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