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
64
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
25
iOSDevTH #21
kajornsakp
0
20
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
47
What's new in Flutter 2020
kajornsakp
0
49
Mobile Machine Learning for All Skill Levels
kajornsakp
0
24
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
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
1
110
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
310
不動産 x AIことはじめ~データの真価を拓くために
estie
0
120
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
より快適なエラーログ監視を目指して
leveragestech
4
1.5k
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
190
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
330
AI前提のサービス運用ってなんだろう?
ryuichi1208
1
430
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
学術機関におけるID連携とOpenID Connect
fujie
0
280
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Writing Fast Ruby
sferik
623
60k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Designing with Data
zakiwarfel
98
5k
Documentation Writing (for coders)
carmenintech
65
4.3k
Infographics Made Easy
chrislema
239
18k
The Pragmatic Product Professional
lauravandoore
31
6.2k
In The Pink: A Labor of Love
frogandcode
139
22k
Building an army of robots
kneath
302
42k
Unsuck your backbone
ammeep
667
57k
Facilitating Awesome Meetings
lara
49
6k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
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