How do Hug, Fill, and Fixed resizing behaviors interact?

WHAT THIS TESTS: This question evaluates whether you understand constraint-based layout systems and how size constraints propagate through a tree of nested frames. In Figma Auto Layout, resizing is not a per-layer isolated property; it is a negotiated relationship between a parent frame and its direct children. The interviewer wants to see that you can reason about recursive layout constraints and avoid infinite loops where a child asks to fill a parent that is simultaneously trying to hug the child.

A GOOD ANSWER COVERS: First, define the three modes in plain language. Hug contents means the layer shrinks or grows to match the intrinsic size of its own content, like a button wrapping around text. Fill container means the layer stretches along the parent's primary axis to occupy all available space, like a navigation item expanding to fill a header. Fixed means the layer keeps an explicit numerical width or height regardless of neighbors or parents. Second, explain the parent-child contract. A parent frame set to Hug contents will expand to fit children that are Fixed or Hug, because those children declare a concrete size. However, if a child is set to Fill container, the parent must provide a definite available space; therefore the parent cannot be set to Hug on that same axis and must instead be Fixed or Fill relative to its own parent. Third, mention the cross-axis behavior. Resizing settings on the primary axis often differ from the counter axis, and Fill on one axis does not automatically imply Fill on the other.

COMMON WRONG ANSWERS: Treating the modes as equivalent to CSS width and height without mentioning the constraint negotiation. Saying that Fill always works regardless of parent settings, which ignores the fact that a Hug parent has no free space to distribute. Describing Hug as merely a padding toggle rather than a size resolution strategy. Claiming that Fixed children inside a Hug parent will clip instead of forcing the parent to expand.

LIKELY FOLLOW-UPS: How would you build a card component that grows with variable text but keeps a button pinned to the right edge? What happens when you nest an Auto Layout frame inside another Auto Layout frame and both are set to Hug? How do you handle truncation or minimum widths when a parent uses Hug and a child uses Fill? Can you mix Hug and Fixed children in the same horizontal Auto Layout frame, and how does Figma distribute space?

ONE CONCRETE EXAMPLE: Imagine a horizontal Auto Layout frame acting as a modal footer. The footer frame is set to Hug contents vertically and Fill container horizontally inside the modal. Inside the footer, you place a Cancel button and a Submit button. The Cancel button is set to Hug contents so it stays only as wide as its text. The Submit button is set to Fill container so it stretches to occupy the remaining horizontal space in the footer. The footer frame itself can be Hug horizontally only if the modal above it provides a Fixed width; otherwise the footer must also Fill the modal width to give the Submit button a defined space to fill. If you accidentally set the footer to Hug horizontally while the modal is also Hug, Figma cannot resolve the Submit button's Fill request and will often force the parent to a Fixed fallback size.