Export & code

Your tokens don’t have to live in Figma. Export them from the web app in the format your codebase actually uses — no plugin required — or let your build and AI tools pull the latest tokens as code.

Export from the web

On a project’s Master tab, open the ⋯ menu next to Collections in the left sidebar and choose Export. It opens a dialog with:

Scope — the current collection, or the whole project.
Format — one of six (below).
Resolve references to values — turn aliases like {Primitive/blue/500} into their final value. Platform code formats always resolve; the checkbox is on and locked for them.

The Export dialog with the format dropdown open, showing DTCG, JSON, CSV, CSS, SwiftUI and Jetpack Compose

Format	Output
DTCG (`.tokens.json`)	W3C Design Tokens Community Group format
JSON	Raw variables, one entry per token
CSV	A spreadsheet — one row per variable, one column per mode
CSS	Custom properties — default mode in `:root`, other modes in `[data-theme="…"]`
SwiftUI	One type per collection, one static instance per mode
Jetpack Compose	Kotlin — a class per collection, one value per mode

Platform code, ready to paste

Pick CSS, SwiftUI, or Jetpack Compose and you get code you can drop straight into your app. The conversion runs on the server and is deterministic — the same tokens always produce the same bytes, so it diffs cleanly and caches well. A collection with light and dark modes comes out like this:

/* CSS custom properties */
:root {
  --colors-button-background: #18181b;
  --colors-radius-md: 8px;
}
[data-theme="dark"] {
  --colors-button-background: #fafafa;
}

// SwiftUI — one instance per mode
struct ColorsTokens {
  let buttonBackground: Color
  let radiusMd: CGFloat
  static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
  static let dark  = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}

// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark  = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)

References are always resolved to final values; if one can’t be resolved it’s left as a comment, never a made-up value.

Import tokens back in

The same ⋯ menu next to Collections has Import. Drop a JSON or DTCG file and you get a preview — collection, variable and mode counts, plus any warnings — before anything is created. Confirm, and it lands as a new collection (colors are parsed leniently: 3- or 6-digit hex, rgb(), hsl() all work). The change is recorded in history as an import.

Pull over API & MCP

For CI pipelines and AI coding tools, don’t export by hand — pull. The same platform formats are available over the REST API with ?format=css|swift|compose, and the @variablejar/mcp server exposes a get_tokens tool so agents in your IDE fetch the latest tokens as code. One project API token works for both.