Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Design System at scale

Avatar for Kajornsak Peerapathananont Kajornsak Peerapathananont
December 20, 2020
Technology
0
140

Mobile Design System at scale

Android Bangkok Conference 2020

Avatar for Kajornsak Peerapathananont

Kajornsak Peerapathananont

December 20, 2020
Tweet

More Decks by Kajornsak Peerapathananont

See All by Kajornsak Peerapathananont
Full-Stack Development with FlutterFire
Avatar for Kajornsak Peerapathananont kajornsakp
0
7
How to build native-experience with cross-platform
Avatar for Kajornsak Peerapathananont kajornsakp
0
13
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
42
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
53
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
82
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
73
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
40
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
59
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
25

Other Decks in Technology

See All in Technology
AIエンジニア Devin と歩む、自律型運用プロセスの構築
Avatar for a2-ito a2ito
0
250
Lookerの最新バージョンv26.2がやばい話
Avatar for Yuta Ozaki waiwai2111
1
140
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
180
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
360
失敗できる意思決定とソフトウェアとの正しい歩き方_-_変化と向き合う選択肢/ Designing for Reversible Decisions
Avatar for soudai sone soudai
PRO
8
1.3k
Snowflake Night #2 LT
Avatar for タロウ taromatsui_cccmkhd
0
260
Databricks （と気合い）で頑張るAI Agent 運用
Avatar for camay kameitomohiro
0
330
Snowflakeデータ基盤で挑むAI活用 〜4年間のDataOpsの基礎をもとに〜
Avatar for K.Mitsuhashi kaz3284
1
270
AI時代のAPIファースト開発
Avatar for 草薙昭彦 nagix
2
680
ソフトウェアアーキテクトのための意思決定術: Create Decision Readiness—The Real Skill Behind Architectural Decision
Avatar for Koji SHIMADA snoozer05
PRO
26
7.5k

Featured

See All Featured
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
750
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Done Done
Avatar for chrislema chrislema
186
16k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
140
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

Transcript

  1. © 2020 Agoda. All rights reserved. Mobile Design System at

    scale Kajornsak Peerapathananont Mobile Developer

  2. 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

  3. © 2020 Agoda. All rights reserved. 3 Meet Agoda app

  4. © 2020 Agoda. All rights reserved. Problems

  5. © 2020 Agoda. All rights reserved. 5 UI Inconsistency

  6. © 2020 Agoda. All rights reserved. 6 Duplicated resources

  7. © 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

  8. © 2020 Agoda. All rights reserved. Design Systems

  9. © 2020 Agoda. All rights reserved. 9 What is design

    system? https://bradfrost.com/blog/post/atomic-web-design

  10. © 2020 Agoda. All rights reserved. 10 Android Design System

  11. © 2020 Agoda. All rights reserved. Material Guidelines

  12. © 2020 Agoda. All rights reserved.

  13. © 2020 Agoda. All rights reserved. 13 Android Material Theming

    Google I/O 2019 App

  14. © 2020 Agoda. All rights reserved. Agoda Design System

  15. © 2020 Agoda. All rights reserved. 15 Da Vinci

  16. © 2020 Agoda. All rights reserved. 16 Agoda Design System

  17. © 2020 Agoda. All rights reserved. 17 Reusability & Consistency

  18. © 2020 Agoda. All rights reserved. Android Frameworks

  19. © 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

  20. © 2020 Agoda. All rights reserved. 20 Introducing DaVinci for

    Android

  21. © 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 ✅ ✅

  22. © 2020 Agoda. All rights reserved.

  23. © 2020 Agoda. All rights reserved. Workflow Design specs Badge

    Component Reusable component

  24. © 2020 Agoda. All rights reserved. 24 DaVinci App

  25. © 2020 Agoda. All rights reserved. 25 Snapshot Testing •

    Screenshot Tests for Androi d • facebook/screenshot-tests-for-android

  26. © 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

  27. © 2020 Agoda. All rights reserved. Summary

  28. © 2020 Agoda. All rights reserved. 28 Everybody is happy

    Designer Developer

  29. © 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

  30. © 2020 Agoda. All rights reserved. 30 Join us!

  31. Thank you