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
82
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
40
iOSDevTH #21
kajornsakp
0
45
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
66
What's new in Flutter 2020
kajornsakp
0
61
Mobile Machine Learning for All Skill Levels
kajornsakp
0
34
What's new in Flutter 1.9
kajornsakp
0
52
Kotlin meets Web
kajornsakp
0
22
From design to develop with Material Components
kajornsakp
0
140
ML Kit : Face contour detection
kajornsakp
0
37
Other Decks in Technology
See All in Technology
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
150
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
820
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
130
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
390
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
630
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
120
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
330
様々なファイルシステム
sat
PRO
0
240
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
130
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
GitHub's CSS Performance
jonrohan
1032
470k
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
225
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Unsuck your backbone
ammeep
671
58k
How to train your dragon (web standard)
notwaldorf
97
6.3k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A Tale of Four Properties
chriscoyier
161
23k
Practical Orchestrator
shlominoach
190
11k
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