Translate Figma Auto Layout padding, direction, and spacing to Flexbox

WHAT THIS TESTS: This question probes whether you can bridge the gap between design-tool semantics and browser layout mechanics. Figma Auto Layout uses concepts like direction, padding, spacing, and resizing modes that do not map directly to single CSS properties. A senior candidate should demonstrate fluency in both worlds and know how to build a robust component that survives dynamic content.

A GOOD ANSWER COVERS: First, map the Auto Layout direction property to flex-direction, using row or column depending on the design. Second, translate the spacing between items to the CSS gap property on the flex container, while mapping the container padding to padding on that same container. Third, convert distribution settings like space-between to justify-content values such as space-between or space-around. Fourth, address resizing behaviors: a hug-contents frame maps to the default flex-basis auto with no flex-grow, while a fill-container frame maps to flex-grow 1 and flex-shrink 1 with an appropriate flex-basis. Fifth, mention cross-axis alignment by mapping Auto Layout alignment to align-items, such as stretch or center. Sixth, discuss overflow handling, because Flexbox will not automatically wrap unless flex-wrap is set, and text truncation may require additional rules.

COMMON WRONG ANSWERS: Candidates sometimes treat Auto Layout as a direct visual clone and use static margins or absolute positioning to mimic spacing. Another red flag is ignoring the difference between container padding and item spacing, which leads to brittle margin hacks. Some engineers also forget to account for hug versus fill, producing components that break when the viewport or text length changes. Using margin-left on every child except the first to simulate gap is an outdated anti-pattern.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle nested Auto Layout frames, which translate to nested flex containers. They could also ask about responsive behavior, such as when to switch from row to column using media queries, or how to handle minimum and maximum width constraints that exist in Figma but need min-width and max-width in CSS. Another follow-up is how you would manage baseline alignment for text-heavy cards.

ONE CONCRETE EXAMPLE: Imagine a card with a vertical Auto Layout of 16 pixels padding, 8 pixels gap between a title and a button, and a fill-container width. In CSS, you would set display flex, flex-direction column, gap 8px, padding 16px, and justify-content flex-start. The card itself would have width 100 percent and the content area would rely on natural block behavior, or you could set flex-grow 1 on a middle section if the card stretches inside a parent grid. If the button is set to hug its text in Figma, it needs no special flex properties; if it must fill the card width, you would add align-self stretch or width 100 percent depending on the desired behavior.

Source: developer.mozilla.org