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:

/* Figma: Horizontal Auto Layout, gap 12, padding 16, center aligned */
.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

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:

.card {
  display: flex;
  flex-direction: column;
  width: 320px;
  border-radius: 8px;
  overflow: hidden;
}

.card-image {
  width: 100%;       /* Fill container horizontally */
  height: 180px;     /* Fixed height */
}

.card-body {
  flex: 1;           /* Fill remaining vertical space */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-title {
  /* Hug contents — no explicit width */
  font-size: 1.125rem;
  font-weight: 600;
}

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:

<nav class="nav-bar">
  <div class="nav-left">
    <img src="/logo.svg" alt="Logo" />
    <span>App Name</span>
  </div>
  <div class="nav-links">
    <a href="/">Home</a>
    <a href="/products">Products</a>
    <a href="/about">About</a>
  </div>
  <div class="nav-right">
    <button aria-label="Search">🔍</button>
    <button class="btn-primary">Sign In</button>
  </div>
</nav>

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

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.