How would you extract Figma Variables via REST API for Style Dictionary?
Tests Figma Variables to Style Dictionary architecture. Outline: paginate REST endpoint, map modes/aliases to W3C draft JSON, then run Style Dictionary in CI from tokens folder. Red flag: raw API payloads without type normalization or alias resolution.
WHAT THIS TESTS: This question tests whether you can architect a real world design ops pipeline, not just call an API. The interviewer wants to see that you understand Figma's data model for variables, the impedance mismatch between Figma's REST representation and Style Dictionary's expected W3C draft JSON, and how to automate this in CI without breaking the design system contract.
A GOOD ANSWER COVERS: A strong answer walks through four layers in order. First, API access and extraction. You need an Enterprise Figma org to read variables via the REST API, and you must handle pagination because large token sets span many collections and modes. You authenticate with a token, target the specific file, and fetch both the variable definitions and their mode values. Second, transformation and normalization. Figma returns flat IDs with references; you must resolve aliases, convert numeric values with units, and map color objects to hex or rgba strings. The output must land in a tokens directory as JSON that adheres to the draft W3C Design Tokens spec so Style Dictionary can consume it. Third, build integration. You trigger Style Dictionary in CI, for example through a GitHub Actions workflow, so that every merged token update regenerates platform specific outputs like CSS or Swift. Fourth, governance and reversibility. Mention that editor seats are needed for write back workflows, and that bidirectional sync requires conflict resolution so designers and developers do not overwrite each other blindly.
COMMON WRONG ANSWERS: The biggest red flag is suggesting you dump the raw REST response directly into Style Dictionary without transformation. Another weak pattern is ignoring modes entirely and exporting only the default mode, which loses theme context. Candidates also stumble by proposing manual exports or webhooks where polling or file based triggers are more appropriate, or by forgetting that Figma variable types do not map one to one to Style Dictionary categories without a lookup table.
LIKELY FOLLOW-UPS: Expect the interviewer to ask how you would handle a variable rename without breaking consumer references, how to support multiple brands or themes through mode switching in Style Dictionary, or how you would rate limit and retry against the Figma API during a large sync. They may also probe how you would validate the JSON schema before it reaches Style Dictionary, perhaps using the types defined in src/token_types.ts from the reference implementation.
ONE CONCRETE EXAMPLE: Imagine a color primitive collection in Figma with two modes, light and dark. Your GitHub Actions workflow runs nightly, calls the Variables REST API for the file, and transforms each mode into a nested tokens JSON structure under tokens/colors.json. Aliases like primary-500 are resolved to hex values, and the mode keys map to Style Dictionary file prefixes. The build step then generates variables.css for each mode. If a designer updates a value in Figma, the next run captures it automatically. If a developer edits tokens in code, a separate workflow with an editor seat can push the change back to the Figma file, enabling bidirectional sync.
Read the original → github.com
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.