Rethinking Design Practices
summary
Design process shifts from mockups to code using an open source design system Braid and a browser-based tool Playroom that exposes JSX as a design tool. It uses theme tokens, responsive props and layout primitives (stack, columns, tiles) and a heading crop technique (CSS transform + pseudo-element margin hack) so text behaves like other components. A new snippets feature inserts reusable code examples; demo shows a three‑column search form prototyped live, shareable via URL and used at SEEK.
AI-written summary · about
chapters (44)
- 0:00Introduction
- 0:22Design Systems
- 0:47Design Workflows
- 1:03Design in Code
- 1:51Design System Braid
- 2:17Tooling
- 2:57In Practice
- 6:06Spacing
- 6:25Styled System
- 6:50Box Component
- 7:00Example
- 7:21Responsive props
- 9:35Text
- 12:51Layout Components
- 13:50Inline Components
- 14:35Columns
- 15:27Components
- 16:04Put it into practice
- 16:18Playroom
- 16:50Snippets
- 17:07Insert Code
- 17:34Live Preview
- 17:59Keyboard Shortcut
- 18:26Replace Placeholder
- 19:22Add Text Field
- 19:32Add Location Field
- 19:53Add Strong Button
- 20:10Add Overflow Menu
- 20:20Add Tiles
- 20:59Align Y Prop
- 21:18Vertical Spacing
- 21:32Padding
- 22:03Responsive prop
- 22:31Responsive button width
- 22:55Horizontal button spacing
- 23:20Prototype
- 23:42Themes
- 24:58iterate
- 25:13offer constant support
- 25:45encourage pairing
- 26:22break down those walls
- 26:39the idea that Im
- 26:49welcome designers
- 27:36work closely with
related talks
30mDesigning with React
39mDesigning with Components
18mBridging the gap between design prototyping and code
21mDesign Systems 101: The Developer Approach to Better Frontends
29mDesigning in the Browser
29mEffective user interface design with HTML prototyping
38mEmpathetic Design Systems
35mDesign system - From a Developer Point-of-View