Best practices for building a consistent design system from design to app implementation
summary
A concrete production design-system recipe: keep structured Figma files and export design variables via Figma Variables → REST API, use an automated token pipeline and Style Dictionary to generate platform SDKs, and name Compose UI functions to match Figma components. Implement governance with designers and engineers, run iterative design+implementation reviews, and watch for pitfalls like Android font padding/line-height mismatches, variant vs responsive misuse, and the operational cost of Relay despite its power.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 3:11What is a design system
- 4:37Design system benefits
- 6:45UI implementation challenges
- 8:54Design mock limitations
- 11:04Figma for UI design
- 12:26Figma components alignment
- 15:37Figma variants for patterns
- 17:47Text style considerations
- 20:13Automating Compose code
- 22:20Design token management
- 24:51Yahoo app token challenges
- 27:28Advanced design token uses
- 28:50Material Design 3 adoption
- 30:15Engineer-designer collaboration
- 31:56Iterative design process
- 33:22Cross-role collaboration
- 35:49Organizational challenges
- 38:00Sustainable design team
- 40:10Q&A
related talks
23mDesign Systems 101
46mA Practical Starter Guide to Creating a Design System
18mDesign Systems in Practice
36mConsistency is Key - Working with a Design System
23mHow to create Figma design loved by developers
25mBuilding a Design System as a team
38mStandardize Without Stiffness: The Real Challenge of Design…
57mUnifying design and development through design systems