Designing with React

on YouTube ↗43m

" summary

Claims that React components render into Sketch and generate real design artifacts using react Sketchup. Shows a workflow built on create react app, the Yoga layout engine for converting flexbox to fixed x y width height, and the Sketch plugin pipeline. Demonstrates automation: App Store screenshots across ~10 languages with 5-6 images per store, live data via Foursquare and Google Maps distance matrix, and a working Berlin S‑Bahn map overlay—proof that the system actually produces usable, repeatable outputs.

AI-written summary · about

" chapters (17)

1. 0:00Start
2. 3:34Design Thinking
3. 4:33Prototyping
4. 7:16Direct Sketchup
5. 11:29Manifest Json
6. 14:21Sketch Jason Plugin
7. 14:59Sketch Plugin Manager
8. 16:10Design Systems
9. 16:41Maintainability
10. 17:55Biggest Concern When You Work with Designers
11. 20:59Responsive Designer Flexbox
12. 23:19Panel and Comment
13. 24:50Web Flow
14. 28:38Design System
15. 31:58Envision Design System Manager
16. 33:35Communication between the Designer and Developer
17. 36:24Iteration Loops

" related talks

• 25mDesigning with ReactKristin Baumann · React Day Berlin 2017
• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 29mSketching in the BrowserMark Dalgleish · JSHeroes 2018
• 27mWe need to talk about our frontend workflowSiddharth Kshetrapal · ReactFoo Mumbai 2018
• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 18mBridging the gap between design prototyping and codeIves van Hoorne · ReactJS Day 2018
• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018
• 35mDesign system - From a Developer Point-of-ViewYael Oshri Balla · YGLF 2019: Code Camp