From Sketch to Code Designing a Component Kit
summary
Shows a working component workflow: a design system feeds a component checklist, decisions on what becomes a reusable component, and consistent API naming to avoid confusing props. Uses Zeppelin for handoff and Storybook as living style guide with GraphQL-backed stories for real data. Describes visual QA and a pairing process that collapses feedback loops, explains when not to make a component, and gives concrete rules for styling overrides, discoverability, and versioned maintenance.
AI-written summary · about
chapters (16)
- 0:00Component design intro
- 1:52Building a component kit matters
- 3:58Branding drives component libraries
- 5:01Traits of reusable components
- 7:33Determining if something is a component
- 8:38Is it a component quiz
- 10:05Component kit necessity
- 12:14Starting a design system
- 13:58Choosing design hand-off tool
- 15:01Implementing components with Storybook
- 16:50Storybook benefits for teams
- 17:53Team collaboration
- 20:04Early engineering in design
- 21:29Workflow design to component
- 22:34Improving feedback loops with pairing
- 23:18Summary and closing
related talks
28mFrom Sketch to Code Designing a Component Kit
39mDesigning with Components
25mBuilding a Design System as a team
35mDesign system - From a Developer Point-of-View
27mA Practical Guide to Building Your Design System Infrastructure
21mDesign Systems 101: The Developer Approach to Better Frontends
27mWe need to talk about our frontend workflow
40mA lean approach to building design systems