How would you use Auto Layout for a button with optional icon?

WHAT THIS TESTS: This question checks whether you treat Figma as a dynamic layout engine rather than a static canvas. The interviewer wants to see that you understand how auto layout frames respond to content changes without manual repositioning, and that you can apply direction, spacing, padding, and alignment to build a real component that scales cleanly in a design system.

A GOOD ANSWER COVERS: A good answer hits four things in order. First, select the text layer and optional icon and add auto layout to a frame, typically by pressing Shift A, so Figma arranges the objects according to the chosen flow. Second, choose the horizontal flow along the x-axis because a button lays out its label and icon in a row. Third, set explicit padding values on the auto layout frame so the space between the content and the button edges stays consistent even when the text changes. Fourth, configure resizing behavior so the text layer hugs its contents and the parent button frame also hugs contents, which lets the button grow or shrink automatically as you edit the label. Mentioning alignment and spacing properties shows you know how to keep the icon and text visually balanced inside the frame.

COMMON WRONG ANSWERS: Red flags include describing manual resizing or fixed-width frames after text edits, which defeats the purpose of auto layout. Another red flag is grouping the icon and text without auto layout and relying on manual nudging, because that breaks as soon as the label changes. Saying you would use the grid flow for a single button is also a sign of confusion, since grid is meant for columns and rows rather than a simple row of two elements, and will create maintenance debt.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle an icon-only variant where the text is hidden, or how wrap behavior would affect a row of multiple buttons. They might also ask what happens if you switch from horizontal to vertical flow, or how you would maintain consistent spacing across different button sizes in a larger design system.

ONE CONCRETE EXAMPLE: Imagine a submit button with a checkmark icon on the left and the word Submit on the right. You place both layers inside an auto layout frame, set the direction to horizontal, set padding to 16 pixels on all sides, and set gap spacing between the icon and text to 8 pixels. You then set the text layer to hug contents and the button frame to hug contents. When you change the label to Save Changes, the frame automatically expands along the x-axis while the 16 pixel padding and 8 pixel gap remain exactly the same, with no manual repositioning needed.