Structure a responsive nav bar using variants and Auto Layout

WHAT THIS TESTS: This question evaluates whether you can architect scalable design systems in Figma using component variants and Auto Layout together rather than treating them as separate features. The interviewer wants to see that you understand how to make a single component set responsive across breakpoints without duplicating frames or breaking component links.

A GOOD ANSWER COVERS four things in order. First, you would create a single nav component set with variants for desktop and mobile states, using properties like boolean toggles or variant switches to control visibility. Second, the desktop links should live inside a horizontal Auto Layout frame set to hug contents with wrap enabled so the link row adapts if labels change length. Third, the mobile state uses the same component set but hides the link row and shows a hamburger icon, often via a boolean property or by swapping to a mobile variant. Fourth, the expanded mobile menu should be built as a nested instance or variant using vertical Auto Layout, potentially with absolute positioning so it overlays content without disrupting the parent frame flow.

COMMON WRONG ANSWERS include suggesting two completely separate components for desktop and mobile, which destroys maintainability; manually duplicating frames instead of using variants; or ignoring Auto Layout wrap and resizing rules by relying on absolute positioning for everything. Another red flag is proposing to detach the instance to edit the menu, which defeats the purpose of a design system.

LIKELY FOLLOW-UPS include asking how you would handle three or more breakpoints, how to animate the hamburger transition using Figma prototypes, or how you would manage spacing and typography scales across states using variables. They might also ask how to make the nav accessible by adding focus states or keyboard navigation markers.

ONE CONCRETE EXAMPLE: Imagine a nav with five links and a logo. In the desktop variant, the logo and links sit in a horizontal Auto Layout frame with 24px padding and 16px gap between links, set to hug contents. In the mobile variant, the links are hidden via a boolean property, the hamburger icon appears, and a nested menu instance with vertical Auto Layout drops down with 8px spacing between items. Changing a link label in the main component updates both states automatically.