How would you structure grids, spacing tokens, and components in Figma?

WHAT THIS TESTS: The interviewer wants to know if you understand how to scale design systems beyond a single team. They care about governance models, token abstraction, and component APIs that prevent fragmentation without becoming a bottleneck. Specifically, they are looking for experience with multi-team workflows where designers need freedom to experiment but engineers need stable contracts.

A GOOD ANSWER COVERS: First, token strategy: define a base unit like 8px and create semantic tiers such as space-xs through space-3xl rather than raw numbers, so values can be themed per platform without breaking layouts. Second, grid architecture: provide a finite set of responsive grid variants tied to breakpoints, not an infinite custom grid, so teams pick from 12-column desktop, 8-column tablet, or 4-column mobile templates. Third, component structure: use slot-based components in Figma with strict auto-layout constraints where spacing is baked into the container and content is swappable via instance swaps or nested components. Fourth, governance: publish a library with clear override permissions, allowing color and content changes but locking padding, gap, and margin at the system level. Fifth, flexibility mechanisms: offer local components for one-off experiments that must pass a review to graduate into the core library.

COMMON WRONG ANSWERS: A rigid single-grid system that ignores responsive behavior or platform differences. Hardcoding every spacing value so teams detach components constantly. Allowing full override freedom which leads to drift across product areas. Proposing purely manual spacing without tokens, which breaks developer handoff and theming. Suggesting every team maintains their own library with no shared core, which defeats the purpose of consistency.

LIKELY FOLLOW-UPS: How do you handle a team that needs a 16-column grid for data-heavy dashboards? What is your migration plan when spacing tokens need to change globally? How do you prevent designers from detaching components to tweak padding? How do you align Figma spacing with code when platforms use different layout engines? What happens when a product team needs a component variant that does not exist yet?

ONE CONCRETE EXAMPLE: Imagine a large e-commerce company with web, iOS, and Android teams. You publish a core Figma library containing a base-8 spacing token set and three responsive grid wrappers. The card component uses auto-layout with 16px internal padding and 24px gap between media and text, both locked. Designers can swap the media slot between image, video, or icon components, and they can change text content freely. If the mobile team needs tighter 12px padding, they do not override the instance; instead they request a compact card variant that the system team reviews and publishes. This keeps analytics, search, and checkout cards consistent while letting each squad ship faster.