Figma to Code: Design Tokens & Dev Mode 2026

The Figma to code workflow starts with design tokens. Use Figma’s Dev Mode to inspect spacing, export tokens as JSON with Tokens Studio, transform them via Style Dictionary, and map Figma components to React components 1:1 using Code Connect.

The difference between teams that ship fast and teams stuck in review meetings is automation - zero manual steps between a Figma color update and production CSS. I’ve seen one missed token update ship broken dark mode to 50,000 users. This workflow prevents that.

Key Takeaways

• Use Figma’s Dev Mode for accurate specs and CSS output
• Export design tokens with Tokens Studio plugin to GitHub
• Transform tokens with Style Dictionary into CSS custom properties
• Name Figma components to match code components exactly
• Auto Layout = CSS Flexbox (1:1 property mapping)
• Use Figma’s code generation as reference only, not production code

Setting Up Figma for Developers

Before any design-to-development handoff happens, your Figma file needs developer-friendly structure, naming conventions, and consistent Auto Layout usage.

What is Figma Dev Mode?

Figma Dev Mode is a developer-focused interface that displays CSS values, spacing measurements, component properties, and asset exports - without design editing tools cluttering the view. It requires at least one paid Figma seat and integrates with Code Connect, Storybook, and GitHub for seamless handoff. See Figma’s official Dev Mode documentation for the complete feature list.

In Dev Mode, developers can:

• Inspect exact spacing, colors, and typography as CSS custom properties
• See CSS output with correct units (px, rem, or custom scale)
• Access linked Storybook instances and GitHub source code
• View component properties, variants, and Code Connect snippets
• Add annotations and mark sections as “Ready for Dev”

File Structure That Works

I organize every Figma file with this page hierarchy:

📁 Project Name
├── 📄 Cover (thumbnail + links to docs)
├── 📄 Components (design system library)
├── 📄 Pages (production designs)
├── 📄 Prototypes (interactive flows)
└── 📄 Archive (old iterations, clearly labeled)

Name pages explicitly. “Page 1” tells developers nothing. “Dashboard v2 - Ready for Dev” tells them everything they need to know about status and content.

Figma Branching for Version Control

Figma Branching lets designers create isolated copies of a file to work on changes without affecting the main design - similar to Git branches for code. This is essential for design system governance and parallel workstreams.

Use branching when:

• Testing design token changes before publishing to the library
• Working on major component redesigns
• Multiple designers need to work on the same file simultaneously
• You need to preserve a “known good” state before experimentation

Branches can be merged back into the main file, with Figma highlighting conflicts for manual resolution. For teams using Tokens Studio with GitHub sync, this creates a parallel workflow: design branches in Figma, code branches in Git, merged together at release time.

Component Naming Conventions

Your Figma component names should match your code component names exactly.

When a developer sees “Button/Primary/Large” in Figma, they immediately know which component and props to use. No meetings. No guessing.

What is Figma Auto Layout?

Figma Auto Layout is a constraint-based layout system that arranges child elements automatically, mapping directly to CSS Flexbox properties like flex-direction, gap, padding, and align-items. For CSS Grid layouts, you’ll need to translate Figma’s frame structure manually, but Auto Layout handles the majority of component-level layouts. Every frame that could be a flex container in code should use Auto Layout.

Use Auto Layout for:

• Navigation bars and headers
• Card layouts and grid items
• Form groups and input clusters
• Button groups and action bars
• Any list or repeating pattern

Auto Layout properties translate 1:1 to CSS. See Figma’s Auto Layout documentation for advanced features like wrap and absolute positioning. More on this mapping in the Component Mapping section.

How to Export Design Tokens from Figma

Design tokens are the foundation of the Figma to code pipeline.

What Are Design Tokens?

Design tokens are named variables that store visual design decisions - colors, spacing, typography, shadows, border radii - in a platform-agnostic JSON format that exports to CSS custom properties, Tailwind config, iOS Swift, or Android XML. For example, color.primary.500 or spacing.md replace hardcoded hex values with semantic names that stay synchronized between Figma and code.

