Submit Log in

Figma MCP Server

by Figma

1 views

Repository Docs

Featured Developer Tools

designfigmadesign-to-codefrontend

Summary

Official Figma server that gives AI coding agents direct access to Figma design files for design-to-code work.

Features

Reads layout, styles, and components from open Figma files
Design-to-code translation for frontend implementation
Local desktop server over HTTP (Dev Mode required)
Remote server option with broader feature support
Works with Claude Code, Cursor, and VS Code

Installation

Set up this MCP server in your favorite AI agent — copy a ready-made configuration below.

Any MCP-compatible agent

Most agents (Claude, Cursor, Windsurf, VS Code, and more) read a standard mcpServers configuration.

Open your agent's MCP configuration file.
Merge the snippet below into it.
Restart the agent — the "Figma MCP Server" tools will be available.

{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "claude",
      "args": [
        "mcp",
        "add",
        "--transport",
        "http",
        "figma-desktop",
        "http://127.0.0.1:3845/mcp"
      ]
    }
  }
}

Claude Code

Add the server with a single CLI command.

claude mcp add figma-mcp-server -- claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Claude Desktop

Add the server to claude_desktop_config.json (Settings → Developer → Edit Config).

{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "claude",
      "args": [
        "mcp",
        "add",
        "--transport",
        "http",
        "figma-desktop",
        "http://127.0.0.1:3845/mcp"
      ]
    }
  }
}

Claude Code — requires Figma desktop app open with Dev Mode enabled

{
  "command": "claude",
  "args": [
    "mcp",
    "add",
    "--transport",
    "http",
    "figma-desktop",
    "http://127.0.0.1:3845/mcp"
  ]
}

Cursor — Settings > MCP tab, add HTTP server at http://127.0.0.1:3845/mcp

{
  "command": "cursor-settings",
  "args": [
    "mcp",
    "add-http",
    "figma-desktop",
    "http://127.0.0.1:3845/mcp"
  ]
}

Description

The official Figma MCP server connects design files opened in the Figma desktop app (with Dev Mode enabled) to MCP-compatible coding agents such as Claude Code, Cursor, and VS Code. It lets agents read layout, styles, components, and design tokens directly from a selected frame or file and translate them into code, reducing guesswork when implementing UI from a design. A local version ships with the Figma desktop app over an HTTP endpoint; a remote, broader-feature version is also available.

Related MCP Servers

MCP: Azure DevOps MCP Server

by Microsoft

New

Microsoft's official MCP server for Azure DevOps - work items, repos, pipelines, wikis, test plans and iterations, reachable from any MCP client in plain language.

Developer Tools