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
79

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
Understanding your Android build
Avatar for Kajornsak Peerapathananont kajornsakp
0
34
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
41
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
56
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
59
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
30
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
49
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
20
From design to develop with Material Components
Avatar for Kajornsak Peerapathananont kajornsakp
0
130
ML Kit : Face contour detection
Avatar for Kajornsak Peerapathananont kajornsakp
0
32

Other Decks in Technology

See All in Technology
Winning at PHP in Production in 2025
Avatar for Benjamin Eberlei beberlei
1
280
グループ ポリシー再確認 (2)
Avatar for Murachi Akira murachiakira
0
230
RubyKaigi NOC 近況 2025
Avatar for Sorah Fukumori sorah
1
440
Coding Agentに値札を付けろ
Avatar for watany watany
3
110
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
1k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
5.5k
3D生成AIのための画像生成
Avatar for 伊藤光祐 kosukeito
2
610
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
Avatar for quiver quiver
1
860
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
Avatar for AEON aeonpeople
3
570
genspark_presentation.pdf
Avatar for h.uriu haruki_uiru
1
230
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
Avatar for coconala_engineer coconala_engineer
0
210
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
7
63k

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
930
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.7k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
Scaling GitHub
Avatar for Zach Holman holman
459
140k

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