Building a Web Design Tool for Developers
summary
A browser-based tool called Plasmic generates production React UI from direct-design or Figma imports and proves it by building a pixel‑perfect to‑do app, exporting components into a Create React App via plasmic init and plasmic sync and streaming edits with watch mode. It models components, variants, tokens and slots, crawls TypeScript/prop‑types to expose editable props, and avoids janky dragging by incremental, priority‑based re‑renders. Missing pieces: richer grid layout, fuller code‑component bundling and real‑time collaboration; demo integration and live sync work as shown.
AI-written summary · about
chapters (6)
- 0:00Start
- 0:22SMALL STACK
- 2:05Landscape: Website builders
- 2:57Landscape: Ul builders for web apps
- 18:56Some technical challenges (1/2) State management infrastructure
- 22:00Some product challenges (12)
related talks
39mBuilding React UIs visually
29mBuilding React Frontends visually
14mVisual building for Next.js
30mDesigning with React
18mBridging the gap between design prototyping and code
27mBuilding a Design Tool for React in React
36mElevate Your React Workflow with Figma
01h 04mBuilding Design Systems for Scale: From Tokens and Components to Motion & AI Tools