Figma variables Into CSS custom properties, and back

• Node.js 18 or later. The script has no dependencies.
• For Figma’s export: a file with variables, open in Figma’s editor.

• For the REST API: an Enterprise plan, a full seat, and a personal access token with the file_variables:read scope.

1. 01

   Export the modes

   In Figma’s variables panel, right-click a collection and choose Export modes, or right-click one mode and choose Export mode. Save the files in one folder.

2. 02

   Get the script

   Download figma-to-css.mjs into the same folder. It is one file, with its rules written at the top.

   Download the script

3. 03

   Turn them into CSS

   List the files of the default mode first. Put --mode and a name before each other mode’s files; they go under [data-theme] with that name. Figma’s export keeps no unit, so list the groups whose numbers are pixels after --px.

   Terminal

   node figma-to-css.mjs Primitives.Value.tokens.json Theme.Light.tokens.json \
     --mode dark Theme.Dark.tokens.json --px space,radius,font-size,breakpoint --out tokens.css

   You should see: a :root block and a [data-theme="dark"] block, each variable named after its Figma name: color/primary is --color-primary.

1. 01

   Read the variables

   Ask Figma for the file’s local variables with your token, and save the answer. The file key is the part of the file’s address after /design/.

   Terminal

   curl "https://api.figma.com/v1/files/$FILE_KEY/variables/local" \
     -H "X-Figma-Token: $FIGMA_TOKEN" \
     -o variables.json

2. 02

   Turn them into CSS

   Give the script the saved answer on its own. Each collection’s default mode goes in :root; its other modes go under [data-theme], named after the mode.

   Terminal

   node figma-to-css.mjs variables.json --out tokens.css

   tokens.css, the dark mode’s first lines

   /* Theme · Dark */
   [data-theme="dark"] {
     --color-canvas: var(--color-neutral-1000);
     --color-surface: var(--color-neutral-950);
     --color-surface-raised: var(--color-neutral-900);
     --color-text: var(--color-neutral-0);
     --color-text-muted: var(--color-neutral-300);
     --color-border: var(--color-neutral-500);
     /* … */
   }

   You should see: blocks like this one, every variable of the collection again in each mode, so components follow a nested theme.

node figma-to-css.mjs variables.example.json --out tokens.css

# macOS and Linux
diff tokens.css tokens.expected.css

# Windows, in Command Prompt or PowerShell
fc.exe tokens.css tokens.expected.css

To try it in Figma: in a new file, create a variable collection named exactly Primitives and drag Primitives.Value.tokens.json into it. Create one named Theme and drag in both theme files, which become its Light and Dark modes. Export both collections with Export modes, and run the command under “From Figma’s export” on the files Figma writes.

• Names. A variable’s Web code syntax when it has one; otherwise its name, groups joined by hyphens, in lower case. Color/Brand 500 becomes --color-brand-500. Two variables that would share a name stop the script with both names.

• Colors become hex, with an alpha pair below full opacity. A color with its own opacity becomes color-mix().

• Numbers get px when every scope they have is a size, radius, gap, stroke, effect, font size or paragraph setting, or, from Figma’s export, when their name is in a group listed after --px; otherwise they stay plain numbers. Figma holds numbers to about seven digits, so values are rounded to four decimals: 10.239999771118164 is 10.24.

• Aliases become var(), so a role still points at its primitive in the CSS.

The token studio writes a request for Figma’s POST endpoint that creates the same collections, with each variable’s CSS name set as its Web code syntax, so Figma’s Dev Mode shows the name your code uses.

Send the tokens to Figma

• Nothing here has been run against a real Figma file. The REST answer is modelled on Figma’s documentation and type-checked against its published types; the DTCG files follow the DTCG 2025.10 format.

• Figma’s import turns px dimensions into plain numbers, and its export writes them back without a unit, as a real file showed on 19 October 2026. The command puts px back on the groups named after --px; a group you add needs adding there too.

• Figma users report that its export leaves out variable descriptions and composite tokens such as typography and shadows.
• The script skips extended collections and DTCG composite tokens, and names each one in a warning.
• Booleans come out as the words true and false, which CSS properties cannot use directly; keep them for your own scripts.

• The script runs on your machine and sends nothing anywhere.
• Your Figma token is used only in the command you run yourself.

• Send tokens to Figma through the REST API
• Open the token studio
• The light-dark() recipe, with its fallback
• Dark mode and adaptive color, explained

Other integrations

• Browser extensionCheck and fix contrast on the page in front of you.
• VS CodeUnderline low contrast in your stylesheets and fix it in place.
• REST APIConvert colors and check pairs from a server or a script.
• Design tokensExport one token system to Tailwind, CSS or Figma.
• Contrast embedPut a contrast checker on your own page.
• Tailwind themeStart a Tailwind v4 project with accessible components.
• React tokensTheme a React app from the token export.
• Contrast in CICheck your color pairs on every pull request.