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
82

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
40
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
45
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
66
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
61
Mobile Machine Learning for All Skill Levels
Avatar for Kajornsak Peerapathananont kajornsakp
0
32
What's new in Flutter 1.9
Avatar for Kajornsak Peerapathananont kajornsakp
0
52
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
22
From design to develop with Material Components
Avatar for Kajornsak Peerapathananont kajornsakp
0
140
ML Kit : Face contour detection
Avatar for Kajornsak Peerapathananont kajornsakp
0
36

Other Decks in Technology

See All in Technology
あなたのWebサービスはAIに自動テストしてもらえる？アクセシビリティツリーで読み解く、AIの『視点』
Avatar for Yusuke Iwaki yusukeiwaki
1
3.4k
about #74462 go/token#FileSet
Avatar for tom twinkle tomtwinkle
1
260
OCI Network Firewall 概要
Avatar for oracle4engineer oracle4engineer
PRO
1
7.7k
Goのビルドシステムの変遷 / The history of Go's build system
Avatar for ymotongpoo ymotongpoo
12
3.5k
CData MCP ナイト！「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
Avatar for KoheiOgawa shisyu_gaku
0
190
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
1.4k
GA technologiesでのAI-Readyの取り組み@DataOps Night
Avatar for yuto16 yuto16
0
240
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
Avatar for Takuto Nagami logica0419
1
310
組織観点から IAM Identity CenterとIAMの設計を考える
Avatar for NRI Netcom nrinetcom
PRO
1
130
AWSのProductのLifecycleについて
Avatar for Takuya Shibata stknohg
PRO
0
300
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
0
750
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
Avatar for GMO Flatt Security flatt_security
0
290

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
890
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
72
11k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
140
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k

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