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
81
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
37
iOSDevTH #21
kajornsakp
0
43
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
61
What's new in Flutter 2020
kajornsakp
0
60
Mobile Machine Learning for All Skill Levels
kajornsakp
0
30
What's new in Flutter 1.9
kajornsakp
0
51
Kotlin meets Web
kajornsakp
0
20
From design to develop with Material Components
kajornsakp
0
140
ML Kit : Face contour detection
kajornsakp
0
35
Other Decks in Technology
See All in Technology
Findy Freelance 利用シーン別AI活用例
ness
0
300
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
450
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
880
Lambda management with ecspresso and Terraform
ijin
2
130
Mambaで物体検出 完全に理解した
shirarei24
2
210
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
100
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
850
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
390
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
Visualization
eitanlees
146
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
The Invisible Side of Design
smashingmag
301
51k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cult of Friendly URLs
andyhume
79
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
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