From flexbox inspiration to a rethink of layout controls

Figma has released a revamped version of Auto Layout that goes beyond a visual refresh, introducing new alignment and resizing controls. The update is the result of an extended design process that began with the feature's 2019 launch and attempts to balance added flexibility with the editor's usability.

Before Auto Layout existed, resizing designs in Figma was a manual chore. A designer changing text in one button of a dialog box would have to resize the button, nudge surrounding elements, and adjust the container—all while preserving padding and spacing. Frustrating as that was, it was also a real barrier to building responsive design systems.

Early designs for Figma actually included automatic layout options in the sidebar, under an unlabeled "Layout" dropdown in the properties panel. The feature never shipped, and the vestiges lay dormant in Figma's source code until Maker Week 2018, when product director Sho revived the concept in prototypes. A newly formed team then set out to make Auto Layout a reality.

Guiding principle: a thoughtful subset of flexbox

The team behind the first version of Auto Layout drew inspiration from flexbox, given Figma's foundation on the web. But the goal was never to replicate flexbox wholesale; rather, it was to create a layout system accessible to designers who shouldn't need deep CSS knowledge. The guiding principle became: "Auto Layout should be a thoughtful subset of flexbox."

That mission informed several design decisions in the original release:

  • Auto Layout can be enabled on a frame, laying out components vertically or horizontally
  • Spacing between items can be set in both axes
  • An Auto Layout frame hugs its components on the main axis, while the counter axis can be fixed or hugging
  • Components can be aligned to the container—left, center, or right for vertical layouts; top, center, or bottom for horizontal ones

A prototype built entirely in HTML by Marcin, Auto Layout's designer, helped the team work through details early in the process, including frame handle decoration, drag behavior, and outlines.

Stretch: a deceptively simple feature

The first version of Auto Layout allowed alignment but kept components at their own sizes as a frame grew. What designers wanted next was "stretch"—an alignment option letting components expand to fill the container's full width or height regardless of resizing.

Implementing stretch required more than a new UI button. In the initial layout engine, containers depended only on the sizes of their components, guaranteeing a valid layout by resolving components first and containers last. Stretch inverts that relationship—components can now depend on container size—so the engine had to be rebuilt to iterate between components and containers until all layout constraints are satisfied.

Design explorations for this release considered merging Auto Layout alignment into Figma's constraints panel, since users often conflated the two features. The team ultimately deferred those UI changes, shipping stretch alone to leave room for a more thoughtful redesign in the next iteration.

Rethinking alignment and resizing

Work on the next version began with a specification from new product manager Emily, who studied flexbox to compile terminology, support tickets, and feature requests. Engineer Sawyer then built a quick prototype incorporating many advanced layout features, and designer Rasmus explored mockups that led to the final design.

Scoping the feature set revealed complications with supporting stretch on both axes. Up to that point, stretch tied to alignment existed only on the counter axis. But as designers nested Auto Layout frames within others, use cases emerged for stretch along the main axis too. This couldn't be solved by simply adding a stretch alignment button for the primary axis—it would require making the primary axis fixed, which in turn demanded alignment options for when free space remains. With both container and component frames, the competing options would clutter the properties panel.

The solution was a conceptual shift: move all alignment from the component to the container level. Components can still be individually aligned by wrapping them in an extra Auto Layout frame. The new point-and-click alignment popover includes a preview, keeping the main properties panel footprint minimal.

Resizing controls were consolidated too. Since a frame can't both stretch and hug, the team designed a three-way dropdown with Fill Container, Hug Contents, and Fixed. Because these controls apply to both axes, two dropdowns—one for width, one for height—form a constraints-like UI on any selected Auto Layout frame.

During testing, cases surfaced where both the constraints and resizing panels displayed simultaneously. Users found the two similar-but-distinct panels confusing, and the hidden dependency between constraints and sizing felt wrong. The team's response: a hybrid panel that shows the appropriate options no matter what's selected, eliminating the redundancy.

These two changes—the alignment popover and the resizing/constraints hybrid panel—anchor the release. Behind the scenes, the team also reworked the layout engine and wrote migration logic to preserve layout behavior in existing documents while enabling the new functionality.