Auto Layout & Constraints

Auto Layout is Figma's most developer-friendly feature. It lets designers build frames that behave like CSS flexbox — items stack vertically or horizontally, spacing is consistent, and elements resize responsively. When a design uses Auto Layout properly, translating it to code becomes almost mechanical.

What Is Auto Layout?

Auto Layout turns a static frame into a flexible container. Instead of manually positioning every element with absolute coordinates, you define:

• Direction — Horizontal (row) or vertical (column), just like flex-direction.
• Spacing — The gap between child elements, equivalent to CSS gap.
• Padding — Internal spacing around the content, matching CSS padding.
• Alignment — How children align within the frame, like align-items and justify-content.

When you add or remove a child, the layout adjusts automatically — no manual repositioning.

Auto Layout Maps to Flexbox

The mapping between Figma Auto Layout properties and CSS flexbox is nearly one-to-one:

When you inspect an Auto Layout frame in Figma's Dev Mode, you can often copy the CSS almost directly:

Resizing Behavior

Each child element in an Auto Layout frame has a resizing mode that determines how it responds to the container:

Hug Contents

The element shrinks to fit its content. A button with "Save" text will be just wide enough for the text plus padding. In CSS, this is width: fit-content or simply not setting a width (letting the element size naturally).

Fill Container

The element stretches to fill available space in the parent. In CSS, this is flex: 1 for the primary axis or align-self: stretch for the cross axis.

Fixed Size

The element maintains a specific width or height regardless of content or container size. In CSS, this is an explicit width or height value.

A practical example — a card with a flexible content area:

Nested Auto Layout

Real designs nest Auto Layout frames multiple levels deep. A navigation bar might be:

Frame: "Nav Bar" (Horizontal, space-between, padding 16)
├── Frame: "Left Section" (Horizontal, gap 8, hug)
│   ├── Icon: "Logo"
│   └── Text: "App Name"
├── Frame: "Nav Links" (Horizontal, gap 24, hug)
│   ├── Text: "Home"
│   ├── Text: "Products"
│   └── Text: "About"
└── Frame: "Right Section" (Horizontal, gap 12, hug)
    ├── Icon: "Search"
    └── Button: "Sign In"

Translating to HTML and CSS:

Constraints (Non-Auto Layout Frames)

For frames that do not use Auto Layout, Figma offers constraints that control how children respond when the parent frame is resized:

• Left / Right / Top / Bottom — Pin to an edge, maintaining distance from that edge.
• Left and Right — Pin to both sides, stretching the element horizontally (like position: absolute; left: 16px; right: 16px).
• Center — Keep the element centered regardless of parent size.
• Scale — Resize proportionally with the parent.

Constraints are useful for understanding how designers intend elements to behave at different screen sizes, even if the design was created at a fixed width.

Tips for Developers

• Always check for Auto Layout — Select a frame and look for the Auto Layout properties in the right panel. If it is there, you know the design maps to flexbox.
• Read spacing values — Hover between elements to see the gap. This is your CSS gap value.
• Check padding individually — Figma allows independent top, right, bottom, left padding, just like CSS.
• Note "Fill" vs "Hug" — This tells you whether an element should be flex: 1 or natural width.