drio
Open app

Figma MCP Server

Source

Mirror of

Catalog onlyCatalog onlySTDIO

Overview

Figma MCP Server is a TypeScript server that implements the Model Context Protocol (MCP) for the Figma API, enabling standardized context provision for large language models (LLMs).

To use the Figma MCP Server, install the necessary packages, set up your Figma access token, and start the server. You can then interact with the server using either stdio or SSE transport methods.

  • MCP-compliant access to Figma resources - Type-safe implementation using TypeScript - Custom URI scheme for Figma resources - Robust error handling and request validation - Support for batch operations
  1. Integrating LLM applications with Figma files and components.
  2. Automating resource management in Figma projects.
  3. Enabling real-time updates and notifications for Figma resources.

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

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

Claude Code

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

.mcp.json (project root)

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

VS Code (Copilot)

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

.vscode/mcp.json

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

Windsurf

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

~/.codeium/windsurf/mcp_config.json

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

Cline

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

Cline MCP Settings (via UI)

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

FAQ

What is the Model Context Protocol (MCP)?

MCP is a protocol that standardizes how context is provided to LLMs, allowing for better integration with various applications.

Is the Figma MCP Server free to use?

Yes! The Figma MCP Server is open-source and free to use.

How can I contribute to the project?

You can contribute by forking the repository, creating a feature branch, and submitting a pull request.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":1170,"uuid":"e8c47178-73f6-4fcb-b07f-6d6a2750108a","name":"TimHolden_figma-mcp-server","title":"Figma MCP Server","description":"Mirror of","avatar_url":"https://avatars.githubusercontent.com/u/192820360?v=4","created_at":"2025-01-28T02:35:58.879Z","updated_at":"2025-02-23T07:13:15.314Z","status":"created","author_name":"MCP-Mirror","author_avatar_url":"https://avatars.githubusercontent.com/u/192820360?v=4","tags":"figma,mcp,server,typescript,api","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/MCP-Mirror/TimHolden_figma-mcp-server","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":null,"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