Designing with React

on YouTube ↗30m

" summary

Shows that React component code becomes the design artifact and names real tools: playroom (open source on npm) that runs JSX live in the browser, HTML Sketch CLI using Puppeteer to export Sketch symbols, Framer X, Interplay and CodeSandbox for web IDEs. Demonstrates a multi‑brand system (Braid) with theme switching, per‑PR live preview sites, shareable base64 URLs, and designers editing JSX props. Claims zero setup workflow works in production at SEEK, speeds iteration, and surfaces real bugs during review.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 0:31Designing with React
3. 3:11React Sketchup
4. 3:49Html Sketchup
5. 10:53Typescript
6. 11:53Code Sandbox
7. 14:38Demo
8. 16:04Add a Footer
9. 18:37Adding a Button Group
10. 21:40Themes
11. 27:32Wire Framing

" related talks

• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 18mBridging the gap between design prototyping and codeIves van Hoorne · ReactJS Day 2018
• 24mRethinking Design PracticesMark Dalgleish · ReactiveConf 2019
• 25mDesigning with ReactKristin Baumann · React Day Berlin 2017
• 43mDesigning with ReactKristin Baumann · <React.NotAConf /> 2018
• 29mRethinking Design PracticesMark Dalgleish · ReactConf AU 2020
• 29mSketching in the BrowserMark Dalgleish · JSHeroes 2018
• 35mDesign system - From a Developer Point-of-ViewYael Oshri Balla · YGLF 2019: Code Camp