How we engineered our design system
summary
Engineered an Android design system using an atomic approach with an 8‑point grid, a single color-palette XML, and text styles mapped from Figma; built reusable widgets with render(state) as ViewGroups configurable via declare‑styleable, moved from oversized configurable widgets to many small single‑responsibility ones, and removed runtime background/title mutations to XML only. Delivered a side dev app that showcases every widget and configurations for designers and QA. Outcome: faster feature builds, fewer inconsistencies, approved UI components in production.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:08What is a design system
- 6:51Atomic design principles
- 9:03Atoms and molecules in practice
- 11:15Implementing design tokens
- 13:23Building reusable widgets
- 17:19Component complexity debate
- 20:51Handling events and state
- 22:15Dev app for testing widgets
- 24:26Current state and future plans
related talks
34mDesign System Driven Android Development: A Guide to Automation Tools
37mLet your design evolve, adopt a Design System!
32mAtomic Design Theory in Practice
20mDesign Systems for the Rest of Us
36mConsistency is Key - Working with a Design System
39mAtomic Design in Android
40mBest practices for building a consistent design system from design to app implementation
27mAdvanced Design System Considerations