Bridging the gap between design prototyping and code

on YouTube ↗18m

" summary

Argues that design prototypes can be the source of truth by embedding real React components and data into design tools, demonstrates Framer X with live React props, shows copying visual components from CodeSandbox into the design canvas, and uses stacks (flexbox) to drive responsive layouts so developers don't re-implement everything. Demos include dynamic time and map components, exporting component-based layouts, and wiring designs to APIs so long names and real records surface early.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 3:48Past Present Future
3. 11:32Blending Design & Code
4. 12:03Move the responsibility of layout to the design tool
5. 15:28Put real data in the design tool
6. 16:49Conclusion

" related talks

• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 29mBuilding A Diverse And Inclusive Community.Eyitayo Alimi · React Conf 2018
• 24mRethinking Design PracticesMark Dalgleish · ReactiveConf 2019
• 29mRethinking Design PracticesMark Dalgleish · ReactConf AU 2020
• 23mPrototype EverythingNiels Van Hoorn · App Builders Switzerland 2017
• 35mDesign system - From a Developer Point-of-ViewYael Oshri Balla · YGLF 2019: Code Camp
• 22mJSX for DesignersTravis Arnold · React Finland 2021