Explain an 8-point grid and Figma spacing tokens setup

WHAT THIS TESTS: This question tests whether you can translate a design-system principle into a working Figma infrastructure. Interviewers want to see that you understand the 8-point grid as a resolution-agnostic scaling strategy, not just a trendy rule. They also want evidence that you know how to build reusable tokens that survive team growth and handoff to engineering.

A GOOD ANSWER COVERS: First, explain the why. An 8-point grid aligns to the densest common screen resolutions and ensures that every spacing value divides evenly, eliminating half-pixel rendering blur. It creates a predictable visual rhythm that lets users scan hierarchy without friction. Second, describe the scale. Start with a base unit of 8, then build a stepped set: 4 for tight micro-spacing, 8 for default, 16 for sections, 24 and 32 for group separation, 48 and 64 for major layout breaks. Some teams include 96 or 128 for hero sections. Third, map this into Figma variables. Create number variables named space-4, space-8, space-16, and so on. Organize them under a primitive collection so they are globally available. Fourth, apply the tokens practically. Bind them to auto-layout gap values, frame padding, and component internal spacing. If your team uses semantic naming, alias primitives to tokens like space-button-padding or space-section-gap so that theme changes do not break component logic. Fifth, mention governance. Publish the variable library, document the scale in a readme frame, and lock non-token values so designers cannot manually override with arbitrary numbers.

COMMON WRONG ANSWERS: A weak answer treats the 8-point grid as an arbitrary aesthetic preference without explaining the resolution math. Another red flag is listing values like 12, 20, or 28 as standard tokens because they break the divisible rhythm and force engineers to write custom CSS exceptions. Saying you would use styles instead of variables is also outdated for spacing in modern Figma. Finally, admitting that designers on your team still manually nudge elements by 1 or 2 pixels signals a lack of system discipline.

LIKELY FOLLOW-UPS: The interviewer may ask how you handle breakpoints or density modes, such as compact versus comfortable spacing. They might also probe how you sync Figma variables with code, perhaps through a JSON export or a design-token pipeline like Style Dictionary. Another common pivot is asking how you enforce the grid when legacy screens contain odd values.

ONE CONCRETE EXAMPLE: At a previous company, I inherited a file where padding ranged from 7px to 31px across 40 components. I audited every frame, replaced the values with an 8-point variable set from 4 to 64, and rebuilt the components using auto-layout with bound variables. Within two sprints, design-dev handoff tickets dropped by roughly half because engineers no longer had to guess whether 17px was intentional or a mistake.