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
エラーとアクセシビリティ
Avatar for Tajima Sachiko schktjm
0
1.1k
なぜSaaSがMCPサーバーをサービス提供するのか？
Avatar for SansanTech sansantech
PRO
8
2.6k
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
160
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
Avatar for Yuki Miida miichan
2
170
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
360
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
1
170
Codeful Serverless / 一人運用でもやり抜く力
Avatar for kensh _kensh
7
350
【初心者向け】ローカルLLMの色々な動かし方まとめ
Avatar for Aratako aratako
7
3.3k
AWSを利用する上で知っておきたい名前解決のはなし（10分版）
Avatar for nagisa_53 nagisa53
9
2.7k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
Avatar for KentaroFujii kentarofujii
0
120
5分でカオスエンジニアリングを分かった気になろう
Avatar for Aja9tochin pandayumi
0
170
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
Avatar for よしたけ yoshitake945
0
390

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
580
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k

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