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
Mobile Design System at scale
Search
Kajornsak Peerapathananont
December 20, 2020
Technology
0
77
Mobile Design System at scale
Android Bangkok Conference 2020
Kajornsak Peerapathananont
December 20, 2020
Tweet
Share
More Decks by Kajornsak Peerapathananont
See All by Kajornsak Peerapathananont
Understanding your Android build
kajornsakp
0
30
iOSDevTH #21
kajornsakp
0
37
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
52
What's new in Flutter 2020
kajornsakp
0
56
Mobile Machine Learning for All Skill Levels
kajornsakp
0
28
What's new in Flutter 1.9
kajornsakp
0
47
Kotlin meets Web
kajornsakp
0
19
From design to develop with Material Components
kajornsakp
0
130
ML Kit : Face contour detection
kajornsakp
0
30
Other Decks in Technology
See All in Technology
クラウド食堂とは?
hiyanger
0
120
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
320
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.8k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
680
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.7k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
110
Amazon Aurora のバージョンアップ手法について
smt7174
2
170
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Agile that works and the tools we love
rasmusluckow
328
21k
Become a Pro
speakerdeck
PRO
26
5.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Practical Orchestrator
shlominoach
186
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
© 2020 Agoda. All rights reserved. Mobile Design System at
scale Kajornsak Peerapathananont Mobile Developer
Agenda © 2020 Agoda. All rights reserved. • Problem s
• What is design syste m • Agoda Design Syste m • How did we achieve i t • Summary 2
© 2020 Agoda. All rights reserved. 3 Meet Agoda app
© 2020 Agoda. All rights reserved. Problems
© 2020 Agoda. All rights reserved. 5 UI Inconsistency
© 2020 Agoda. All rights reserved. 6 Duplicated resources
© 2020 Agoda. All rights reserved. 7 Duplicated code •
res/values/dimens.xm l • Duplicated padding, margi n • res/ values/colors.xm l • Duplicated color s • Multiple shades of colors
© 2020 Agoda. All rights reserved. Design Systems
© 2020 Agoda. All rights reserved. 9 What is design
system? https://bradfrost.com/blog/post/atomic-web-design
© 2020 Agoda. All rights reserved. 10 Android Design System
© 2020 Agoda. All rights reserved. Material Guidelines
© 2020 Agoda. All rights reserved.
© 2020 Agoda. All rights reserved. 13 Android Material Theming
Google I/O 2019 App
© 2020 Agoda. All rights reserved. Agoda Design System
© 2020 Agoda. All rights reserved. 15 Da Vinci
© 2020 Agoda. All rights reserved. 16 Agoda Design System
© 2020 Agoda. All rights reserved. 17 Reusability & Consistency
© 2020 Agoda. All rights reserved. Android Frameworks
© 2020 Agoda. All rights reserved. 19 Requirements • Reusability
& Consistenc y • No XM L • No Android-coupled syste m • Declarative U I • Domain Specific Language (DSL ) • Testing (Kakao), Network stack, Bootstrapping, etc . • Aligned with other platforms
© 2020 Agoda. All rights reserved. 20 Introducing DaVinci for
Android
© 2020 Agoda. All rights reserved. 21 Problems solved •
Reusability ✅ • Consistency ✅ • Easier way to create custom view ✅ • No XML ✅ • No boilerplate code ✅ • Flexibility ✅ • Aligned with iOS ✅ ✅
© 2020 Agoda. All rights reserved.
© 2020 Agoda. All rights reserved. Workflow Design specs Badge
Component Reusable component
© 2020 Agoda. All rights reserved. 24 DaVinci App
© 2020 Agoda. All rights reserved. 25 Snapshot Testing •
Screenshot Tests for Androi d • facebook/screenshot-tests-for-android
© 2020 Agoda. All rights reserved. 26 Why not Jetpack
Compose? • Launched at Google I/O 201 9 • Not suitable to our usecase s • More abstraction with our DSL
© 2020 Agoda. All rights reserved. Summary
© 2020 Agoda. All rights reserved. 28 Everybody is happy
Designer Developer
© 2020 Agoda. All rights reserved. Interested now? • https://material.io
• https://agoda.design • https://designsystemsforfigma.com • https://bradfrost.com/blog/post/atomic-web-design • https://speakerdeck.com/line_devday2019/line-design-system-making-line- product- faster-without-losing-consistency
© 2020 Agoda. All rights reserved. 30 Join us!
Thank you