Designing with Components
summary
Argues that designers should work with running components not static artboards and demonstrates a concrete toolchain: HTML Sketchup, Framer X and CodeSandbox for experimentation, Storybook + Chromatic for snapshot testing, and a self-built open-source tool Playroom (npm package) that serves live JSX playgrounds, publishes with the component build, supports multiple themes, and produces base64 sharable URLs so designs are editable, reviewable in PRs, and used for support — used at Seek with a three-person braid team and deployed successfully.
AI-written summary · about
chapters (10)
- 0:00The design systems gap
- 2:00Bridging with automation
- 4:58Designing with components
- 7:15Modern browser-based tools
- 11:07Introducing Playroom
- 18:10Workflow benefits
- 20:16Theming and scalability
- 24:11Improving team workflows
- 27:21Future of design tools
- 30:58Q&A and closing
related talks
30mDesigning with React
24mRethinking Design Practices
28mFrom Sketch to Code Designing a Component Kit
29mRethinking Design Practices
24mFrom Sketch to Code Designing a Component Kit
18mBridging the gap between design prototyping and code
34mDesigners, Developers, Let’s Create the Difference!
24mSketching in the Browser