How do you enforce proximity with Figma Auto Layout and spacing variables?

WHAT THIS TESTS: This question evaluates whether you understand Gestalt principles as engineering constraints rather than aesthetic preferences. Proximity implies that spatial grouping communicates relationships more strongly than color or typography alone. The interviewer wants to see you operationalize that psychology into a scalable system using Figma's constraint-based layout engine and variable-driven tokens that can survive handoff to engineering.

A GOOD ANSWER COVERS: First, define proximity as a structural rule: related elements get smaller gaps, unrelated groups get larger ones. Second, explain a t-shirt spacing scale like 4, 8, 16, 24, 32, 48 to remove arbitrary values and create predictable rhythm. Third, map those values to Auto Layout properties: use gap between items for intra-group density and padding for container breathing room. Fourth, bind those numbers to Figma spacing variables so a single token change propagates across buttons, cards, and lists, enforcing consistency without manual nudging. Fifth, mention that Auto Layout frames respond dynamically when content changes, so proximity rules survive text edits, localization, or component resizing.

COMMON WRONG ANSWERS: Confusing proximity with alignment or visual hierarchy. Suggesting designers eyeball spacing or use manual frames without Auto Layout. Proposing a unique spacing value per component instead of a shared token set. Ignoring the difference between gap and padding. Failing to mention how variables connect design decisions to code. Saying proximity is just about making things look nice rather than reducing cognitive load.

LIKELY FOLLOW-UPS: How do you handle nested Auto Layout frames where parent and child spacing variables might conflict? When would you use a grid flow versus vertical or horizontal for proximity grouping? How do you sync Figma spacing variables with CSS or Tailwind tokens in production? What happens to proximity when a design reflows for mobile breakpoints? How do you document spacing rationale for consumers of the design system?

ONE CONCRETE EXAMPLE: A card component contains a thumbnail, title, metadata row, and action button. The title and metadata are closely related, so they sit in a vertical Auto Layout frame with an 8 px gap variable. That frame and the thumbnail share a 16 px gap in the parent horizontal frame. The action button sits in its own vertical frame with 24 px padding from the card edges. All values are bound to spacing variables. If the title wraps to two lines, Auto Layout preserves the 8 px gap and 16 px parent gap automatically, maintaining the proximity contract without breaking the layout. Changing the base token updates every card instance in the library.