Design tokens use two layers: primitive tokens (raw values like blue-500: #3b82f6) and semantic tokens (aliases like color.action.primary: {blue-500}). This token aliasing pattern lets you change a primitive once and update every semantic reference automatically. For a deeper dive into token architecture, see my guide on building design systems from scratch.

Without tokens, teams debate hex codes in Slack. With tokens, everyone references color.primary.500 - one source of truth that updates everywhere when changed.

Design Token Export Methods Compared

For most teams, Tokens Studio + Style Dictionary provides the best balance of automation and flexibility.

How to Set Up Tokens Studio

Tokens Studio (formerly Figma Tokens) is the standard plugin for managing design tokens in Figma. Here’s the setup process:

1. Install Tokens Studio from the Figma Community
2. Create your token structure following W3C Design Tokens Format (DTCG)
3. Connect to GitHub for version control
4. Configure sync to push tokens as JSON on publish

Your token structure should follow this pattern:

{
  "color": {
    "primary": {
      "50": { "$value": "#eff6ff", "$type": "color" },
      "100": { "$value": "#dbeafe", "$type": "color" },
      "500": { "$value": "#3b82f6", "$type": "color" },
      "600": { "$value": "#2563eb", "$type": "color" },
      "900": { "$value": "#1e3a8a", "$type": "color" }
    },
    "neutral": {
      "50": { "$value": "#fafafa", "$type": "color" },
      "900": { "$value": "#171717", "$type": "color" }
    }
  },
  "spacing": {
    "xs": { "$value": "4px", "$type": "dimension" },
    "sm": { "$value": "8px", "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "24px", "$type": "dimension" },
    "xl": { "$value": "32px", "$type": "dimension" }
  },
  "borderRadius": {
    "sm": { "$value": "4px", "$type": "dimension" },
    "md": { "$value": "8px", "$type": "dimension" },
    "full": { "$value": "9999px", "$type": "dimension" }
  }
}

Note the $value and $type syntax. This follows the W3C Design Tokens Format (DTCG) specification, ensuring portability across tools like Tokens Studio, Style Dictionary, and native Figma Variables.

Figma Variables vs Tokens Studio: Which Should You Use?

Figma Variables are Figma’s native design token system supporting colors, numbers, strings, and booleans with built-in mode switching for light/dark themes and brand variations. They integrate directly with Dev Mode and require no plugins. See Figma’s Variables documentation for setup details.

My recommendation:

• Use Figma Variables if you’re a small team, don’t need CI/CD automation, and want the simplest setup. Variables work great for prototyping and teams where designers own the token workflow.

• Use Tokens Studio if you need GitHub sync, multi-platform export, or automated pipelines. It’s the better choice for teams with dedicated design systems engineers or complex token architectures.

• Use both together for the best of both worlds. Tokens Studio can import from and sync with Figma Variables, letting you use native Variables in Figma while exporting via Tokens Studio’s more powerful pipeline.

You can also access Figma Variables programmatically via the Figma REST API Variables endpoints for custom tooling.

What is Style Dictionary?

Style Dictionary is Amazon’s open-source build tool that transforms design token JSON into platform-specific output formats - CSS custom properties, Tailwind config, SCSS variables, iOS Swift constants, or Android XML resources - from a single source file. It’s the industry standard for token transformation in production design systems. See the Style Dictionary GitHub repository for documentation and examples.

Raw JSON tokens aren’t directly usable in code. Style Dictionary handles the transformation:

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'src/styles/',
      files: [{
        destination: 'tokens.css',
        format: 'css/variables'
      }]
    },
    tailwind: {
      transformGroup: 'js',
      buildPath: 'src/styles/',
      files: [{
        destination: 'tailwind-tokens.js',
        format: 'javascript/es6'
      }]
    },
    scss: {
      transformGroup: 'scss',
      buildPath: 'src/styles/',
      files: [{
        destination: '_tokens.scss',
        format: 'scss/variables'
      }]
    }
  }
};

Run npx style-dictionary build and you get CSS custom properties:

:root {
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
}

The ROI of Token Automation

Teams that automate their token workflow typically see:

• Time savings: Changes deploy in minutes instead of days
• Error reduction: Eliminates human copying errors completely
• Mental bandwidth: Frees designers and developers for higher-value work
• Scalability: Systems grow without proportional effort increase

The ROI on implementing token automation typically exceeds 300% within 2 years for mid-sized teams. One team I worked with found over 280 color inconsistencies when migrating from spreadsheets to automated sync.

Automating the Token Pipeline

The best teams automate token sync entirely. When a designer updates tokens in Figma:

