Export Tokens to Figma

BaseFrame exports a W3C DTCG-compliant token file that maps your entire token set — primitives, semantic light, semantic dark — directly into Figma as native variables. The fastest way to get them in is with the BaseFrame Sync plugin.

What you're importing

The token export from BaseFrame contains seven token sets:

• —primitive/color — the full brand, secondary, neutral, and utility color scales
• —primitive/typography — font family, size, weight, and line height scales
• —primitive/spacing — spacing steps
• —primitive/borderRadius — radius steps
• —primitive/borderWidth — border width values
• —semantic/light — aliases for the light theme
• —semantic/dark — aliases for the dark theme

Every semantic token is an alias — it references a primitive by path rather than storing a raw value. Figma resolves these as variable bindings, so editing a primitive propagates to every semantic token that references it.

Step 1 — Download the file

Open your token set in BaseFrame and go to the Download tab. Click Design Tokens (DTCG) to download your tokens.json file. This file is built on demand from your current token state and follows the W3C DTCG format exactly.

Step 2 — Install BaseFrame Sync

In Figma, open the plugin panel and search for BaseFrame Sync, or install it directly from the Figma Community. Open it inside your Figma file — no account required beyond your existing Figma login.

Step 3 — Import the file

In the BaseFrame Sync plugin, click Import and select the tokens.json file you downloaded. The plugin will parse all seven sets and create Figma Variables for each token — primitives as raw values, semantic tokens as variable aliases that bind back to their primitives.

Your Local Variables panel will contain:

• —A Color collection with your full primitive palette and semantic aliases
• —Separate modes for Light and Dark within the semantic collection

These are native Figma Variables — not styles — so they work with Figma's built-in variable binding on fills, strokes, and text. Any component that uses a variable updates automatically when you switch modes.

Step 4 — Sync after rebrand

When you change your brand colors in BaseFrame and regenerate, download a fresh tokens.json and re-import it with BaseFrame Sync. The plugin will update only what changed — your component bindings stay intact.

Compatible with other tools

Because BaseFrame exports the W3C DTCG format, your token file works with any tool that supports the standard — not just BaseFrame Sync. Tokens Studio for Figma is one such plugin: it can load the same tokens.json and apply it as a theme. Style Dictionary, the VS Code Tokens extension, and other DTCG-aware tooling will also consume the file without modification. BaseFrame Sync is purpose-built for BaseFrame's output and requires no extra configuration, but the open format means you're never locked in to a single workflow.