How would you establish design tokens in Figma and sync with production?

WHAT THIS TESTS: This question tests whether you can build a bidirectional design-to-code pipeline rather than a static handoff. Interviewers want to see that you understand token taxonomy, Figma tooling, git-based versioning, and automated transformation into platform-specific code. Senior candidates are expected to discuss governance, branching strategy, and how to prevent drift between design and production.

A GOOD ANSWER COVERS: First, establish a three-tier taxonomy: primitive tokens for raw values like base colors and spacing units, semantic tokens for context such as action-primary-background or text-error, and component tokens for specific UI elements. Second, implement these in Tokens Studio for Figma using the W3C DTCG JSON format to ensure future interoperability. Third, configure remote token storage by syncing to a Git provider like GitHub or GitLab so the JSON file lives in the same repository as the codebase, making it the single source of truth. Fourth, set up a transformation pipeline using Style Dictionary or SD Transforms in CI/CD to compile tokens into CSS custom properties, JavaScript objects, or mobile asset catalogs on every pull request. Fifth, export tokens back into Figma as Variables or Styles so designers consume the same values engineers use, and use branch switching in Tokens Studio to experiment without breaking production.

COMMON WRONG ANSWERS: Proposing that designers manually copy hex codes or spacing values into a shared spreadsheet that developers later transcribe. Treating Figma Styles as tokens without an underlying JSON schema or version control. Suggesting a one-way export from Figma to code with no automated sync, which guarantees drift within weeks. Ignoring the distinction between primitive and semantic tokens, which leads to brittle systems where a brand color change requires hundreds of manual updates.

LIKELY FOLLOW-UPS: How would you handle theming for dark mode or multi-brand white-labeling? What is your rollback strategy if a token change breaks the UI in production? How do you manage token ownership between designers and engineers? What do you do when a platform like iOS needs a different naming convention than web?

ONE CONCRETE EXAMPLE: At a previous company, we stored tokens in a GitHub repository connected to Tokens Studio. Designers edited tokens in Figma and pushed to a feature branch. A GitHub Action ran Style Dictionary to generate CSS and Swift files, then opened a pull request for engineering review. When the PR merged, the tokens were versioned and released through npm. This reduced design-to-code handoff from three days to under an hour and eliminated color drift between Figma mocks and the live application.

Source: Tokens Studio Plugin for Figma docs (docs.tokens.studio)