Install guide and config at curatedmcp.com

Figma MCP: Read Design Tokens and Components Directly Into Your AI Coding Session

Design handoff friction is real. You're building a component, context-switch to Figma to grab a hex value, squint at the typography panel, guess at spacing. Figma MCP eliminates that loop entirely.

This official Figma integration lets Claude, Cursor, and Windsurf read your design files directly—no screenshots, no manual specs. Your AI agent can extract exact token values, component definitions, Auto Layout constraints, and frame measurements. It's the design-to-code gap closed.

What It Does

Figma MCP gives AI agents programmatic access to your Figma workspace. Read file contents, component variants, and design tokens in real time. Extract precise hex colors, font weights, line heights, spacing scales, border radius values, and responsive layout constraints without leaving your editor.

The server handles the structural stuff too: navigate page hierarchies, read frame coordinates and dimensions, access component properties, pull frame comments and annotations. You can even export specific frames as images for reference.

The impact is immediate. Before: "Make the button padding match the design." After: AI reads padding: 12px, background: #2563EB, font-weight: 600 directly from your Figma file and implements it. Pixel-perfect, first try.

How to Install

Add Figma MCP to your local environment:

npx -y figma-developer-mcp

Configure it in Claude Desktop (or Cursor/Windsurf—docs linked below):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx -y figma-developer-mcp"
    }
  }
}

You'll need a Figma personal access token in your environment. See the docs for setup details.

Real-World Use Cases

• Token-driven component building: Ask Claude to build a button component and specify "use tokens from my Figma file." AI reads your exact color palette, typography scale, and spacing tokens, then generates components that match your design system without manual copying.

• Design system documentation: Extract all component variants, their properties, and constraints in one go. Feed this to Claude to auto-generate component stubs, prop types, or Storybook documentation.

• Responsive layout implementation: Have Claude read your Auto Layout rules and responsive breakpoints directly from Figma frames, then generate CSS or React layouts that respect your design constraints.

Full install guides for Claude Desktop, Cursor, Windsurf, and more at CuratedMCP.