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.