How would you use Auto Layout to build a responsive card?

WHAT THIS TESTS: This tests whether you treat Figma Auto Layout as a systematic constraint engine rather than a grouping convenience. The interviewer wants to see that you understand how vertical direction, fixed gap values, and resizing behaviors interact to create truly responsive components. Specifically, they are checking if you know how to prevent spacing drift when text content changes length, which is a fundamental production-level component design skill.

A GOOD ANSWER COVERS: A strong answer walks through four steps in order. First, frame strategy: wrap the entire card in an Auto Layout frame set to vertical direction so the header, image, and text stack top-to-bottom. Second, spacing discipline: apply a fixed gap of 16 or 20 pixels between child layers and uniform padding around the edges so whitespace is systematic, not eyeballed. Third, text resizing logic: set the text block to fill container width so it tracks the card width, and hug contents height so the frame expands or contracts as the copy grows or shrinks. Fourth, parent scaling: set the card frame itself to fill container width or a fixed max-width so it responds to its parent frame or device constraints without manual adjustment.

COMMON WRONG ANSWERS: Red flags include relying on absolute positioning for the header or text, which severs them from the Auto Layout flow and breaks spacing when text wraps. Another mistake is setting the text layer to fixed height, which causes overflow or clipped descenders when the headline changes. Some candidates mention grouping but forget to set resizing rules, leaving the component brittle when instances are resized. Saying you would just nudge layers manually after content changes signals a workflow that does not scale.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle a card with a horizontal row of metadata tags below the text, which tests nested Auto Layout frames with mixed directions. They might also ask how to enforce a minimum or maximum card height, or how variant properties could swap the header style while preserving spacing. Another common pivot is asking how you would document these spacing rules for developers, bridging design and engineering handoff.

ONE CONCRETE EXAMPLE: Imagine a podcast card with a 360 by 240 pixel album art image, a title in 20 point semibold, and a description in 16 point regular. You create a vertical Auto Layout frame with 16 pixel gaps and 20 pixel padding. The title and description text layers both fill container width and hug height. When the description changes from one line to four lines, the card frame grows downward automatically, the 16 pixel gap between the image and title stays identical, and the bottom padding remains 20 pixels without any manual repositioning.