Figma | Auto Layout Adds CSS-Compatible Spacing
Figma is bringing Auto Layout closer to CSS with new responsive spacing options that make it easier to distribute elements using familiar web layout behavior. Alongside the existing automatic spacing system, designers can now choose Between, Around, or Evenly to control how available space is distributed between items and around the edges of a frame.
Auto Layout spacing now follows familiar CSS patterns
Figma's automatic spacing previously distributed objects across an Auto Layout frame using one default behavior. That option is now called Between, and two additional choices - Around and Evenly - give designers more control over how the remaining space is shared.
The terminology deliberately matches CSS. Between corresponds to space-between, Around corresponds to space-around, and Evenly corresponds to space-evenly. This creates a more direct connection between the way a responsive layout is designed in Figma and the way the same distribution can later be implemented on the web.
Between, Around, and Evenly distribute space differently
Between keeps equal spacing between objects while placing no automatically distributed space at the outer edges. This is the behavior Figma already used for automatic spacing, but the new name makes its relationship with CSS clearer.
Around distributes equal gaps between objects while leaving half that amount of space at each outer edge. Evenly uses the same amount of space everywhere, including the gaps between items and the spaces at both edges of the Auto Layout frame.
Responsive components can map more closely to web layouts
The update is particularly useful when designing navigation bars, button groups, cards, toolbars, responsive sections, and other interface components where available space changes with the size of the container. Instead of manually recreating a CSS distribution pattern through padding or nested frames, designers can select the spacing behavior directly.
This also makes design handoff more predictable. A developer looking at an Auto Layout frame can recognize a spacing model that already corresponds to a standard CSS Flexbox value, reducing the need to interpret how the designer intended the available space to behave when the container changes size.
Auto spacing also behaves more consistently when space runs out
Figma has also adjusted how automatic gaps behave when child elements no longer fit inside their parent frame. Auto spacing will stop at zero instead of becoming negative and causing objects to overlap automatically. If intentional overlap is needed, designers can still enter a specific negative gap value.
The behavior of a single item also now follows the selected distribution more closely. A single child using Between aligns to the start of the frame, while Around and Evenly keep the item centered. These details bring Auto Layout closer to the behavior designers can expect when translating the same structure into CSS Flexbox.
REMEMBER: The new Around and Evenly Auto Layout spacing options are rolling out to Figma users, so collaborators may receive access at slightly different times during the rollout.{alertSuccess}
Daisuki's Take: What This Means for Designers
This is a relatively small interface change with a useful impact on web and product design. Matching Auto Layout terminology directly with CSS makes responsive behavior easier to understand before a design reaches development.
It can also reduce unnecessary layout work. Around and Evenly previously required designers to reproduce similar distributions through additional spacing decisions, while the new options express that intent directly in the Auto Layout configuration.
We see the biggest advantage in design-to-code workflows. When Figma and CSS describe the same spacing behavior using the same concepts, responsive components become easier to document, inspect, and reproduce without translating between two different layout models.
Sources and Recommended Links
- Responsive Spacing Across Design and CSS | Figma Release Notes
- Use the Horizontal and Vertical Flows in Auto Layout | Figma Official Documentation
- Use Auto Layout with CSS Flexbox in Mind | Figma Official Documentation
