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
81

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
36
iOSDevTH #21
Avatar for Kajornsak Peerapathananont kajornsakp
0
42
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
57
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
50
Kotlin meets Web
Avatar for Kajornsak Peerapathananont kajornsakp
0
20
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
34

Other Decks in Technology

See All in Technology
讓測試不再 BB！ 從 BDD 到 CI/CD， 不靠人力也能 MVP
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
Avatar for Cygames cygames
0
830
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
Avatar for Lamoda Tech lamodatech
0
270
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
Avatar for CUEBiC Inc. cuebic9bic
2
220
成立するElixirの再束縛（再代入）可という選択
Avatar for kubell kubell_hr
0
830
AIエージェント最前線！ Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
Avatar for みのるん minorun365
PRO
10
3.7k
ObsidianをMCP連携させてみる
Avatar for ttnyt8701 ttnyt8701
2
140
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
Avatar for Belong inc. belongadmin
3
170
IIWレポートからみるID業界で話題のMCP
Avatar for Naohiro Fujie fujie
0
710
AIにどこまで任せる？実務で使える(かもしれない)AIエージェント設計の考え方
Avatar for Har1101 har1101
3
1.2k
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
Avatar for Hideaki Aoyagi hideakiaoyagi
1
180

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k

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