JSX for Designers
summary
Claims that JSX as shared source of truth lets design and devs skip handoff by compiling a single JSX description into platform outputs. Uses compilers and static analysis (Babel, TypeScript style checks), a createComponent config, style props, transforms, polymorphism and asset extraction from Figma via global graphic/layer primitives, and emits React/React Native/Framer Motion output. A working experimental compiler and UI library exists, demos and slides are produced with it, but it’s early, buggy and undocumented.
AI-written summary · about
chapters (14)
- 0:00JSX FOR DESIGNERS
- 0:25DESIGN HANDOFF
- 1:40COMPILERS
- 2:42STATIC ANALYSIS
- 3:25STYLE PROPS
- 4:58COMPILER COMPONENTS
- 6:22TRANSFORMS
- 6:37POLYMORPHISM
- 7:12COMPONENT OUT
- 8:06ASSETS
- 10:13PLATFORMS
- 12:32WHY IS THIS IMPORTANT
- 13:52OPEN SOURCE
- 14:13WHAT'S NEXT?
related talks
30mDesigning with React
33mWhy I Love JSX!
18mBridging the gap between design prototyping and code
39mDesigning with Components
21mA Common Design Language Let Designers and Developers talk to each other
35mDesign system - From a Developer Point-of-View
27mBuilding a Design Tool for React in React
09mReactathon 2018 Kickoff