drio
Open app

Figma MCP Server

Source

Model Context Protocol server implementation for Figma API

Catalog onlyCatalog onlySTDIO

Overview

Figma MCP Server is a TypeScript implementation of the Model Context Protocol (MCP) for the Figma API, providing standardized access to Figma files and resources, enabling integration with Language Learning Models (LLMs).

To use the server, install the required packages, set up your Figma access token, and run the server. It supports both stdio and SSE transports for client communication.

  • MCP-compliant access and manipulation of Figma files. - Type-safe TypeScript implementation with robust error handling and request validation. - A custom URI scheme (figma://) for accessing resources like files, components, and styles.
  1. Seamless integration with LLMs for Figma resource management.
  2. Automation of design workflows by programmatically accessing and modifying Figma settings.
  3. Monitoring and responding to changes in Figma resources in real time.

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

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

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

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

Windsurf

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

~/.codeium/windsurf/mcp_config.json

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

Cline

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

Cline MCP Settings (via UI)

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

FAQ

What is the MCP protocol?

The Model Context Protocol is a specification that standardizes how different clients can interact with resources in a consistent manner.

How can I run tests?

You can run tests using `npm test` after setting up your development environment.

Is there support for additional Figma API endpoints planned?

Yes, there is a roadmap that includes adding support for more endpoints and features.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":508,"uuid":"ecc38160-8ab5-4db7-ba9f-85c458075f86","name":"figma-mcp-server","title":"Figma MCP Server","description":"Model Context Protocol server implementation for Figma API","avatar_url":"https://avatars.githubusercontent.com/u/8834561?v=4","created_at":"2024-12-30T02:52:12.382Z","updated_at":"2025-01-05T03:00:01.119Z","status":"created","author_name":"TimHolden","author_avatar_url":"https://avatars.githubusercontent.com/u/8834561?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/TimHolden/figma-mcp-server","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"52\",\"license\":\"\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-09 06:31:02\"}","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