Figma — Design-to-Code

Overview

Figma is the primary design tool for modern design systems. Its Variables system, Dev Mode, Code Connect, and REST API create a structured pipeline from visual design decisions to production code. The Figma MCP server brings Figma context directly into AI coding tools.

Figma Variables

Variables are Figma's native design token system — reusable values that can be scoped to modes (themes) and collections:

Variable Types

Collections and Modes

Collection: "Color"
├── Mode: Light
│   ├── surface: #ffffff
│   └── on-surface: #111827
└── Mode: Dark
    ├── surface: #111827
    └── on-surface: #f9fafb

Collection: "Spacing"
└── Mode: Default
    ├── space-xs: 4
    ├── space-sm: 8
    ├── space-md: 16
    └── space-lg: 24

Variable Aliases

Variables can reference other variables, mirroring the DTCG alias pattern:

Global: blue-500 = #3b82f6
Semantic: color-primary = alias → blue-500
Component: button-bg = alias → color-primary

Dev Mode

Dev Mode is the developer-facing view in Figma that surfaces implementation-ready specs:

• •Variable inspection — see the full alias chain down to raw values
• •CSS / iOS / Android code snippets — auto-generated from component properties
• •Ready for dev status — designers mark components as implementation-ready
• •Compare changes — diff between design versions
• •Component properties — variant, boolean, instance swap, text props

Code Connect

Code Connect links Figma components to real code in your repository, replacing generic snippets with actual component usage:

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

figma.connect(Button, "https://figma.com/file/abc123/...", {
  props: {
    label: figma.string("Label"),
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary",
    }),
    disabled: figma.boolean("Disabled"),
    icon: figma.instance("Icon"),
  },
  example: ({ label, variant, disabled, icon }) => (
    <Button variant={variant} disabled={disabled} icon={icon}>
      {label}
    </Button>
  ),
});

Supported Frameworks

CLI Commands

# Publish Code Connect mappings
npx figma connect publish

# Validate without publishing
npx figma connect parse

Figma REST API

The REST API provides programmatic access to files, components, variables, and styles:

Key Endpoints

Extracting Variables

curl -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/variables/local"

Response includes variable collections, modes, values per mode, and alias references — everything needed to generate DTCG token files.

Tokens Studio Plugin

Tokens Studio is a Figma plugin that manages design tokens in W3C DTCG format:

• •Bi-directional sync — edit tokens in Figma or JSON, keep both in sync
• •Git integration — push/pull token files directly from Figma
• •Multi-file support — split tokens across files by category
• •Theme switching — toggle between token sets (light/dark, brand variants)
• •Style Dictionary integration — exports compatible with SD v4

Figma MCP Server

The Figma MCP server brings design context into AI coding tools (VS Code, Cursor, Claude):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic/figma-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<token>"
      }
    }
  }
}

MCP Capabilities

Design-to-Code Workflow

1. Design in Figma
   ├── Define Variables (collections, modes, aliases)
   └── Build components with variable bindings

2. Export tokens
   ├── Tokens Studio → .tokens.json (DTCG format)
   └── REST API → JSON → transform script → .tokens.json

3. Transform tokens
   └── Style Dictionary → CSS, SCSS, iOS, Android, Compose

4. Implement components
   ├── Code Connect → framework snippets in Dev Mode
   └── MCP Server → AI-assisted implementation from screenshots

5. Document in Storybook
   └── Stories, args, play functions, visual tests

Best Practices

• •Use Figma Variables (not just styles) — they support modes, aliases, and scoping which map directly to DTCG tokens.
• •Set up Code Connect for your most-used components so Dev Mode shows real code instead of generic CSS.
• •Use Tokens Studio for bi-directional sync between Figma Variables and .tokens.json files in your repo.
• •Use the Figma MCP server in your editor to get design context without switching windows.
• •Export variables via the REST API in CI to detect token drift between Figma and your codebase.
• •Mark components as "Ready for dev" in Dev Mode to create a clear handoff workflow.