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
43
What's new in Flutter (Google I/O Extended Bangkok 22)
Avatar for Kajornsak Peerapathananont kajornsakp
0
58
What's new in Flutter 2020
Avatar for Kajornsak Peerapathananont kajornsakp
0
60
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
51
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
35

Other Decks in Technology

See All in Technology
なぜAI時代に 「イベント」を中心に考えるのか？ / Why focus on "events" in the age of AI?
Avatar for yuuki takezawa ytake
2
570
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
Avatar for Yuki Harayama parayama0625
0
150
Expertise as a Service via MCP
Avatar for Yoda Keisuke yodakeisuke
1
140
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
Avatar for HASEGAWA Tomoki tomzoh
2
390
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
Avatar for you（@youtoy） you
PRO
3
330
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
Avatar for SansanTech sansantech
PRO
1
270
P2P通信の標準化 WebRTCを知ろう
Avatar for Akira Takahashi faithandbrave
6
2.3k
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
Avatar for Masato Kinugawa masatokinugawa
0
270
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
Avatar for Msksgm msksgm
0
240
株式会社島津製作所_研究開発（集団協業と知的生産）の現場を支える、OSS知識基盤システムの導入
Avatar for Kuniharu, AKAHANE (赤羽根/州晴) akahane92
1
1.2k
室長の逆襲 ：データ活用の陣地を増やすためのヒント
Avatar for 阿部 昌利 masatoshi0205
0
180
Jitera Company Deck / JP
Avatar for Jitera Inc. jitera
0
150

Featured

See All Featured
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k

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