Design Systems Mastery: From Patterns & Principles to Product Excellence
summary
Claims that shifting from concrete components to extracted patterns and principles makes a design system scalable and reusable, demonstrated by storing visual attributes as tokens to rebrand 30+ apps via a theme switch. Implements composable layers: separate view and behavior, with concrete pieces like an interaction patterns layer plus selection and overlay handling, and composes them with a collections API. Uses React and cites libraries like react ARA and Arya kit as implementation options.
AI-written summary · about
chapters (12)
- 0:00Introduction to design systems
- 1:03Building a design system
- 4:19Rebranding with design tokens
- 7:53Understanding UI patterns
- 12:50Interaction patterns explained
- 16:41Visual design patterns
- 21:21Composite patterns and roles
- 24:55Action-based patterns
- 28:05Component architecture approach
- 31:57Designers and developers alignment
- 33:44Reusing existing solutions
- 35:08Patterns principles product excellence
related talks
35mDesign system - From a Developer Point-of-View
12mDesign Systems-Revamping Products for Consistent UIs
21mDesign Systems 101: The Developer Approach to Better Frontends
32mIntroduction to Design Systems
23mDesign Systems 101
20mDesign Systems for the Rest of Us
56mDesign System as a Product
25mHow to understand the perspectives in Product Design processes as a developer