1. Tokens Studio pushes JSON to GitHub (on library publish)
2. GitHub Action triggers on tokens/** path changes
3. Style Dictionary transforms JSON to CSS/Tailwind/SCSS
4. PR gets created automatically for review
5. Merge deploys updated tokens to production

The Figma file becomes the single source of truth, and “which color is correct?” questions disappear.

Component Mapping

Design tokens handle visual properties. Component mapping handles structure, behavior, and the connection between Figma components and code components.

The 1:1 Component Rule

Every component in your Figma design system should have exactly one corresponding component in code. Not “similar” components. Not “close enough” components. Exact matches with identical:

• Component names
• Variant names and values
• Prop structure
• Nested component relationships

When your Button component in Figma has variants for size (small, medium, large) and variant (primary, secondary, ghost), your React Button must have the same props with the same values.

What is Figma Code Connect?

Figma Code Connect is a CLI tool that links Figma design components to their production React, Vue, SwiftUI, or Compose code - so developers see real, copy-paste-ready snippets in Dev Mode instead of auto-generated CSS. It maps Figma component properties (variants, booleans, strings) directly to component props. See the Code Connect documentation for setup guides and API reference.

Install the CLI:

npm install @figma/code-connect

Create a connection file for your Button component:

// Button.figma.tsx
import figma from '@figma/code-connect/react';
import { Button } from './Button';

figma.connect(Button, 'https://figma.com/file/xxx/Button', {
  props: {
    label: figma.string('Label'),
    disabled: figma.boolean('Disabled'),
    variant: figma.enum('Variant', {
      'Primary': 'primary',
      'Secondary': 'secondary',
      'Ghost': 'ghost'
    }),
    size: figma.enum('Size', {
      'Small': 'sm',
      'Medium': 'md',
      'Large': 'lg'
    })
  },
  example: ({ label, disabled, variant, size }) => (
    <Button 
      variant={variant} 
      size={size} 
      disabled={disabled}
    >
      {label}
    </Button>
  )
});

Publish to Figma:

npx figma connect publish

Now when a developer inspects a Primary/Large button in Dev Mode, they see:

<Button variant="primary" size="lg">
  Click me
</Button>

Real code. Real props. No translation layer.

Code Connect also integrates with Storybook, letting you maintain both systems from the same source files.

Auto Layout to Flexbox Mapping

Figma’s Auto Layout maps directly to CSS Flexbox. Here’s the complete property translation:

Here’s an example translation:

/* Figma: Horizontal, Gap 16, Padding 24, Space Between, Center aligned */
.container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 24px;
  justify-content: space-between;
  align-items: center;
}

This is why Auto Layout matters for handoff. It’s not just for designers making responsive mockups. It’s executable documentation for how layouts work in code. For complex interactive components, see my guide on building interactive UI components which covers the React implementation patterns that pair with these Figma structures.

Handoff Best Practices

Good design-to-development handoff isn’t about perfect specs. It’s about reducing questions and eliminating ambiguity.

For official guidance on structuring handoffs, see Figma’s Guide to Developer Handoff.

Dev Resources in Figma

Dev Mode lets you attach resources directly to components:

• Storybook links - Interactive component documentation
• GitHub source - Direct link to component file
• Documentation - Usage guidelines and API reference
• Accessibility notes - WCAG requirements and ARIA patterns

When a developer inspects your Modal component, they click straight to the Storybook instance or source file. No searching through repos. No asking in Slack.

Figma’s design systems team links every component to Storybook and GitHub. New engineers find the right component without onboarding.

Page Organization for Handoff

Structure pages to answer developer questions before they ask:

📄 Feature Name - Ready for Dev
├── 🖼️ Desktop (1440px)
├── 🖼️ Tablet (768px)  
├── 🖼️ Mobile (375px)
├── 📝 Interactive States (hover, focus, active, disabled)
├── 📝 Loading States (skeleton, spinner, progressive)
├── 📝 Error States (validation, empty, failure)
├── 📝 Edge Cases (long text, missing data, overflow)
└── 📝 Accessibility Notes (focus order, screen reader text)

Developers should find every state, breakpoint, and edge case without asking.

Design QA Checklist

For each feature handoff, verify:

For comprehensive accessibility implementation, follow WCAG 2.2 guidelines and test with screen readers.

Async Communication

The best handoffs happen asynchronously:

1. Designer marks frames as “Ready for Dev” in Dev Mode
2. Developer reviews specs and inspects components
3. Questions go in Figma comments on the specific element
4. Designer responds with annotations or design updates
5. Comments stay attached to context permanently

No meetings required. Context preserved. Nothing lost in Slack threads.

Figma Make and AI Code Generation

Figma Make is Figma’s AI-powered tool (launched at Config 2025) that generates functional prototypes and code from natural language prompts, screenshots, or existing Figma screens. It uses Anthropic’s Claude to turn designs into working React code with Shadcn UI components.

While Figma Make is promising for rapid prototyping, it’s not a replacement for the token-based workflow described in this article. Here’s why:

Figma Make works best when your Figma file already follows good practices - Auto Layout, Variables, and Components. The same preparation that makes MCP work well also improves Figma Make output.

Automation Tools

