Sketching in the Browser

on YouTube ↗29m

" summary

Shows how code becomes the source of design truth: using react-sketchapp and html-sketchapp plus a custom HTML Sketchup CLI pipeline that runs webpack puppeteer and a static server to emit Sketch JSON and libraries on every merge. Demonstrates converting components colors and type into Sketch symbols, notes limits (SVG and hidden text quirks, one import plugin step) and reports the system works in production—automating sketch libraries and cutting manual double‑handling.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 2:29Symbols
3. 5:56React Sketchup
4. 7:21Requirements
5. 7:41Write Your Styles in Javascript
6. 8:03Cross Platform Primitives
7. 9:00Check those Design Assets into the Repository
8. 10:56Html Sketchup
9. 15:40Color Palette
10. 19:22Html Sketchup Cli
11. 22:16Sketch Library
12. 27:58What Does this Mean for the Future of Front-End Development

" related talks

• 24mSketching in the BrowserMark Dalgleish · ReactiveConf 2018
• 25mDesigning with ReactKristin Baumann · React Day Berlin 2017
• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 43mDesigning with ReactKristin Baumann · <React.NotAConf /> 2018
• 24mRethinking Design PracticesMark Dalgleish · ReactiveConf 2019
• 27mWe need to talk about our frontend workflowSiddharth Kshetrapal · ReactFoo Mumbai 2018
• 17m🎙️UX+DEV SUMMIT 2018 - Marcelo PaivaMarcelo Paiva · UX+DEV SUMMIT 2018
• 21mSVG illustrations as React ComponentsElizabet Oliveira · React Conf 2018