How do you build a responsive Figma component across breakpoints?

WHAT THIS TESTS: This question evaluates whether you treat responsiveness as a systemic property of the design file, not just a visual outcome. The interviewer wants to know if you leverage Figma's native constraint and auto layout engines to make components self-adjusting, rather than relying on manual duplication for each breakpoint.

A GOOD ANSWER COVERS: First, establish a base component using auto layout on a frame so that child layers respond dynamically to content and size changes without manual repositioning. Second, define the resizing behavior of every child layer using hug and fill modes so that padding and spacing remain consistent when the parent stretches or shrinks. Third, choose the correct auto layout flow for the content structure: vertical for lists, horizontal with wrap for rows that need to reflow, or grid for galleries and bento boxes that must adapt to different screen sizes. Fourth, manage breakpoints using component variants or variable modes to toggle visibility, spacing, or composition at specific widths, rather than maintaining separate static artboards. Fifth, stress-test the component by resizing the parent frame to verify that the layout holds across mobile, tablet, and desktop widths.

COMMON WRONG ANSWERS: A major red flag is describing a process where you duplicate the artboard three times and manually nudge elements for each breakpoint without auto layout or constraints. Another weak signal is treating auto layout only as a vertical stack and ignoring horizontal wrap or grid flows, which are essential for real responsive behavior. Saying you rely on Figma's Dev Mode or handoff notes to fix responsiveness in code also signals that you push the problem downstream instead of solving it in the design system.

LIKELY FOLLOW-UPS: The interviewer may ask how you handle typography scaling across breakpoints, whether you use Figma variables for spacing tokens, or how you document responsive behavior for developers. They might also probe how you decide when to use a single fluid component versus separate variants for mobile and desktop.

ONE CONCRETE EXAMPLE: Suppose you are building a dashboard card that shows a metric, a chart, and a call-to-action. You would start with an auto layout frame set to grid flow so the three modules sit in columns on desktop and stack vertically on mobile as the frame narrows. Each module inside uses vertical auto layout with hug heights and fill widths. You create two variants of the card, one for wide screens and one for narrow screens, swapping the grid to a vertical flow in the narrow variant. You then place the card inside a parent frame and resize it to confirm the modules reflow correctly without manual adjustment.