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
68
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
26
iOSDevTH #21
kajornsakp
0
25
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
48
What's new in Flutter 2020
kajornsakp
0
49
Mobile Machine Learning for All Skill Levels
kajornsakp
0
26
What's new in Flutter 1.9
kajornsakp
0
47
Kotlin meets Web
kajornsakp
0
18
From design to develop with Material Components
kajornsakp
0
120
ML Kit : Face contour detection
kajornsakp
0
29
Other Decks in Technology
See All in Technology
Microsoft Fabric OneLake の実体について
ryomaru0825
0
190
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
1
280
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
RAGのためのビジネス文書解析技術
eida
3
650
元旅行会社の情シス部員が教えるおすすめなre:Inventへの行き方 / What is the most efficient way to re:Invent
naospon
2
260
福岡新卒エンジニアの会
teba_eleven
1
180
AI長期記憶システム構築のための LLMマルチエージェントの取り組み / Awarefy-LLM-Multi-Agent
iktakahiro
2
330
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
3次元点群データ「VIRTUAL SHIZUOKA』のオープンデータ化による恩恵と協働の未来/FOSS4G Japan 2024
kazz24s
0
120
"君は見ているが観察していない"で考えるインシデントマネジメント
grimoh
4
1k
LINEヤフー株式会社における音声言語情報処理AI研究開発@SP/SLP研究会 2024.10.22
lycorptech_jp
PRO
2
270
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Building Applications with DynamoDB
mza
90
6.1k
Statistics for Hackers
jakevdp
796
220k
Designing the Hi-DPI Web
ddemaree
280
34k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
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