How do you identify responsive breakpoints in Figma for CSS?

WHAT THIS TESTS: This question evaluates whether you can reverse engineer responsive intent from a design tool into code. Interviewers want to see that you treat Figma as a source of behavioral logic, not just static screenshots. They are looking for fluency in Figma's auto layout, constraints, and resizing models, and whether you use those to write container-aware CSS rather than device-centric breakpoints.

A GOOD ANSWER COVERS: First, scan the file for multiple frames or variants representing the same component at different widths, noting the exact pixel widths where the layout shifts. Second, inspect auto layout properties on those frames, looking for direction changes from horizontal to vertical, wrap toggles that push items to new lines, or grid column count changes, because these map directly to flex-direction, flex-wrap, and grid-template-columns in CSS. Third, check individual layer constraints and resizing rules, such as hug contents versus fill container, which tell you whether to use fixed widths, percentages, or flex-grow. Fourth, translate the observed reflow thresholds into min-width or max-width media queries using the actual frame dimensions, then round or adjust them in conversation with the designer to account for fluid behavior between breakpoints. Fifth, mention that you verify spacing and padding values at each breakpoint since auto layout gaps often change alongside layout direction.

COMMON WRONG ANSWERS: A weak answer immediately lists standard device breakpoints like 768 pixels or 1024 pixels without opening the Figma file's structure. Another red flag is treating every artboard as a rigid snapshot and hardcoding exact pixel values instead of identifying the underlying layout system. Candidates who ignore auto layout and rely solely on visual diffing signal that they handcraft CSS without understanding the designer's systematic intent.

LIKELY FOLLOW-UPS: The interviewer may ask how you handle a component that uses Figma's grid auto layout instead of horizontal or vertical flows. They might also ask what you do when the design only includes a desktop and mobile frame but nothing in between, or how you decide between container queries and media queries when a component appears in multiple contexts.

ONE CONCRETE EXAMPLE: Suppose a card component sits at 1440 pixels wide in a horizontal auto layout with wrap disabled, but at 375 pixels it switches to vertical flow with hug contents enabled. You would set a media query around the width where horizontal wrapping would fail, perhaps max-width 680 pixels, switching the CSS flex-direction to column and allowing the card to hug its content rather than stretching to fill. If the designer also added a 768 pixel frame showing two columns via grid auto layout, you would insert an intermediate breakpoint using grid-template-columns and adjust the gap to match the Figma spacing value.