Designing with React

on YouTube ↗25m

" summary

Claims that react-sketchapp lets familiar React components render into Sketch files, producing real Sketch plugins by emitting a JSON tree, running Yoga for flexbox→x/y/width/height layout, and wrapping Sketch API calls. Examples include automating a design system (reducing hours of redraws to minutes across ~16 locales), pulling live data (Foursquare, Google Maps) into mockups, and generating assets via a create-react-app workflow and plugin manager to produce usable Sketch templates.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 4:27Design Thinking - Deliverables
3. 6:55A first example
4. 8:37Sketch is scriptable...
5. 10:39React Sketchapp Components
6. 15:07Use Case 1: Design System
7. 19:04Use Case II: Data
8. 19:59Integrating real data
9. 22:11Use Case III: Responsive design with flexbox
10. 23:20Use Case IIII: Data Visualisation

" related talks

• 43mDesigning with ReactKristin Baumann · <React.NotAConf /> 2018
• 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
• 24mSketching in the BrowserMark Dalgleish · ReactiveConf 2018
• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 35mDesign system - From a Developer Point-of-ViewYael Oshri Balla · YGLF 2019: Code Camp
• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018