Figma Auto Layout Sizing: Hug vs Fill for CSS-Responsive Components

Decision point: sizing mode for a responsive navigation item

In Figma Auto Layout, the sizing mode of a component determines how it reacts when the parent frame or its children change. This choice directly maps to the Flexbox properties generated in Dev Mode, making it a critical decision for design-to-code hand-off.

A typical constraint in a horizontal navigation header involves a parent frame with a fixed maximum width, a required horizontal gap between items, and one or more items that must stretch to fill remaining space without causing overflow or layout errors.

Supported sizing modes compared

Mode	Layout behavior	Dev Mode CSS mapping	Primary use case
Hug contents	Container shrinks to the smallest size that fully contains its children	flex: 0 0 auto (no growth, default shrink)	Items with variable text length or content that should not expand
Fill container	Child element expands to occupy available space within the parent Auto Layout container	flex: 1 1 auto (equivalent to flex-grow: 1, flex-shrink: 1)	Last navigation item, toolbar spacers, or any element that must distribute whitespace
Fixed width/height	Dimensions remain constant regardless of parent resizing or content changes	Absolute values, e.g. width: 48px; no Flexbox growth/shrink behavior	Icons, decorative badges, grid cells with rigid dimensions

Trade-offs and cautions

• Hug contents is ideal for items whose width should follow content, but nesting multiple Hug containers can increase Auto Layout tree depth and affect file performance in large designs.
• Fill container maps closely to flex-grow: 1, but Figma's Fill behavior does not always perfectly mirror CSS when multiple constrained children are present; the last Fill item may absorb more than its proportional share.
• Placing a Fill parent inside a Hug child creates a circular dependency that Figma cannot resolve, triggering an error in the right‑sidebar warnings.
• Nested Auto Layout trees deeper than three levels may show sluggish resizing; flattening the structure or using fixed-width containers where possible mitigates this.

Concrete validation in Dev Mode

To confirm the sizing mode produces the expected CSS output:

1. Select the Auto Layout container in the canvas.
2. Enter Dev Mode (or open the inspect panel in the prototype flow).
3. Locate the generated CSS for the container or child element.
4. Resize the parent frame horizontally:
• If the child expands to fill the available width, the output includes flex-grow: 1 — confirming Fill container behavior.
• If the child shrinks to fit its content, the output lacks growth properties — confirming Hug contents behavior.
5. Check the right‑sidebar for any circular dependency warnings, especially if a Fill parent wraps a Hug child.
6. For fixed‑width items, verify that the CSS contains absolute pixel values and no flex properties.

When the validation matches the intended layout pattern, the chosen sizing mode can be documented in the design system's component spec, ensuring developers receive consistent Flexbox rules during hand‑off.