drio
Open app

Figma MCP Server

Source

Catalog onlyCatalog onlySTDIO

Overview

Figma MCP Server is a Model Context Protocol (MCP) server that connects to Figma's API, enabling AI tools and LLMs to access and interact with your Figma designs.

To use the Figma MCP Server, clone the repository, install dependencies, set up environment variables, and start the server. You can then connect it to AI tools like Claude and Cursor for enhanced design management.

  • Design Data Extraction: Extract components, styles, and text from Figma designs. - Design System Analysis: Analyze design system consistency and patterns. - UI Content Management: Organize all UI copy from designs. - Development Handoff: Generate documentation for developers. - Seamless AI Integration: Connect designs to AI tools like Claude and Cursor.
  1. Analyzing design system components for consistency.
  2. Extracting UI copy for localization or documentation.
  3. Generating development handoff documentation based on designs.

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-mohammeduvaiz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-mohammeduvaiz"
      ]
    }
  }
}

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-mohammeduvaiz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-mohammeduvaiz"
      ]
    }
  }
}

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-mohammeduvaiz": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-mohammeduvaiz"
      ]
    }
  }
}

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-mohammeduvaiz": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma-mcp-server-mohammeduvaiz"
      ]
    }
  }
}

Windsurf

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

~/.codeium/windsurf/mcp_config.json

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

Cline

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

Cline MCP Settings (via UI)

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

FAQ

**What is required to run the server?**

You need Node.js 16 or higher and a Figma Personal Access Token.

**Can I connect multiple AI tools?**

Yes! The server supports integration with multiple MCP-compatible clients.

**Is there any cost associated with using Figma MCP Server?**

No, it is open-source and free to use.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":3139,"uuid":"cbc89fd1-1de8-4d66-8beb-1362d1b7ffde","name":"figma-mcp-server","title":"Figma MCP Server","description":"","avatar_url":"https://avatars.githubusercontent.com/u/26567827?v=4","created_at":"2025-03-18T02:59:27.100Z","updated_at":"2025-03-18T14:18:28.778Z","status":"created","author_name":"mohammeduvaiz","author_avatar_url":"https://avatars.githubusercontent.com/u/26567827?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/mohammeduvaiz/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-17 22:58:15\"}","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
Figma MCP Server — MCP Registry