Figma Variables to Code: A Handoff Guide for AI Builders Using Dev Mode

Figma variables to code handoff is the bridge between design tokens your team agreed on in Figma and the CSS custom properties your AI coding agent actually uses — and in 2026, Dev Mode plus MCP plugins make that bridge walkable if you stop treating “export” as a single button. This guide is written for AI builders who implement in Cursor, v0, or Lovable and need variables, modes, and naming that survive the first refactor. Updated October 2026.

Designers finished the system. You opened Dev Mode. The agent hallucinated #3B82F6 instead of --color-primary. Sound familiar? Start with our Figma Dev Mode handoff checklist, then read this deeper variables-specific playbook. If you are new to the overall vibe workflow, the Vibe Coding Roadmap shows where design tokens sit relative to build and deploy.

Table of contents

1. Variables vs styles vs tokens — what AI needs
2. How to structure Figma variable collections
3. Dev Mode inspection workflow for AI builders
4. Naming conventions that survive codegen
5. Modes, themes, and dark/light in code
6. Prompt patterns for token-aware implementation
7. Validation checklist before merge
8. FAQ

Variables vs styles vs tokens — what AI needs

Figma Variables (2024+) replaced much of what teams hacked with styles and third-party token plugins. For dev mode variables export workflows, the distinction matters because AI agents parse text — not Figma’s internal graph.

• Variables — typed values (color, number, string, boolean) with aliases and modes. This is your token source.
• Styles — legacy paint/text styles. Still present in old files; migrate to variables when possible.
• Code tokens — CSS variables, Tailwind theme extensions, or JSON consumed at build time.

AI builders fail handoff when they screenshot frames instead of exporting variable definitions. A frame shows computed blue; variables show color/brand/primary aliasing to palette/blue/500. Agents that only see pixels recreate one-off classes — untraceable drift by week two.

What to export for AI consumption

Minimum viable handoff package:

1. Variable collection JSON or plugin export (Tokens Studio, Figma native export, or MCP snapshot)
2. Mode list (Light, Dark, High contrast if applicable)
3. Typography scale as number variables bound to text styles
4. Spacing scale as number variables — 4, 8, 12, not random padding on each frame
5. Component specs with variable bindings called out in Dev Mode inspect panel

Pair exports with written rules in your repo’s AGENTS.md or Cursor rules: “Never hardcode colors; use tokens from tokens.css.” See system prompt templates for coding agents for starter rule blocks.

How to structure Figma variable collections

Collections organize variables by purpose. Messy collections produce messy code — AI mirrors your chaos faithfully.

Alias chains should be shallow: semantic → primitive. Deep nesting confuses both humans and LLMs trying to grep for a hex value’s origin.

Primitives first, semantics second

When designers bind a button fill to color/action/primary instead of #2563EB, your AI implementer can map one token across fifty components. When every button uses a different hex “close enough” to brand blue, refactors become archaeology.

Dev Mode inspection workflow for AI builders

Dev Mode is not magic export — it is structured inspection. Treat it as the spec browser your agent reads through you (or through MCP).

Step-by-step Dev Mode pass

1. Open the library file, not just a marketing page duplicate.
2. Switch to Dev Mode; select a component with variable-bound fills.
3. Copy variable names from the inspect panel — not computed hex unless verifying alias resolution.
4. Document mode switch behavior: does surface/default flip between light and dark collections?
5. For spacing, read padding variables on auto-layout frames — AI often ignores gap vs padding distinction.
6. Export code connect mappings if your org uses Code Connect — bridges component names to repo paths.

Our Dev Mode handoff checklist covers frame-level details; variables add the requirement that every color in inspect panel shows a token name.

MCP and Figma in AI IDEs

Model Context Protocol lets Cursor and other agents pull structured Figma context instead of PNG dumps. Read what is MCP for AI coding before wiring Figma MCP — variable names flow cleaner when the agent queries node metadata directly.

Naming conventions that survive codegen

Design tokens AI builders can use share naming rules with engineering:

• Lowercase path segments: color/text/primary not Color/TextPrimary
• No version numbers in token names — use git for history
• Semantic names over literal: danger not red
• Match code transform: Figma color/text/primary → CSS --color-text-primary

Document the transform once in your repo README so every prompt inherits it. Inconsistent transforms produce duplicate tokens (--text-primary vs --color-text-primary) that AI merges incorrectly.

Tailwind v4 and @theme

Many vibe-coded stacks use Tailwind. Map semantic variables to @theme blocks:

@theme {
  --color-text-primary: var(--color-text-primary);
  --spacing-layout-gutter: 1.5rem;
}

Prompt explicitly: “Extend theme from tokens.css; do not add arbitrary values in JSX className strings unless spec shows an exception.”

Modes, themes, and dark/light in code

Figma variable modes (Light/Dark) must map to a single mechanism in code — usually data-theme, .dark class, or prefers-color-scheme. Pick one; AI will mix all three if you do not decide.

