Figma to CSS color handoff without the mess

1. The naming mismatch problem

The most common handoff failure: the designer calls it 'Primary Blue' in Figma and the developer calls it 'brand-500' in CSS. Two names for the same color means two sources of truth.

• Agree on token names before the project starts — not during handoff.
• Use role-based names: --color-accent, --color-surface, --color-text-muted.
• The Figma variable name and the CSS custom property name should be identical.

2. CSS custom properties as the source of truth

Once you have agreed-upon names, CSS custom properties become the single source of truth that both design and engineering reference.

• Define all palette colors as CSS custom properties in a :root block.
• Use the Export Code feature to generate this block directly from any palette.
• Commit this file to the repo and treat it as the canonical color reference.

3. The component usage guide

Token names alone aren't enough. Developers need to know which token to use for which component.

• Write a one-page guide: 'Use --color-accent for primary buttons and active nav states.'
• Include examples of what NOT to use each token for.
• Update this guide whenever a new component type is added.

Common mistakes

• Using different names for the same color in Figma and CSS.
• Handing off a Figma file without any token documentation.
• Letting developers pick colors by eyedropping from screenshots.

Before you ship

• Agree on token names before design starts.
• Export CSS custom properties before handoff.
• Write a component usage guide for the token system.
• Review the implementation against the token spec before launch.