Figma Variables
Not reachable in the current build
The Variables panel — collection picker, mode configuration, per-mode token-set assignment — exists in the codebase but is not mounted in the plugin UI. Its tab was replaced by the Inspect tab, and there is currently no way to open it.
This page documents the intended behaviour so you know what to expect when it ships, and so you can plan around its absence today. Do not build a workflow on it yet.
Intended direction: tokens → variables
The integration is one-way. It writes DAES tokens into Figma Variables. It does not read existing variables and turn them into tokens — the only way in is JSON import.
Intended behaviour
- Pick an existing variable collection, or create one with named modes.
- Assign a token set to each mode —
mode/light→ Light,mode/dark→ Dark. - Generate. Each token in an assigned set becomes a variable in that mode, with the set prefix stripped from the name.
If no collection is chosen, one named Design Tokens is created.
Type mapping
This is the narrow part. Figma variables have four types; DTCG has sixteen.
| Token type | Figma variable | Notes |
|---|---|---|
color | COLOR | Parsed only from a #RRGGBB string. A DTCG colour object yields no value |
dimension | FLOAT | Parsed only from a "16px" / "1.5rem" string. rem × 16 |
number | FLOAT | Direct |
| everything else | — | Passed through and rejected by Figma; logged, not applied |
The mapping expects legacy string values
Both the colour and dimension converters read strings, but DAES stores DTCG objects. So even once the panel is reachable, a colour token created in the current plugin would not produce a variable value until the converter is updated to read the object form.
Composite types — typography, shadow, border, transition — have no Figma variable equivalent at all and never will under the current variable system.
What to do instead today
| Goal | Approach |
|---|---|
| Get values onto layers | Apply tokens directly. Bindings plus Sync to selection cover the update loop |
| Switch brands or modes in Figma | Use DAES themes, not variable modes |
| Get values to developers | Export DTCG JSON, or sync a repository |
Tokens vs variables, honestly
| Figma Variables | DAES tokens | |
|---|---|---|
| Types | Color, Float, String, Boolean | 16 DTCG types |
| Composite values | No | Yes |
| Mode switching | Native, on the canvas | Via themes, applied through the plugin |
| Prototyping and component logic | Native | Not available |
| Export without a paid plan | No | Yes |
They solve overlapping but different problems. Variables are better at live canvas switching; tokens are better at completeness and portability.