Figma
Import Syntara tokens as Figma variables: Brand, Scheme and Density collections.
The Figma library uses the same tokens as the code. pnpm tokens writes them as Figma variables for every tenant, and the component properties in Figma use the prop names from each component’s meta.json.
Export the variables
pnpm tokensThis writes one file per collection mode to packages/tokens/dist/<tenant>/figma/, e.g. Brand.Vela.tokens.json and Semantic.Dark.tokens.json. Import them with a variables-import plugin that reads DTCG JSON.
Collections
Brand × scheme × density is twelve combinations. One collection with twelve modes would exceed common plan limits and hide how the system is built, so modes are split across collections (ADR-010):
| Collection | Modes | Holds |
|---|---|---|
| Brand | One per tenant | The 12-step ramps, plus each tenant’s resolved roles for light and dark — the contrast solver’s per-brand picks. |
| Semantic | Light, Dark | Every colour role, as an alias into Brand. Identical for every tenant — import it once. pnpm tokens fails if the tenants’ files ever differ. |
| Density | Comfortable, Compact | Control height, paddings, row height, card inset, gaps. |
| Shape | One per tenant | Radius for buttons, fields, containers and badges. |
| Type | One per tenant | Font families, sizes and weights. |
Switching a frame’s Brand mode re-skins it, because Semantic only ever points at Brand. With the five current tenants, Brand, Shape and Type need five modes. Figma’s Professional plan allows up to 10 modes per collection and Organization up to 20, so this layout needs Professional or higher.
On the Starter plan
Figma’s free Starter plan allows one mode per collection, so the layout above can’t be imported there. Pick Starter (1 mode) under Figma plan on the Themes export tab, or use packages/tokens/dist/<tenant>/figma-starter/. Every collection then has a single mode, Value, and each brand × scheme is its own collection:
| Collection | Holds |
|---|---|
| Vela · Light, Vela · Dark | Every colour role as a hex value, plus that scheme’s 12-step ramps under ramp/. |
| Vela · Size | Radius, font families, sizes and weights, and the brand’s default density. |
| Vela · Size comfortable | The other density only (named after whichever one isn’t the default). |
Import only what you need. Colours are plain hex values, not aliases, because an alias into another collection only switches with that collection’s modes. Variable names are the same in every brand’s collections, so you switch brands or schemes by swapping the library or collection, not the mode.
Two file formats
Most variable-import plugins still read the older DTCG draft — colours as hex strings, dimensions as plain numbers — so the Figma files use it. The canonical export, dist/<tenant>/<tenant>.tokens.json, follows DTCG 2025.10 exactly. Both come from the same engine, and neither is edited by hand.
Components
Figma component properties use the same names and values as the React props — variant, size, tone, isDisabled — and each component’s description is the one-line description from its meta.json. A generated Figma ↔ code parity table is planned.