Figma Workflow · Page 4 of 8

Auto Layout

Auto Layout makes Figma frames behave like web page boxes: they hold padding, keep even gaps, and grow or stretch to fit their content.

Without Auto Layout, a button is a rectangle with text placed on top. Change the label and you have to resize the rectangle by hand. With Auto Layout, the frame wraps its content, so the button grows with the label, just like a link styled with CSS.

A button with pink padding and gap areas marked, and a card whose image, heading, text and button are stacked with even gaps
Pink shows the padding and gaps Auto Layout keeps for you. Figma shows the same pink when you hover over an Auto Layout frame.

Add Auto Layout

  1. Select a text layer, or several layers that belong together.

  2. Press Shift + A. Figma wraps them in a new frame with Auto Layout.

    A text layer before and after pressing Shift A: afterwards it sits inside a padded frame
    Before and after Shift + A.

  3. Set the direction in the right panel: horizontal (side by side) for a button or navigation bar, vertical (stacked) for a card or a page column.

    The Auto layout settings: direction buttons, alignment grid, gap 8 and padding 24 and 12
    Direction, gap and padding all live in the Auto layout section.

  4. Set the gap and padding from your spacing scale. Gap is the space between items; padding is the space between the items and the frame’s edge.

  5. Rename the frame after what it is: button, topic-card, nav.

Frames inside frames

Real layouts nest. A card is a vertical Auto Layout frame; inside it, the button is a horizontal one. The navigation bar is a horizontal frame of buttons inside the header. This nesting is the same structure your HTML will have.

Fixed, Hug or Fill

Every layer inside an Auto Layout frame has a width setting and a height setting. You’ll find them in the menus beside W and H in the right panel. Choosing the right one is the secret to designs that turn into flexible code.

The W menu open with Fixed width, Hug contents and Fill container, and Fill container selected
Open the menu beside W or H to choose.
Three columns comparing Fixed, Hug contents and Fill container, each shown inside a narrow and a wide parent, with the matching CSS below
The same child inside a narrow and a wide parent. Only Fill container changes width with the parent.
SettingUse it forIn CSS
FixedThings that must be an exact size: a logo, an icon, a favicon framewidth: 160px
Hug contentsThings that should fit their text: buttons, nav links, tagswidth: fit-content or no width at all
Fill containerThings that should stretch: cards, gallery thumbnails, text columnswidth: 100% or 1fr in a grid
Test it by stretching

Drag the edge of your screen frame wider and narrower. If a card stays the same width or text spills out, a layer is set to Fixed where it should be Fill. A website will be viewed at every width, so your design should survive this test.

A frame dragged wider by its edge, with the card inside stretching to fit
Drag a frame’s edge to run the stretch test.

Auto Layout is CSS flexbox

Auto Layout was modeled on the way CSS lays out boxes, so its settings translate almost word for word:

FigmaCSS
Auto Layout, horizontaldisplay: flex;
Auto Layout, verticaldisplay: flex; flex-direction: column;
Gap between itemsgap: 16px;
Paddingpadding: 12px 24px;
Alignmentalign-items and justify-content
Wrap (horizontal frames)flex-wrap: wrap;

Quick practice

  • Make a button: type a label, press Shift + A, then give it padding 12 / 24, a fill from your accent variable and rounded corners. Change the label to a longer word and watch it grow.
  • Make a card: stack a rectangle (image), an H2, a body paragraph and your button in a vertical Auto Layout with 24 padding and 16 gap. Set the image and text to Fill container.
  • Stretch the card wider and narrower. Nothing should overlap or spill out.

© Created by Sara Rosenstock, Marietta College Graphic Design.