Implementing a Design System in Compose
summary
Monzo adopts Jetpack Compose alpha in late 2020 and builds a reusable design system that replaces heavy RecyclerView boilerplate with composables, supports gradients and animated app‑bar elevation, and lives alongside 260 modules and ~18 Android engineers. Core components are owned by a platform team, theming is duplicated during migration, navigation uses Compose-wrapped fragments, state uses hoisted immutable ViewModel state, and visual regressions run as screenshot tests on CI via HPO that flag image diffs before merge.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:10What is a design system
- 3:58Monzo’s design system
- 6:06Jetpack Compose overview
- 8:41Building components in Compose
- 11:30Getting teams on board
- 13:37View and Compose theming
- 15:24Custom vs Material design
- 17:57State management in Compose
- 21:14Design system layers
- 22:40Themed gradients example
- 28:40App bar implementation
- 32:12Feature-specific ownership
- 33:39Encouraging adoption
- 36:53Maintaining the system
- 37:56Screenshot testing
- 40:26Key takeaways
related talks
49mImplement your own design system with Jetpack Compose
39mRe-Compose your UI: building an atomic design library
36mCustom Design Systems in Compose
31mDesigning Media Friendly Jetpack Compose Components
37mLet your design evolve, adopt a Design System!
18mOne design system to rule them all 1
35mCompose beyond Material
41mCompose beyond Material