techlist.io
KREN
figma

Behind the feature: the making of the new Auto Layout | Figma Blog (opens in new tab)

figmadesign-systemscsshtmlresponsive-designauto-layoutflexbox

Figma’s new Auto Layout evolved from a long-standing idea into a more flexible system for creating responsive designs. The team sought to combine flexbox-inspired power with an approachable interface, defining Auto Layout as “a thoughtful subset of flexbox.” The result was a feature designed to reduce manual resizing while preserving usability for designers who may not know CSS deeply.

The Need for Automatic Resizing

  • Before Auto Layout, designers had to manually resize buttons, reposition neighboring elements, and adjust containers whenever content changed.
  • This repetitive work made responsive design systems difficult to build and maintain.
  • Figma had considered automatic layout since its early designs, but the concept remained unimplemented until Maker Week in 2018.
  • During Maker Week, product director Sho reimagined the feature in prototypes, eventually leading to a dedicated team focused on making Auto Layout real.

Designing a Thoughtful Subset of Flexbox

  • The team drew inspiration from CSS flexbox because it could help align design workflows with implementation in code.
  • They intentionally avoided reproducing all of flexbox’s complexity.
  • Their guiding principle was to create “a thoughtful subset of flexbox” that remained easy to learn and use.
  • Core capabilities included:
    • Enabling vertical or horizontal layout on a frame.
    • Setting spacing between items.
    • Automatically sizing frames to hug their contents along the main axis.
    • Allowing fixed or content-based sizing on the counter axis.
    • Giving individual components independent alignment within their container.

Prototyping and Team Alignment

  • The designer, Marcin, built an early prototype entirely in HTML.
  • The prototype helped the team experience the feature early and resolve interaction details before implementation.
  • It informed decisions about frame-handle decoration, dragging behavior, and visual outlines.
  • This shared prototype helped product, design, and engineering align around both the feature’s behavior and its usability.

Figma’s approach shows that a successful layout tool does not need to duplicate the full complexity of web technologies. By selecting the most useful flexbox concepts and presenting them through an intuitive editor, Auto Layout made responsive design more practical while keeping the experience accessible.