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
85

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
34
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
37

Other Decks in Technology

See All in Technology
AI機能プロジェクト炎上の 3つのしくじりと学び
Avatar for nakawai nakawai
0
180
OpenCensusと歩んだ7年間
Avatar for Atsushi Tanaka bgpat
0
290
進化する大規模言語モデル評価: Swallowプロジェクトにおける実践と知見
Avatar for Naoaki Okazaki chokkan
PRO
3
400
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
Avatar for coconala_engineer coconala_engineer
0
400
Kotlinで型安全にバイテンポラルデータを扱いたい！ ReladomoラッパーをAIと実装してみた話
Avatar for Hiroshi Ito itohiro73
3
130
累計5000万DLサービスの裏側 – LINEマンガのKotlinで挑む大規模 Server-side ETLの最適化
Avatar for LINE Digital Frontier - TECH ldf_tech
0
110
AI連携の新常識！ 話題のMCPをはじめて学ぶ！
Avatar for MakoAkiba makoakiba
0
170
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
680
어떤 개발자가 되고 싶은가?
Avatar for Arawn Park arawn
1
360
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
Avatar for FUJIWARA Shunichiro fujiwara3
2
180
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
Avatar for 弁護士ドットコム bengo4com
3
1.9k
Amazon Q Developer CLIをClaude Codeから使うためのベストプラクティスを考えてみた
Avatar for banquet.kuma dar_kuma_san
0
290

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.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