Understanding Layout Between UI Design and Code – Christine Vallaure
summary
Explains concrete gaps between design files and working code: Figma auto layout maps partially to Flexbox but misses flex values and units; CSS Grid adds a true two‑dimensional layout and Figma recently gains fractional units; container queries let components respond to their container not the viewport while breakpoints still live in code; demonstrates Figma MCP and agent workflows and warns that AI agents generate poor CSS unless files are structured and annotated — recommends clean naming, context boxes, and treating the file as machine‑readable.
AI-written summary · about
chapters (10)
- 0:00Design and dev collaboration
- 2:19Design to developer translation
- 5:45Designers versus developers
- 9:03Flexbox through design tools
- 13:12CSS grid for designers
- 21:40Responsive design challenges
- 27:34Container queries and modern layout
- 31:10AI in design workflows
- 36:49AI-assisted design challenges
- 41:48Future of design systems
related talks
32mBreaking Barriers: Understanding Layout Between UI Design and Code
43mWhen Figma meets CSS
24mInside Figma: The art of being flexible
43mDesign Beyond Breakpoints
33mStructure your designs with Figma Grid, a new way to use auto layout
23mHow to create Figma design loved by developers
44mYes, You Should
20mUX and the Design/Dev Overlap