Figma

by deepsuthar496

Not rated

GitHub

About

Integrates with Figma's API to enable direct interaction with design files, components, comments, and team resources within conversations through authenticated access token communication.

Details

Author: deepsuthar496
Repository: deepsuthar496/figma-mcp-server
Categories: Developer Tools, Other, Design, Frontend, Productivity, Workplace, File Management, AI
Tags: #web, #integration

- File Operations
- Get file information
- Get file version history
- Get file components

- Comment Management
- List comments in files
- Add new comments
- Delete comments

- Project & Team Features
- List team projects
- Get project files
- Get published styles

- Webhook Management
- Create webhooks
- List existing webhooks
- Delete webhooks

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below
Plugin Name Figma

Command (node, npx, python, etc.) node
Arguments
- Argument 1 path/to/figma-server/build/index.js
Environment
- FIGMA_ACCESS_TOKEN your-access-token-here
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

From the repository

Configure the server in your MCP settings file with your Figma access token:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["path/to/figma-server/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
      },
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

To install Figma MCP Server for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @deepsuthar496/figma-mcp-server --client claude

1. Clone the repository
2. Install dependencies:

npm install

3. Build the server:

npm run build

// Example using the MCP tool to get file information
<use_mcp_tool>
<server_name>figma</server_name>
<tool_name>get_file</tool_name>
<arguments>
{
  "file_key": "your-file-key"
}
</arguments>
</use_mcp_tool>

`get_file`

Get information about a Figma file. Parameters: file_key (string)

`get_file_versions`

Get version history of a file. Parameters: file_key (string)

`get_file_components`

Get components in a file. Parameters: file_key (string)

`get_file_comments`

Get comments from a file. Parameters: file_key (string)

`post_comment`

Post a comment to a file. Parameters: file_key (string), message (string)

`delete_comment`

Delete a comment from a file. Parameters: file_key (string), comment_id (string)

`get_team_projects`

Get projects for a team. Parameters: team_id (string)

`get_project_files`

Get files in a project. Parameters: project_id (string)

`get_component_styles`

Get published styles. Parameters: team_id (string)

`create_webhook`

Create a webhook. Parameters: team_id (string), event_type (string), callback_url (string)

`get_webhooks`

List webhooks. Parameters: team_id (string)

`delete_webhook`

Delete a webhook. Parameters: webhook_id (string)

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your-access-token-here"
            },
            "args": [
                "path/to/figma-server/build/index.js"
            ],
            "command": "node"
        }
    }
}

Linux

{
    "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
    },
    "args": [
        "path/to/figma-server/build/index.js"
    ],
    "command": "node"
}

Macos

{
    "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
    },
    "args": [
        "path/to/figma-server/build/index.js"
    ],
    "command": "node"
}

Windows

{
    "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
    },
    "args": [
        "path/to/figma-server/build/index.js"
    ],
    "command": "node"
}

Figma MCP Server

A Model Context Protocol (MCP) server that provides integration with Figma's API, allowing you to interact with Figma files, comments, components, and more.

Features

Installation

Installing via Smithery

To install Figma MCP Server for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @deepsuthar496/figma-mcp-server --client claude

Manual Installation

1. Clone the repository 2. Install dependencies:

npm install

3. Build the server:

npm run build

Configuration

Configure the server in your MCP settings file with your Figma access token:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["path/to/figma-server/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
      },
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Available Tools

File Operations

get_file

Get information about a Figma file

{
  "file_key": "string"
}

get_file_versions

Get version history of a file

{
  "file_key": "string"
}

get_file_components

Get components in a file

{
  "file_key": "string"
}

Comment Management

get_file_comments

Get comments from a file

{
  "file_key": "string"
}

post_comment

delete_comment

Delete a comment from a file

{
  "file_key": "string",
  "comment_id": "string"
}

Project & Team Operations

get_team_projects

Get projects for a team

{
  "team_id": "string"
}

get_project_files

Get files in a project

{
  "project_id": "string"
}

get_component_styles

Get published styles

{
  "team_id": "string"
}

Webhook Management

create_webhook

Create a webhook

{
  "team_id": "string",
  "event_type": "string",
  "callback_url": "string"
}

get_webhooks

List webhooks

{
  "team_id": "string"
}

delete_webhook

Delete a webhook

{
  "webhook_id": "string"
}

Usage Example

// Example using the MCP tool to get file information
<use_mcp_tool>
<server_name>figma</server_name>
<tool_name>get_file</tool_name>
<arguments>
{
  "file_key": "your-file-key"
}
</arguments>
</use_mcp_tool>

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

get_file

get_file_versions

get_file_components

get_file_comments

post_comment

delete_comment

get_team_projects

get_project_files

get_component_styles

create_webhook

get_webhooks

delete_webhook

Claude Desktop / Cursor

Linux

Macos

Windows

Figma MCP Server

Features

Installation

Installing via Smithery

Manual Installation

Configuration

Available Tools

File Operations

get_file

get_file_versions

get_file_components

Comment Management

get_file_comments

post_comment

delete_comment

Project & Team Operations

get_team_projects

get_project_files

get_component_styles

Webhook Management

create_webhook

get_webhooks

delete_webhook

Usage Example

License

Contributing

Install

More like this

Sequential Thinking

Sentry

Github

Filesystem

EverArt

Google Drive

`get_file`

`get_file_versions`

`get_file_components`

`get_file_comments`

`post_comment`

`delete_comment`

`get_team_projects`

`get_project_files`

`get_component_styles`

`create_webhook`

`get_webhooks`

`delete_webhook`