Figma variables power modern design token systems with multi-mode support and REST API access. Master variable collections, modes, token aliasing, Token Studio integration, and the W3C Design Tokens format for bridging design and code.
0 / 5 completed
1 / 5
A designer creates a Figma variable of type COLOR in a local collection. What distinguishes Figma variables from Figma styles?
Figma variables support modes (e.g., Light/Dark, Compact/Regular) — the same variable can have different resolved values per mode. They also support semantic aliasing (a variable referencing another variable). Figma styles, by contrast, define a single value (or set of properties) without multi-mode support, making variables far more powerful for design token systems.
2 / 5
A design system uses Figma variable modes with collections named Theme and Brand. What do modes enable?
Modes in a Figma variable collection allow a single variable to hold different values depending on context. For example, a surface/background variable might be #FFFFFF in Light mode and #1A1A1A in Dark mode. Frames can be set to a specific mode, and Figma resolves all variables within that frame to their mode-specific values.
3 / 5
A developer uses the Figma REST API endpoint GET /v1/files/:file_key/variables/local. What does this endpoint return?
The /variables/local REST API endpoint returns the full variable definition for a file: all collections, their modes, all variables with their resolved values per mode, and variable types (COLOR, FLOAT, STRING, BOOLEAN). This is the primary endpoint for extracting design tokens programmatically from Figma.
4 / 5
A team uses Token Studio (formerly Figma Tokens) with Figma variables. What problem does Token Studio solve?
Token Studio bridges the gap between Figma's native variable system and external design token workflows. It can export Figma variables to W3C Design Tokens format or Style Dictionary-compatible JSON, sync token files to GitHub/GitLab, and import external token files back into Figma — enabling a single source of truth for tokens across design and code.
5 / 5
The W3C Design Tokens Community Group format uses $type and $value fields. A token has "$type": "color", "$value": "{color.brand.primary}". What does the curly-brace syntax indicate?
In the W3C Design Tokens format, curly-brace syntax ({path.to.token}) denotes a token alias — the token's value is resolved by looking up another token at the specified path. This enables semantic token layers (e.g., color.surface.primary → color.brand.blue.500 → #1A73E8), keeping relationships explicit and maintainable.