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
58
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
22
iOSDevTH #21
kajornsakp
0
18
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
40
What's new in Flutter 2020
kajornsakp
0
42
Mobile Machine Learning for All Skill Levels
kajornsakp
0
18
What's new in Flutter 1.9
kajornsakp
0
44
Kotlin meets Web
kajornsakp
0
16
From design to develop with Material Components
kajornsakp
0
110
ML Kit : Face contour detection
kajornsakp
0
24
Other Decks in Technology
See All in Technology
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.1k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
360
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
現代CSSフレームワークの内部実装とその仕組み
poteboy
7
3.6k
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
520
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
Building Dashboards as a Hobby
egmc
0
200
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
2
530
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
250
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Music & Morning Musume
bryan
41
5.6k
The Cult of Friendly URLs
andyhume
74
5.7k
Optimizing for Happiness
mojombo
370
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Infographics Made Easy
chrislema
238
18k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Testing 201, or: Great Expectations
jmmastey
28
6.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