Design system - From a Developer Point-of-View
summary
Argues that a usable design system saves rewriting UI by providing design tokens as CSS variables, a component library split into visual vs business logic, and npm-packaged modules updated via npm link and semantic-release. Shows React code patterns (higher‑order components, render props) to extract metrics and authorization out of visual components, uses Storybook to publish live component docs and visual tests in CI, and uses react‑sketchapp / html‑sketchapp to sync implemented components with Sketch.
AI-written summary · about
chapters (8)
- 0:00Hello! I am Yael Balla
- 7:30Conceptual change
- 8:20Understand the rules behind the design
- 9:15Design Tokens
- 13:26Define Visual Components
- 22:12Shared Library
- 25:15Sharing and Visibility
- 32:50Tools for design, collaboration, developer hands off Assets management Training and onboarding Research & user testing Program managers
related talks
21mDesign Systems 101: The Developer Approach to Better Frontends
38mDesign Systems Mastery: From Patterns & Principles to Product Excellence
12mDesign Systems-Revamping Products for Consistent UIs
28mFrom Sketch to Code Designing a Component Kit
21mA Common Design Language Let Designers and Developers talk to each other
32mYour Guide to Making Scalable Design Systems
41mBuilding a design system with React in 2025, what's new?
56mDesign System as a Product