Your Figma colors don't match your code

Open your Figma file. Find the primary button color. Now open your CSS. Find the primary button color there. Compare them.

They don't match. They never match.

Maybe it's close. Maybe it's #3B82F6 in Figma and #3B83F6 in code — one digit off. Maybe the designer updated the Figma library last month and forgot to tell engineering. Maybe the developer eyedropped the color from a screenshot instead of copying the hex value.

It doesn't matter how it happened. It always happens. And it will keep happening until you fix the system, not the symptoms.

Why it drifts

The root cause is simple: you have multiple sources of truth, and none of them are actually true.

The Figma library

A designer creates a color style in Figma. Names it "Primary/500." Uses it across 40 frames. Six months later, someone creates "Brand/Primary" because they didn't find the original. Now there are two primaries. Neither matches code.

The CSS file

A developer sets --color-primary: #3B82F6 in the globals file. Another developer hardcodes color: #3b82f6 inline somewhere because they're in a rush. A third developer uses Tailwind's blue-500 and assumes it's the same thing. It isn't.

The handoff gap

Design and engineering use different tools, different naming conventions, and different update processes. The designer changes a color in Figma. The developer doesn't know. The developer adjusts a shade in code. The designer doesn't know. Drift is inevitable because the workflow guarantees it.

The cost of color drift

It's not just visual inconsistency. Color drift breaks trust between design and engineering. The designer sees the production build and says "that's not the right blue." The developer says "I used exactly what you gave me." Both are right. Both are frustrated.

It also breaks accessibility. A contrast ratio that passes at #1E3A5F might fail at #2A4570. Nobody checks because nobody realizes the colors changed. You ship an inaccessible component and don't find out until an audit catches it.

And it compounds. Every new page, every new component, every new developer on the team introduces more variation. After a year, your "design system" is a collection of similar-but-not-identical colors with no clear authority.

The fix: one palette, exported everywhere

The solution is brutally simple. One source of truth. Export to every format. Change the source, re-export, done.

Not one source in Figma. Not one source in code. One source, period — upstream of both.

Design tokens as the contract

Design tokens are the industry's answer to this problem. A token is a named value — color.primary.500 = #3B82F6 — that gets translated into every format your tools need. Figma Variables, CSS custom properties, Tailwind config, SCSS variables. Same value, different syntax.

The token is the contract between design and engineering. When the designer says "primary," and the developer says "primary," they mean the exact same hex value because they're both pulling from the same definition. Read more about design tokens.

The export problem

Tokens are great in theory. In practice, most teams struggle with the tooling. You need something that takes your palette and outputs:

• CSS custom properties — --color-primary: #3B82F6;
• Tailwind v4 @theme — tokens inside your CSS, not a JS config file
• SCSS variables — for teams still on Sass
• Design tokens JSON — the W3C Design Tokens format for Figma and other tools
• Figma Variables — importable directly into Figma's variable system

Most teams cobble this together with custom scripts, Style Dictionary configs, and hope. It works until someone forgets to run the script.

How Paletter bridges the gap

Generate a palette — from an image, from scratch, from color theory. Validate it: contrast ratios, accessibility, role assignments. Then export to every format from the same screen.

One palette. One click per format. The CSS file and the Figma Variables file contain the exact same hex values because they came from the exact same source, two seconds apart.

When the palette changes, you regenerate the exports. Not some of them. All of them. The drift is zero because the process makes drift impossible.

This is what the Figma integration is built for. Not syncing after the fact. Generating from the same truth.

The workflow that actually works

• Step 1: Generate or extract your palette in Paletter
• Step 2: Validate — check contrast, run color blindness simulation, confirm roles
• Step 3: Export CSS variables, Tailwind tokens, design tokens JSON, and Figma Variables
• Step 4: Drop CSS/Tailwind exports into the codebase, import tokens into Figma
• Step 5: When the palette changes, regenerate exports and replace the files

No manual copying. No eyedropping. No "I think that's the right blue." The source is the source. Everything else is derived.