Manual handoff doesn’t scale. These tools automate the repetitive parts.

Figma MCP Server

Figma’s MCP (Model Context Protocol) server lets AI coding assistants access your designs programmatically - transferring structured data like layers, variables, styles, Auto Layout properties, and images directly to LLMs. Instead of screenshots or manual descriptions, AI tools like Claude, Cursor, or GitHub Copilot can read design data directly. See the Figma MCP documentation for setup instructions.

MCP is miles ahead of plugin-based exports or manual handoff because it gives AI the same design understanding a developer gets when inspecting a Figma file.

The MCP server exposes:

• Component structures and hierarchy
• Design token values
• Variable definitions
• Code Connect mappings
• Layout properties

This means you can prompt “build the header component from my Figma file” and the AI understands the actual design context, tokens, and component structure.

When to use MCP: Adopt Figma MCP when your team uses AI coding assistants (Claude, Cursor, GitHub Copilot) and wants to eliminate manual design-to-prompt translation. Skip it if your workflow doesn’t involve AI-assisted development.

GitHub Actions for Token Sync

Automate the complete token pipeline with GitHub Actions:

# .github/workflows/sync-tokens.yml
name: Sync Design Tokens

on:
  push:
    paths:
      - 'tokens/**'

jobs:
  build-tokens:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build tokens
        run: npx style-dictionary build
        
      - name: Run token validation
        run: npm run validate:tokens
        
      - name: Create PR
        uses: peter-evans/create-pull-request@v5
        with:
          commit-message: 'chore: update design tokens'
          title: 'Design Token Update'
          body: 'Automated token sync from Figma'
          branch: 'tokens/auto-update'

When designers push token updates via Tokens Studio, CSS variables regenerate and a PR appears for review.

Essential Figma Plugins

Beyond Tokens Studio, these plugins improve the workflow:

Visual Regression Testing

Add visual regression testing to catch unintended design changes:

// Using Chromatic with Storybook
// chromatic.config.js
module.exports = {
  projectToken: process.env.CHROMATIC_TOKEN,
  onlyChanged: true,
  externals: ['**/*.css'],
};

Tools like Chromatic or Percy screenshot every component state and diff against baselines. When a token change affects 47 components, you see exactly what changed before merging.

CI Token Validation

Add design token validation to your CI pipeline:

// scripts/validate-tokens.js
import tokens from '../tokens/tokens.json';

const required = [
  'color.primary.500',
  'color.neutral.900', 
  'spacing.md',
  'borderRadius.md',
  'font.body.size'
];

function validateRequiredTokens(tokens, required) {
  const missing = required.filter(path => !getTokenValue(tokens, path));
  if (missing.length > 0) {
    throw new Error(`Missing required tokens: ${missing.join(', ')}`);
  }
}

function validateColorContrast(foreground, background) {
  // WCAG 2.2 AA requires 4.5:1 for normal text, 3:1 for large text
  // APCA (Advanced Perceptual Contrast Algorithm) is the emerging standard
  // targeting WCAG 3.0, recommending Lc 60+ for body text
}

validateRequiredTokens(tokens, required);
console.log('✓ All required tokens present');

Catch design system violations before they reach production.

Common Mistakes to Avoid

These are the patterns I see break Figma-to-code workflows:

Why Most Handoffs Fail

The typical handoff process looks like this:

1. Designers create designs in Figma
2. They share Figma files with developers or export JSON manually
3. Developers manually implement values in code
4. When designs change, the whole process repeats

This approach costs teams hundreds of hours annually and introduces inconsistencies that undermine brand quality. The fix isn’t better communication - it’s automation.

Token Mistakes

Component Mistakes

For type-safe component patterns that prevent these issues at the code level, use TypeScript with strict mode enabled.

Handoff Mistakes

Next Steps

Implement this workflow incrementally:

1. This week: Install Tokens Studio, export your current colors and spacing as JSON
2. Next week: Set up Style Dictionary, generate your first CSS variables file
3. Week 3: Connect Tokens Studio to GitHub, automate the export
4. Week 4: Add Code Connect to your 5 most-used components
5. Ongoing: Expand token coverage, add visual regression testing

Start with tokens - they’re the foundation everything else builds on.

Get started now: Clone the Style Dictionary starter template or copy the GitHub Actions workflow from this article into your repo.

Related Resources:

• Building Design Systems from Scratch - Complete guide to design system architecture
• What Is a Design Engineer? - Understanding the design engineer role
• Building Interactive UI Components - Accessible React components with Tailwind CSS
• AI-Augmented Development Guide - Using AI tools to accelerate design-to-code workflows