Building a Design System as a team
summary
Advocates building a system atom-first so colors buttons and paddings become shared constants, then implement components exactly once to avoid 50 slight variants. Uses concrete tools: TypeScript guardrails to restrict props, Storybook for interactive docs, and ESLint/style rules to forbid fragile CSS selectors. Describes pairing, code reviews and docs updates as rollout practices and shows Codecademy/gamut examples and workflows that stop teams from forking or hacking components.
AI-written summary · about
chapters (10)
- 0:00Building a design system
- 1:04What is a design system
- 2:45Atomic design methodology
- 8:08Start with atoms first
- 11:14Collaborating with product teams
- 14:03TypeScript guardrails
- 18:15Documentation with Storybook
- 21:06Static analysis tools
- 22:51Soft skills for adoption
- 24:15Resources and closing
related talks
23mDesign Systems 101
24mFrom Sketch to Code Designing a Component Kit
35mDesign system - From a Developer Point-of-View
27mAdvanced Design System Considerations
12mDesign Systems-Revamping Products for Consistent UIs
32mIntroduction to Design Systems
28mThe Three P’s of a Design System
56mDesign System as a Product