Access Figma design tokens in Claude Code via MCP

Problem

Designers define spacing, colors, typography, and component specs in Figma, but developers manually extract these values and translate them into CSS variables, Tailwind config, or component props. This handoff introduces errors, creates drift between design and implementation, and slows development. AI coding assistants have no way to reference the actual design spec during implementation.

Solution

Use the Figma MCP server to give Claude Code direct access to design tokens and component specs from your Figma files.

Step 1: Configure the Figma MCP server

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

Step 2: Reference Figma designs in your prompts

Claude, look at the Figma file at:
https://www.figma.com/design/abc123/Design-System

Extract the color palette from the "Colors" page and generate
a Tailwind CSS config with those exact values.

Step 3: Example generated Tailwind config from Figma tokens

// tailwind.config.ts (generated from Figma design tokens)
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#f0f4ff",
          500: "#4c6ef5",
          900: "#1b2a6b",
        },
        surface: {
          primary: "#ffffff",
          secondary: "#f8f9fa",
        },
      },
      spacing: {
        "token-xs": "4px",
        "token-sm": "8px",
        "token-md": "16px",
        "token-lg": "24px",
      },
      borderRadius: {
        "token-sm": "6px",
        "token-md": "8px",
        "token-lg": "12px",
      },
    },
  },
};

export default config;

Why It Works

The Figma MCP server exposes Figma's REST API as tools that Claude can call during a coding session. When you paste a Figma file URL, Claude inspects the design file to extract precise token values, component structures, and layout measurements. This eliminates manual translation because the AI reads the same source of truth designers use. Design tokens flow directly from Figma into code without human transcription errors.

Context

• Generate a Figma personal access token at Figma > Settings > Personal Access Tokens
• The MCP server reads file structure, component properties, styles, and design tokens
• This workflow pairs well with design systems that use Figma Variables for token management
• For teams without Figma, similar MCP integrations exist for other design tools
• Figma also released AI features for generating designs; the MCP approach focuses on design-to-code