When implementing with Cursor, attach the exported mode table to your prompt: “Light and dark values for these twelve semantic tokens only.”

Prompt patterns for token-aware implementation

Bad prompt: “Build this dashboard from the Figma link.” Good prompt: “Implement using tokens listed below; match spacing variables; no hex literals.”

Copy-paste prompt skeleton

1. Paste token JSON or CSS block (max 80 lines — link to file for more)
2. Link Figma Dev Mode URL with node-id
3. State framework: Next.js + Tailwind + App Router
4. Forbidden: inline hex, new token names, px values not in scale
5. Required: responsive behavior from auto-layout min/max docs

For multi-screen builds, chain prompts per our multi-file refactor prompt chains — layout shell first, then components bound to tokens.

When AI ignores tokens

Run a grep pass for #[0-9A-Fa-f]{3,8} in generated components. Replace with token references using a focused prompt: “Replace all hex colors in components/ui with semantic tokens from tokens.css; show diff per file.” Review with how to review AI-generated code.

Validation checklist before merge

Before merging AI implementation of a Figma spec:

• Zero unauthorized hex in component files (grep audit)
• Dark mode toggles all semantic pairs — spot-check eight key screens
• Typography uses scale variables — no one-off text-[13px]
• Spacing on mobile matches Figma breakpoint frame, not desktop shrunk
• Focus states and disabled states use tokenized colors, not AI defaults
• Storybook or preview documents token usage for future prompts

Design-to-code breaks in production for reasons beyond tokens — read Figma Make to production (when published) for layout and interaction gaps variables alone cannot fix. For tool choice, compare best vibe coding tools 2026 for design-forward vs code-forward builders.

Spacing and typography variables in Dev Mode

Color variables get attention; spacing and typography cause most production drift. In Figma, bind padding, gap, and margin on auto-layout frames to number variables — space/4, space/8 — not raw pixels typed once and forgotten. Typography variables should drive font size, line height, and letter spacing on text styles so Dev Mode inspect shows token names when developers click nested text layers.

In code, map number variables to rem-based CSS for accessibility: --space-4: 0.25rem scales with user font settings better than fixed px from AI defaults. Prompt your agent: “Use spacing scale from tokens.css only; match Figma variable names in comments for traceability.”

When designers change the scale globally — tightening marketing density — you update primitives once and semantic aliases flow. Without variables, AI refactors fifty components with inconsistent padding: 14px guesses.

Component-level variable binding

Buttons, inputs, and cards should expose component variables: button/height/md, input/radius, card/padding. Dev Mode inspect on a component instance shows which variables apply — copy those names into implementation prompts instead of measuring pixels in screenshots.

CI and token drift prevention

Commit exported tokens to git. Add a CI step that fails PRs introducing unauthorized hex in components/ — simple grep or stylelint plugin. When Figma library updates, re-export tokens in the same PR as design changelog notes. AI agents then read stable files instead of stale pasted JSON from last sprint’s Slack message.

For teams using MCP, schedule weekly sync jobs that pull variable definitions from Figma library files into tokens/ — human review still required, but drift window shrinks from months to days.

Sample handoff doc for AI agents

One-page handoff doc pasted into every implementation prompt reduces token drift:

• Figma library URL with version pin
• Exported tokens file path in repo
• Framework and CSS approach (Tailwind @theme, CSS modules, etc.)
• Breakpoints: mobile 375, tablet 768, desktop 1280
• Forbidden patterns: inline hex, px outside scale, new token names
• Component mapping: Figma “Button/Primary” → code Button variant primary

Store as docs/design-handoff.md and reference in Cursor rules. When designers update variables, bump version line in doc — agents treat stale handoffs as bugs.

Cross-link implementation tutorials: how to vibe code a web app for app structure and Cursor vs Lovable when deciding where to implement after handoff.

FAQ

Can I export Figma variables directly to CSS?

Native Figma export options and plugins (Tokens Studio, Style Dictionary pipelines) generate CSS, JSON, and Tailwind configs. Pick one pipeline and commit output to your repo — do not re-export manually per sprint without CI.

Do AI tools read Figma variables automatically?

Only when connected via Dev Mode MCP, Code Connect, or pasted exports. Screenshot-based tools see pixels, not variable names — expect token drift unless you enforce rules.

Variables vs Figma Make — which for handoff?

Variables define the system; Make generates starting UI. Production handoff still requires token discipline and manual fixes. Variables-first workflows age better than Make-first without a token file.

How do I hand off to a developer after vibe coding?

Deliver: token files, Figma library link, component mapping doc, and grep-clean codebase. Use how to vibe code a web app structure so engineers inherit conventions, not surprises.

Figma variables to code handoff succeeds when variables are structured before pixels, Dev Mode inspect feeds token names into prompts, and you validate with grep — not eyeball. Use the Dev Mode checklist, wire MCP when scale demands it via our MCP guide, and keep refactoring token drift with safe prompt chains instead of one-shot “fix design” requests.