Responsive Spacing Across Design and CSS in Figma

Back to Devoured - August 25, 2026

DEVOURED

Responsive Spacing Across Design and CSS in Figma

Design frontendcss Figma

Figma's auto layout now includes 'Around' and 'Evenly' spacing options, mirroring CSS flexbox capabilities for more precise gap distribution.

What: Figma updated its auto layout feature to include two new distribution modes—'Around' and 'Evenly'—alongside the existing 'Between' option. The company also introduced an eraser tool and drag-to-fill functionality for vector editing, accessible via Shift+E.

Why it matters: This update reduces the gap between design tools and CSS specifications, allowing designers to prototype layouts that translate more accurately to web development code.

Decoder

Auto Layout: A Figma property that allows designers to create responsive frames that grow or shrink based on their content, similar to CSS Flexbox.

Original article

Erase and drag to fill for vector editing

Vector editing in Figma now brings familiar interactions to precise edits on the canvas. Erasing and recoloring feel more direct, so you can shape vector work by hand without breaking your flow.

Erase vector paths directly to clean up stray marks or reshape existing artwork
Choose a color or gradient, then drag to fill or recolor multiple regions at once
Press Shift+E to switch to the eraser in vector edit mode or Draw mode. The existing Shift+E shortcut for the Prototype tab in Design mode stays the same.

Learn more about the eraser and paint bucket tools.

Explore all 42 articles in today's digest