Back to rankings

Figma: Responsive Auto Layout Spacing

FigmaView original changelog

Figma expanded auto layout's spacing controls with two new distribution modes, "Around" and "Evenly", joining the existing default behavior which has been renamed "Between." The three modes now map directly onto CSS's space-between, space-around, and space-evenly flexbox values, making it easier to translate auto layout settings straight into code. The new options are rolling out gradually, so collaborators on the same file may see them appear at different times.

Key Takeaways

  • Auto layout gains two new spacing modes — "Around" and "Evenly" — joining the renamed "Between" default, giving Figma three distinct distribution options.
  • CSS parity is the core goal, with the three modes mapping directly to CSS's space-between, space-around, and space-evenly flexbox values.
  • "Around" adds automatic edge spacing equal to half the gap size between items, useful for layouts like padded card rows.
  • "Evenly" distributes identical spacing everywhere, including both outer edges, ideal for symmetric layouts like nav bars.
  • The rollout is gradual, so collaborators working in the same file may not see the new options at the same time.
  • The change reduces design-to-code translation friction, letting developers map auto layout settings straight to flexbox justify-content values without guesswork.

New Auto Layout Spacing Options

Figma expanded its auto layout spacing controls with two new distribution modes, "Around" and "Evenly," joining the existing default behavior now renamed "Between." The update brings Figma's spacing model into closer alignment with how spacing already works in CSS flexbox layouts, making it easier for designers and developers to translate design intent directly into code.

Between, Around, and Evenly Explained

"Between" preserves Figma's original auto-spacing behavior: gaps are distributed evenly between items, with no space added at the outer edges. This mode is renamed but otherwise unchanged from what auto layout has always defaulted to.

"Around" is new and creates even gaps between items while automatically applying half of that gap size to each outer edge. This mirrors CSS's space-around value and helps designers avoid manually padding the outside of a layout, since the spacing recalculates automatically as items are added, removed, or resized.

"Evenly" is also new and distributes identical spacing across every gap, including the two outer edges, matching CSS's space-evenly value. This is useful for layouts like navigation bars or evenly distributed card grids, where visual balance across the entire container matters more than aligning purely to content edges.

Why It Matters

Because these three modes map directly onto CSS's space-between, space-around, and space-evenly properties, engineers translating a Figma auto layout frame into code can now identify the correct flexbox justification value at a glance, reducing back-and-forth between design and development. Figma has begun rolling the "Around" and "Evenly" spacing modes out to all users, though it noted that collaborators on the same file may see the new options appear at slightly different times during the rollout.