Figma MCP Server

DesignIntermediateTransport: stdio

The Figma MCP Server connects Claude Code to the Figma API, enabling design-to-code workflows directly from your terminal. Inspect component hierarchies, extract colors, typography, and spacing tokens, read design specifications, and generate front-end code that matches your Figma mockups. It supports browsing files, pages, and individual frames, making it easy to translate visual designs into pixel-perfect implementations without manually copying values.

figmadesignUIdesign-tokenscode-generation

Installation

claude mcp add figma -- npx -y figma-developer-mcp --token=your_figma_token

Configuration Example

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--token=figd_your_personal_access_token"
      ]
    }
  }
}

Capabilities

Read designs

Export assets

List components

Get design tokens

Read comments

Edit designs

Create prototypes

Manage team

Terminal Preview

Figma MCP Server

About Figma MCP Server

MCP (Model Context Protocol) servers connect Claude Code to external tools, APIs, and data sources. Figma MCP Server is a Design MCP server for Intermediate-level users that enables Claude to interact with real-world services, giving it access to live data and the ability to perform actions beyond its built-in capabilities.