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

Mobile Design System at scale

Kajornsak Peerapathananont
December 20, 2020
Technology
0
69

Mobile Design System at scale

Android Bangkok Conference 2020

Kajornsak Peerapathananont

December 20, 2020
Tweet

More Decks by Kajornsak Peerapathananont

See All by Kajornsak Peerapathananont
Understanding your Android build
kajornsakp
0
27
iOSDevTH #21
kajornsakp
0
31
What's new in Flutter (Google I/O Extended Bangkok 22)
kajornsakp
0
49
What's new in Flutter 2020
kajornsakp
0
52
Mobile Machine Learning for All Skill Levels
kajornsakp
0
26
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
130
ML Kit : Face contour detection
kajornsakp
0
30

Other Decks in Technology

See All in Technology
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
5
120
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
Oracle Cloudの生成AIサービスって実際どこまで使えるの？ エンジニア目線で試してみた
minorun365
PRO
4
280
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
podman_update_2024-12
orimanabu
1
270
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
.NET 9 のパフォーマンス改善
nenonaninu
0
950
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
480
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
多領域インシデントマネジメントへの挑戦：ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
110
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
230

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Building a Scalable Design System with Sketch
lauravandoore
460
33k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Speed Design
sergeychernyshev
25
670
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Raft: Consensus for Rubyists
vanstee
137
6.7k
What's in a price? How to price your products and services
michaelherold
243
12k
Gamification - CAS2011
davidbonilla
80
5.1k
The Language of Interfaces
destraynor
154
24k
How STYLIGHT went responsive
nonsquared
95
5.2k

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