How to export Figma variables as DTCG JSON

Right-click a variable collection in Figma and choose Export modes. You get a JSON file. That is the whole built-in route, and it is enough for many files.

What it does not tell you is whether every detail survives: the help page's export section does not mention descriptions, scopes or aliases. This post covers the built-in export, what the import side accepts, and the three other ways to get variables out. Everything is checked against Figma's own pages as of October 31, 2026.

Can Figma export variables to JSON without a plugin?

Yes. Open the Variables panel, right-click a mode and choose Export mode, or right-click the collection and choose Export modes. Figma's help page says you can export variable modes to a JSON file (Figma Help: Modes for variables).

Figma said in its Schema 2025 recap, dated October 28, 2025, that variables import and export would be available in November. It also said Figma waited for the Design Tokens Community Group to finish its spec first (Figma blog: Schema 2025).

The export section of the help page does not say the file follows the DTCG format. The import section does. Open an exported file and read it before you wire it into a build.

How do I export a collection step by step?

Follow these steps.

1. Open the file that holds the variables and open the Variables panel.
2. Right-click the collection name and choose Export modes. Use Export mode on a single mode if you only want one.
3. Save the JSON file.
4. Open it in a text editor. Look for your variable descriptions and aliases before you trust it.
5. Run it through the tool that will read it. For Style Dictionary, that means a build. For Tokens Studio, an import.

If you also need the file to import back into another Figma file, read the next section first.

What does Figma's DTCG import accept?

It accepts a limited set of types. The help page lists them as follows, and I have put them in one table.

More rules from the same page:

• The files must be JSON in the DTCG format.
• Dropping files into a new collection makes each file a mode.
• Variables are only created for tokens that exist in every imported file, with a supported $type, and the same $type in each file.
• Aliases that cross collections use com.figma.aliasData.
• If two names are the same after normalizing, the first one wins and the rest are skipped.

The practical result: a file with oklch colors, rem dimensions or shadow tokens will not come in whole. Plan the file around this list. For what the format itself allows, see the DTCG spec at one year.

When do I need the REST API, the plugin API or Tokens Studio?

Use them when the built-in export drops something you need, or when you want the export on a schedule.

The REST API. GET /v1/files/:file_key/variables/local lists a file's local variables. Each one has a name, description, resolvedType, valuesByMode, scopes and codeSyntax (Figma REST API: variables). The endpoint needs the file_variables:read scope, and the docs say the variables endpoints are available to full members of Enterprise orgs (endpoints).

The plugin API. figma.variables.getLocalVariablesAsync() and figma.variables.getLocalVariableCollectionsAsync() return the same objects from inside a plugin. The docs page does not state a plan restriction (Plugin API: variables). You write and maintain the plugin yourself.

Tokens Studio. Its plugin has an Import Variables action under Styles & Variables. Each variable becomes a token, each collection becomes a folder of token sets, and each mode becomes a set. With a Pro license, it also creates a theme group for each collection and a theme for each mode (Import Variables from Figma). The same page warns that the plugin cannot always tell which of its 24 token types a variable should become, so some token types may need editing by hand.

Community plugins. Several plugins in the Figma Community export variables as JSON. I could not load their pages by script, so I will not name or rate any. Open each page, check the last update date and read what it says it exports.

What can get lost on the way out?

Anything the export format does not carry. Figma's help page is silent on descriptions, scopes and code syntax for the built-in export. The REST API object does carry all three.

Test it once. Create a variable with a description, a scope and a code syntax name, export the collection, then look for each one in the file. Five minutes of testing beats a surprise in production.

Where does UIX fit?

UIX Design System is not a tool for exporting variables you already have. It does the other direction: it builds a system from one brand color, as variables in your file, and exports W3C DTCG tokens from that system on the free plan (Code export). If your variables already exist and you only need JSON, use one of the routes above.

FAQ

Does Figma have a native export for variables?

Yes. Right-click a mode or a collection in the Variables panel and choose Export mode or Export modes. Figma's help page describes the output as a JSON file.

Does the Figma REST API for variables work on every plan?

The Figma docs say the variables endpoints are available to full members of Enterprise orgs. If you are on another plan, use the built-in export or a plugin.

Why did my DTCG file not import into Figma?

Check the types. Figma's help page lists what it accepts: sRGB or HSL colors, px dimensions, s durations and single-name font families. Tokens that are missing from some of the files, or that use a different $type in each file, are skipped.

Do exported Figma variables keep their descriptions?

Figma's help page does not say. Export a test variable with a description and look in the file. The REST API returns the description field.