From Sketch to Code Designing a Component Kit
summary
A component kit is implemented for shared enterprise UI: a design system and theme file feed Zeppelin mockups into a living style guide built with Storybook, hooked to GraphQL for real-data stories. Examples show regressions caused by inconsistent APIs (imageURI vs image) and by components fetching their own data, and how constant props and discoverable docs stop that. Visual QA plus short designer–engineer pairings replace slow feedback loops, producing smaller bundles, faster development, and a maintained kit while exploring AirBnb's react-sketchapp for future automation.
AI-written summary · about
chapters (14)
- 0:00Start
- 0:19FROM SKETCH TO CODE
- 2:45technology is
- 6:00What makes a COMPONENT?
- 6:52SIMILAR API
- 7:25OVERRIDE STYLES
- 9:45COMPONENT CHECKLIST
- 12:37Why is a COMPONENT KIT necessary?
- 14:43HOW DO WE START
- 15:10Structure of a Design System
- 18:17You write Stories in JS
- 19:06Develop in Isolation
- 19:31Solits Up Complexity
- 28:23SEPTEMBER 29-30, 2018
related talks
24mFrom Sketch to Code Designing a Component Kit
39mDesigning with Components
35mDesign system - From a Developer Point-of-View
40mA lean approach to building design systems
34mDesigners, Developers, Let’s Create the Difference!
35mBuilding effective design systems in Vue, React or whatever
25mBuilding a Design System as a team
58mChasing the holy grail: reusable web components and design tokens