Figma Color Tokens to CSS Variables: The Implementation Walkthrough

You Have a Figma File with Color Variables. Now What?

Your designer handed you a Figma file. The colors are there — in the Variables panel, properly named, probably using some kind of convention. Your job is to get those values into your codebase as CSS custom properties and, if you're using Tailwind, into your theme config.

This walkthrough covers the full path: finding the variables in Figma, exporting them as JSON, transforming that JSON into a :root {} block, and wiring it into Tailwind v4 (and v3).

Step 1: Find Your Color Variables in Figma

Open the file. In the left panel, look for the Variables icon (grid icon, second from left in the top toolbar). Click it to open the Variables panel.

Figma organizes variables into Collections. Color variables will typically be in a collection named something like Colors, Tokens, or Design Tokens. Each variable has:

• A name (e.g., color/dominant, dominant, or blue-500)
• A value (hex, RGBA, or a reference to another variable)
• An optional description

The naming convention matters downstream. Variables named color/dominant produce CSS custom properties named --color-dominant. Variables named blue-500 produce --blue-500. Semantic names like dominant, secondary, and accent survive the handoff with their intent intact. Shade names like blue-500 lose their role in translation.

If you're starting fresh without a Figma file, generate your 60-30-10 palette at sixtythirtyten.co — you get the CSS variables and Tailwind config already written, with semantic naming built in.

Step 2: Export the Variables as JSON

Figma doesn't have a built-in JSON export for variables, but two reliable options exist:

Option A: Figma Plugin (Variable Export)

Install the "Export/Import Variables" plugin (Figma Community). Select your Variables collection → Run plugin → Export as JSON. The output looks like this:

{
  "color/dominant": {
    "$type": "color",
    "$value": "#f8fafc",
    "$description": "60% — Main backgrounds and page surfaces"
  },
  "color/secondary": {
    "$type": "color",
    "$value": "#1e293b",
    "$description": "30% — Navigation, sidebars, card frames"
  },
  "color/accent": {
    "$type": "color",
    "$value": "#3b82f6",
    "$description": "10% — CTAs, active states, focus indicators"
  }
}

Option B: Figma MCP Server

If you're using Cursor, Claude Code, or another MCP-capable editor, Figma's MCP Server (generally available since 2025) exposes design file data directly to your AI coding assistant. Instead of manually exporting, the assistant can read variables from the live Figma file during development and generate the corresponding CSS.

The MCP route eliminates the JSON export step entirely — the AI queries Figma directly and outputs the :root {} block. Worth the setup time if you're doing this repeatedly.

Step 3: JSON → CSS Custom Properties

Given the token JSON above, the transformation to CSS is direct. Each key becomes a custom property name (with / replaced by -), and each $value becomes the CSS value.

:root {
  --color-dominant: #f8fafc;
  --color-secondary: #1e293b;
  --color-accent: #3b82f6;
}

You can write this transform as a Node.js script if you're doing this regularly:

// tokens-to-css.js
const tokens = require('./tokens.json');

const lines = Object.entries(tokens).map(([key, token]) => {
  const propName = '--' + key.replace(/\//g, '-').replace(/\s+/g, '-');
  return `  ${propName}: ${token.$value};`;
});

console.log(':root {\n' + lines.join('\n') + '\n}');

Run it: node tokens-to-css.js >> src/globals.css

This drops the :root {} block into your stylesheet. Any component referencing var(--color-dominant) will pick it up immediately.

Step 4: JSON → Tailwind v4 @theme Block

Tailwind v4 uses a CSS-native @theme block instead of a JavaScript config file. The same token values map directly:

@import "tailwindcss";

@theme {
  --color-dominant: #f8fafc;
  --color-secondary: #1e293b;
  --color-accent: #3b82f6;
}

Once defined in @theme, Tailwind generates utility classes automatically: bg-dominant, text-secondary, border-accent, and every other color utility. No JavaScript config needed.

<div class="bg-dominant">
  <nav class="bg-secondary">
    <button class="bg-accent text-white">Create project</button>
  </nav>
</div>

For Tailwind v3 Projects

If you're on Tailwind v3, the tokens go into tailwind.config.ts:

import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      colors: {
        dominant: "#f8fafc",
        secondary: "#1e293b",
        accent: "#3b82f6",
      },
    },
  },
};

export default config;

Same utility class names result: bg-dominant, text-secondary, bg-accent.

Figma MCP Server as an Alternative Workflow

The manual export-and-transform pipeline above works reliably. But if you're working in a Figma-connected development environment, the MCP Server changes the workflow:

1. Connect your editor's AI assistant to the Figma MCP Server
2. Point it at the design file
3. Ask it to generate the CSS variables or Tailwind config from the variables collection

The assistant reads the current variable values from Figma directly — no JSON export, no transform script. Particularly useful when token values change frequently: instead of re-exporting and re-running a transform, you re-run the AI query.

One Import Point, One Change

The value of running your token values through CSS custom properties (or the Tailwind @theme block) is that you have a single source of truth. Change --color-accent from blue to green and every button, badge, and active state updates simultaneously — no grep-and-replace across components.

For the 60-30-10 semantic naming approach (where the variable names encode role, not shade), see the walkthrough on setting up 60-30-10 semantic tokens for the design-to-code handoff. That page covers the naming convention specifically — why dominant outperforms blue-500 when the AI exports your layout to code.

For dark mode — once your CSS variables are wired up, adding dark mode is a single @media block. See 60-30-10 Dark Mode Color Palette: CSS Variables and prefers-color-scheme.

For scaling beyond 3 variables into a full token architecture (primitives → semantic → component), see SaaS App Color Token System.

If you're referencing the 60-30-10 rule itself, the full developer guide is at The 60-30-10 Rule: A Developer's Guide to UI Color Balance.

No Figma file yet? Generate your 60-30-10 palette first, then import the values to Figma as variables. The generator gives you the hex values and the CSS variables block — copy them in.

Generate your palette at sixtythirtyten.co →