Export Tokens to Figma

BaseFrame turns your token sets into native Figma Variables — colors, sizes, type, and the references between them. The fastest way to get them in is the BaseFrame Sync plugin and a single download.

Two ways to export

On a token set's Download tab you'll find two options that both produce a Figma-ready file:

• —BaseFrame Sync — downloads a package built for the BaseFrame Sync plugin. This is the recommended path and the one this guide follows.
• —Design Tokens (DTCG) — a single standard tokens.json file. Use this for Tokens Studio, Style Dictionary, or any other tool that reads the open design-token format.

What's in the package

The BaseFrame Sync package includes your token set — and if you've linked a reference set, it's bundled in too. Each set is kept as its own file so that, once imported, each one becomes its own Figma collection. The references between them are preserved, so they reconnect automatically on the Figma side.

If your set has no linked reference set, the package simply contains that one set.

Step 1 — Download the package

Open your token set in BaseFrame, go to the Download tab, and click Download Package under BaseFrame Sync. You'll get a single file containing everything the plugin needs.

Step 2 — Install BaseFrame Sync

In Figma, open the plugins panel and search for BaseFrame Sync, or install it from the Figma Community. Open it inside your file — no extra account needed beyond your Figma login.

Step 3 — Import

In the plugin, drop in the package you downloaded. BaseFrame Sync reads it and creates your variables:

• —One collection per set — your set, plus any linked reference set, each as its own collection.
• —References become live variable links — a token that points at another set is wired to that set's collection, so changing the source value updates everything that depends on it.

Open the Local Variables panel and you'll see your collections ready to use.

These are real Figma Variables — not styles — so they work with Figma's built-in binding on fills, strokes, and text. Anything bound to a variable updates the moment its value changes.

Step 4 — Re-sync after changes

When you update your tokens in BaseFrame, download a fresh package and import it again. Existing variables are updated in place, so your component bindings stay intact.

Compatible with other tools

Because BaseFrame also exports the open W3C DTCG format, you're never locked in. The Design Tokens (DTCG) download works with Tokens Studio for Figma, Style Dictionary, the VS Code Tokens extension, and any other tool that supports the standard. BaseFrame Sync is purpose-built for BaseFrame and needs no setup, but the open format means your tokens travel wherever you do.