Structure your designs with Figma Grid, a new way to use auto layout
summary
Grid is a new beta auto layout option that adds true two‑dimensional rows and columns, so containers are responsive by default and items can drag to span cells or stay smaller than a cell while anchoring from different corners. Track sizing supports track resizing on canvas with keyboard entry, gaps and padding are editable, nested frames and multi‑edit work inside cells, templates map to CSS during prototyping, examples show 5x6 and 12x6/12x10 grids, and the demo prototype runs (brief Wi‑Fi hiccup aside).
AI-written summary · about
chapters (10)
- 0:00Grid layouts in design
- 2:50Why grids matter
- 7:24Grid layout in Figma Auto Layout
- 8:06Basic grid features demo
- 13:26Advanced grid flexibility
- 16:36Invisible interactions for grid
- 19:43Prototyping grid with CSS
- 20:28Workflow tips for Figma grid
- 28:15Grid in slides and dev mode
- 31:45Feedback and future of grid
related talks
43mWhen Figma meets CSS
32mBreaking Barriers: Understanding Layout Between UI Design and Code
24mInside Figma: The art of being flexible
43mUnderstanding Layout Between UI Design and Code – Christine Vallaure
43mDesign Beyond Breakpoints
16mFigma tutorial: What’s new in Auto layout
28mPushing Figma to its limits
23mCollaborative and real-time design systems in Figma