Implement your own design system with Jetpack Compose
summary
Instacart shows a concrete Compose-based design system implemented in Kotlin: composable color spec interfaces driven by composition locals for day/night and white‑labeling, icon slot composables (animated or static) and base pill / base input components that hide layout details. Tools include Jetpack Compose, composition locals, Figma-driven specs, GraphQL enums, vector drawables/imageVector and screenshot tests. The library is rebuilt from scratch after a year of work, needs ~50 lines to replace Material text, and ships successfully as an internal dependency.
AI-written summary · about
chapters (11)
- 0:00Transitioning to Compose
- 1:11Design systems as an API
- 7:30Views versus Compose
- 9:48Leveraging Material Design
- 13:50Tailoring your system
- 16:09Implementing custom specs
- 23:45Building atomic components
- 29:11Hiding implementation details
- 32:11Scaling to complex UI
- 35:59Customizing base components
- 39:26Q&A and closing
related talks
41mImplementing a Design System in Compose
45mHow We Built a Design System in Jetpack Compose
26mCompose Beyond Material Design
32mJetpack Compose — Next Gen Kotlin UI Toolkit for Android
39mRe-Compose your UI: building an atomic design library
35mCompose Yourself: Designing a Kotlin First UI Toolkit
01h 00mJetpack Compose - Next Gen Kotlin UI Toolkit for Android
15mBuild beautiful Material Design apps with Jetpack Compose