Figma MCP Server

by Figma

Added to Onei Jul 24, 2026

Repository Docs

Featured Developer Tools

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: Brandfetch MCP

by Brandfetch

Official remote MCP server from Brandfetch that gives an agent real company logos, brand colours, fonts and merchant identification instead of guessed or hallucinated assets.

Developer Tools

MCP: Webflow MCP Server

by Webflow

Webflow's official MCP server — let agents read and edit sites, pages, CMS collections and items through the Webflow Data API, with a companion app that syncs the live Designer canvas.

Developer Tools Productivity

MCP: Canva Dev MCP Server

by Canva

Canva's official MCP server for building Canva apps — grounds an agent in the Apps SDK and App UI Kit docs instead of letting it guess the API.

Developer Tools

MCP: NVIDIA Elements

by NVIDIA

NVIDIA's official MCP server for the Elements design system — component APIs, design tokens, icons and validated project scaffolding for AI/ML and robotics UIs.

Developer Tools

Browse all MCP servers →