Figma Auto Layout gets three CSS-style spacing modes

Figma is making Auto Layout spacing behave more like the CSS developers use to build responsive interfaces. Released on August 21, 2026, the update expands automatic spacing with Around and Evenly options while renaming the existing default behavior to Between, creating a direct relationship with the familiar CSS space-around, space-evenly, and space-between patterns.

{getToc} $title={Table of Contents}

Figma Auto Layout gets three CSS-style spacing modes

Auto Layout already allowed designers to set the gap between items to Auto, distributing available space automatically inside a frame. That existing behavior is now called Between, while two additional distribution modes give designers more control over how the remaining space is divided between objects and the edges of the container.

The terminology intentionally matches CSS. Between corresponds to space-between, Around maps to space-around, and Evenly matches space-evenly. This gives designers and frontend developers a more recognizable vocabulary when discussing how a responsive row or column should distribute its contents.

{getCard} $type={post} $title={More useful reading}

Between, Around, and Evenly distribute space differently

Between places equal gaps between the objects while leaving no automatically allocated space at the outer edges. This is the same behavior Figma previously used as its default Auto gap option, but the new name makes its relationship with CSS much clearer.

Around distributes space so that the gaps between objects are twice as large as the space at either edge of the container. Evenly uses a 1:1 relationship instead, making every internal gap and both outer edges identical. These distinctions can produce noticeably different results in navigation bars, button groups, card rows, toolbars, and other responsive interface structures.

The update can make design-to-code handoff more predictable

The closer terminology is particularly useful during frontend handoff. A designer can define a layout with Evenly spacing and a developer can immediately understand that the intended CSS behavior corresponds to justify-content: space-evenly, rather than having to visually approximate the spacing from the canvas.

This also makes Auto Layout more useful as a representation of how an interface should behave when its container changes size. Instead of treating the spaces between elements as fixed pixel values, Auto spacing distributes the available room dynamically, which mirrors a common responsive layout technique in CSS Flexbox.

Auto spacing also avoids negative gaps when content no longer fits

Figma's current Auto Layout behavior also prevents automatic gaps from becoming negative when children are too large for their container. The gap stops at zero and the objects sit against each other rather than overlapping as a side effect of automatic spacing.

This behavior applies across Between, Around, and Evenly and more closely reflects what developers expect from CSS layout. Designers who intentionally need overlapping objects can still create that effect by assigning a specific negative gap rather than relying on an overloaded responsive container to produce it accidentally.

REMEMBER: Figma's Between, Around, and Evenly options correspond to CSS space-between, space-around, and space-evenly. The new Auto spacing options are rolling out to all users, so collaborators may receive them at slightly different times.{alertSuccess}

Daisuki's Take: What This Means for Web Designers

This is a small Auto Layout update with a very direct web design benefit. When Figma and CSS describe the same layout behavior using the same concepts, there is less interpretation required between the design file and the implementation.

For responsive components, the new options also give designers a better way to express intent. Around and Evenly are not merely visual spacing presets; they describe how available space should be redistributed as the container grows or shrinks.

We would use these modes when the production layout is expected to rely on the corresponding CSS behavior rather than manually reproducing the appearance with fixed gaps. The closer Figma's layout model stays to the browser's, the easier it becomes to build designs that survive the move from canvas to responsive code.

{getCard} $type={custom} $title={What's New?} $info={Find more AI Web design news} $icon={}

Sources and Recommended Links

• Responsive spacing across design and CSS | Figma Official Release Notes
• Use the horizontal and vertical flows in auto layout | Figma Official Help Center