How do you build a responsive card with Auto Layout?

WHAT THIS TESTS: This question evaluates whether you understand Figma Auto Layout as a system of nested constraints rather than a single feature. The interviewer wants to see that you know how to combine vertical and horizontal resizing behaviors, how to use hug and fill strategically, and how to structure a component so that text changes propagate correctly without manual adjustments. It also checks if you understand the difference between a frame that wraps its contents and one that constrains them.

A GOOD ANSWER COVERS: First, create a parent frame for the card and apply vertical Auto Layout. Set the frame to hug its contents vertically and fill its container horizontally so the card adapts to the width of its parent while growing downward. Second, place the image at the top and set its horizontal resizing to fill width so it stretches with the card; its height can be fixed or controlled by an aspect ratio frame. Third, group the title and description into a nested vertical Auto Layout frame and set both text layers to hug height so they expand naturally when copy changes. Fourth, place the button below the text group; depending on the design, it can hug its own contents or fill width. Fifth, apply consistent padding on the card frame and gap values between items so spacing remains uniform without manual nudging.

COMMON WRONG ANSWERS: A major red flag is using absolute positioning for any element inside the Auto Layout frame because that removes it from the flow and breaks responsiveness. Another mistake is setting text layers to a fixed height, which causes overflow or clipping when the description grows. Some candidates suggest a single flat Auto Layout without nesting, which makes it impossible to control the text block independently from the image or button. Saying you would manually resize the card after every text edit also signals a misunderstanding of the tool.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle a card grid where cards need to align despite different text lengths. They could also ask how to implement a max width or truncation for the description, or how to use component properties to swap button states while preserving layout. Another follow-up is how you would handle an image with an unknown aspect ratio without distorting the card.

ONE CONCRETE EXAMPLE: Imagine a news article card inside a dashboard grid. The parent card frame uses vertical Auto Layout with 16 pixel padding and 12 pixel gap. The hero image fills the card width and has a fixed 200 pixel height. The headline and excerpt sit in a nested vertical Auto Layout with 8 pixel gap, both text layers set to hug height. The primary button sits at the bottom and hugs its own width while filling horizontally if the design calls for a full width button. When the excerpt text doubles from one line to four, the nested text frame grows downward, pushing the button and expanding the parent card height automatically. The grid container on the dashboard uses vertical Auto Layout or grid flow so the taller card realigns with its row.