drio
Open app

Figma MCP Server

Source

Claude MCP Server to work with figma

Catalog onlyCatalog onlySTDIO

Overview

Figma MCP Server is a Model Context Protocol (MCP) server designed for interacting with Figma designs, allowing Claude AI to extract and manipulate design information from Figma files.

To use the Figma MCP Server, clone the repository, install the dependencies, and start the server. Ensure you have a Figma account and the MCP plugin installed in the Figma desktop app for write operations.

  • Readonly Mode: Extract design information from Figma files using a URL link. - Write Mode: Create or update designs through the Figma plugin. - Comprehensive API: Access a wide range of Figma features through a unified API. - Unit and Integration Testing: Includes tests to verify server functionality and design flow.
  1. Extracting design details for analysis or documentation.
  2. Automating design updates in Figma based on external inputs.
  3. Facilitating collaboration between AI and design teams.

Add to your AI client

Use these steps to connect Figma MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "figma-mcp-server-karthiks3000": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-karthiks3000"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "figma-mcp-server-karthiks3000": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-karthiks3000"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "figma-mcp-server-karthiks3000": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-karthiks3000"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "figma-mcp-server-karthiks3000": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-karthiks3000"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma-mcp-server-karthiks3000": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-karthiks3000"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "figma-mcp-server-karthiks3000": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-karthiks3000"
      ]
    }
  }
}

FAQ

**What are the prerequisites for using the server?**

You need Node.js 18 or higher, a Figma account, and the Figma MCP plugin installed.

**Can I use the server without the Figma plugin?**

No, the write mode requires the Figma MCP plugin to function.

**Is there documentation available?**

Yes, detailed usage instructions can be found in the documentation provided in the repository.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2464,"uuid":"444e8fd7-7a98-4de0-a60b-f86f418cede8","name":"figma-mcp-server","title":"Figma MCP Server","description":"Claude MCP Server to work with figma","avatar_url":"https://avatars.githubusercontent.com/u/13357707?v=4","created_at":"2025-03-13T08:08:26.754Z","updated_at":"2025-03-13T08:09:52.346Z","status":"created","author_name":"karthiks3000","author_avatar_url":"https://avatars.githubusercontent.com/u/13357707?v=4","tags":"figma,mcp,server,design,AI","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/karthiks3000/figma-mcp-server","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"0\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-12 11:04:49\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools