How to Export Figma Variables to JSON (and CSS, Tailwind or CSV)

Native variable export and import live in the Variables view. They produce one file per mode in standard DTCG JSON. That covers the most common request, getting a token file out of Figma, without installing anything.

Two other native routes are worth knowing. Dev Mode has a read-only variables table and a details panel that shows a variable's value, its alias chain and a code snippet. Developers can copy values from there, but it is a lookup tool, not a file export. The Figma REST API has Variables endpoints, but Figma's developer docs state you need a Full seat in an Enterprise org to use them. On Professional or Organization plans, the API is off the table for variables.

1. Open the file where the collection was created, usually your library file, rather than a file that only uses it.
2. Click Variables in the left navigation bar.
3. Right-click a collection and choose Export modes, or right-click a single mode and choose Export mode.
4. Save the files somewhere your developers can reach, ideally the same repo as the code that uses them.

Each file holds one mode. A collection with Light and Dark modes gives you two files with the same token names and different values. Group names from Figma (color/accent/light) become nested JSON groups, and cross-collection references are stored with Figma's alias data under $extensions.

Figma does not write CSS files. The usual path is a small build step: export the DTCG JSON, then run it through Style Dictionary, which reads the DTCG format and outputs CSS custom properties, SCSS, JavaScript, Swift or Android resources from one config. One file per mode maps neatly onto a :root block for Light and a [data-theme="dark"] block for Dark.

For Tailwind, generate CSS variables first and reference them in your theme. Tailwind v4 reads theme values from CSS through @theme, so a Style Dictionary CSS output can feed it directly. On older Tailwind versions, output a JavaScript object and import it into tailwind.config.js.

Not natively. If a PM or content team wants a spreadsheet, export the JSON and flatten it with a short script, or use one of the community plugins that write CSV directly. Keep in mind a CSV loses alias relationships, so treat it as a read-only snapshot and keep JSON as the source you import from.

Native import is the reverse of export. Drag one JSON file per mode into the Variables view to create a new collection, or right-click an existing mode and choose Import mode to update it. Only people with edit access can import. Figma is strict about what it accepts:

• Colors in sRGB or HSL, dimensions and numbers in px, font families as a single name, and durations in seconds.
• Booleans need Figma's com.figma.type extension, and strings are a Figma addition to the DTCG types.
• When you import several mode files at once, a token only becomes a variable if it exists in every file with the same $type.

Tokens that break these rules are skipped, so a JSON file written by hand or exported from another tool may import partially. Check the variable count after importing.

The native flow is file-per-mode and collection-by-collection. That gets tedious when you are moving a whole token set between Figma files, restoring a backup, or merging tokens into a collection that already has variables. Variable Master handles that Figma-to-Figma case:

• Export lets you pick all collections or specific ones and downloads a single JSON file with variable definitions, values and mode configuration.
• Import accepts pasted JSON or a file, validates the structure, then previews which variables will be created, updated or skipped. You choose to skip duplicates, overwrite or merge.
• Modes are matched by name, so a Light and Dark collection lands in the right modes of the destination.
• The Find tab lists unused variables, so you can clean up before exporting instead of shipping dead tokens.

Variable Master's JSON is built for moving variables between Figma files. It does not generate CSS or Tailwind, so keep the native DTCG export plus Style Dictionary for the code side. The plugin is free with no login. If you haven't added a plugin before, see how to install Figma plugins.

Its Swap tab also helps after an import: it repoints layers from one collection to another by name and type, including library collections, so you can move a file from local tokens onto the newly imported library. The Variable Master docs list every property it swaps.

Tokens Studio for Figma is the better fit when code or a Git repo is the source of truth. It stores tokens in its own JSON, syncs with providers like GitHub and GitLab, supports themes across many token sets, and can create Figma variables from them. It has a free tier and paid plans, and it takes more setup than a one-off export. Several smaller community plugins export variables straight to JSON or CSS too; they are fine for quick snapshots, but check that their output format matches what your build expects.