---
name: figma-auto-layout-pro
description: "Master Figma Auto Layout — responsive frames, hug/fill, nested layouts, spacing, the parts that confuse everyone. A Figma Auto Layout expert: hug vs fill vs fixed, nested auto layouts, absolute-position escapes, min/max width, wrapping, and the spacing/padding patterns that make a design actually responsive instead of pixel-pinned. Includes the component-ready conventions a dev handoff needs."
license: MIT
---

# Figma Auto Layout Pro

A focused expert for Figma's Auto Layout — the resizing system that trips up almost everyone the first dozen times. This skill walks you through hug/fill/fixed sizing, nested layouts, absolute-position escapes, wrapping, and min/max constraints, and it leaves you with frames that actually respond to content instead of breaking the moment a label gets longer. It's built for product designers and design-system maintainers who hand off to engineers and are tired of "looks fine in the mockup, breaks in the build."

## When to use it

- A button or chip won't grow with its text, or a card stretches when you wanted it to hug.
- You're building a list/row that needs one element pinned left and another pushed right (the classic spacer problem).
- A toolbar should wrap to a second line on narrow screens but won't.
- You're standardizing spacing tokens and padding across a component library before dev handoff.
- An icon or badge needs to float over a frame without being shoved into the flow.

## How it works

The skill reasons in Figma's actual model. Each Auto Layout frame has a **direction** (horizontal/vertical), **item spacing** (or "Space between"), and **padding** (per-side). Children carry **horizontal/vertical resizing** set to one of: *Hug contents*, *Fill container*, or *Fixed*. It covers:

- **Hug vs Fill vs Fixed** — when each is legal (Fill only works inside an Auto Layout parent; Hug only on Auto Layout frames or text).
- **Nested Auto Layout** — how a child frame's resizing interacts with its parent's, e.g. a Fill column holding Hug rows.
- **Absolute position** — using "Ignore auto layout" so an element (close button, notification dot) floats with constraints instead of joining the stack.
- **Min/max width & height** — to cap a Fill element or keep a hugging frame from collapsing.
- **Wrap** — switching a horizontal frame to "Wrap" so children flow onto new lines, with cross-axis spacing.
- **Alignment & "Space between"** — distributing children to opposite ends without manual spacers.

## Example

```
curl -fsSL --create-dirs -o ~/.claude/skills/figma-auto-layout-pro/SKILL.md https://claudeskil.com/skills/figma-auto-layout-pro/SKILL.md

# Then, in chat:
"My pricing card title wraps but the card width won't grow.
Frame is horizontal, title is Fixed width."

# The skill diagnoses it:
# - Card frame: set horizontal resizing to Hug (or Fill if it should
#   match siblings)
# - Title text layer: set horizontal resizing to Fill container,
#   vertical to Hug, so it wraps instead of clipping
# - Add max-width 320 on the card to stop runaway lines
```

## Tips & gotchas

- **Fill needs an Auto Layout parent.** If "Fill container" is greyed out, the parent isn't an Auto Layout frame — wrap it (Shift+A) first.
- **Hug collapses to zero** if a frame has no children and no min size. Set a min width/height when building empty states.
- **Text truncation** ("Resize to fit" vs fixed height with truncate) is separate from layout resizing — fix the text layer's resize mode, not the frame.
- **Absolute-positioned children still count** for the parent's clipping, but not its spacing/size — handy for overlays, surprising if you forget.

## FAQ

**Why is "Fill container" disabled?** The selected layer's parent isn't an Auto Layout frame. Add Auto Layout to the parent, then Fill becomes available.

**How do I push two items to opposite ends?** Set the frame's spacing mode to "Space between" (the alignment packing option) — no invisible spacer layer needed.

**Does this map to CSS Flexbox?** Closely. Direction ≈ flex-direction, Fill ≈ flex: 1, Hug ≈ width: fit-content, item spacing ≈ gap, and Wrap ≈ flex-wrap. The skill calls these out so handoff notes translate cleanly.