home / mcp / figma mcp server

Figma MCP Server

Interacts with Figma file content, dev resources, comments, and webhooks.

Installation

Add the following to your MCP client configuration file.

Configuration

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

You can connect to Figma through this MCP server to work with files, comments, components, and team data. It exposes a set of practical operations that let you read file information, manage comments, access published styles, and handle webhooks from your Figma projects.

How to use

You will interact with the Figma MCP Server from an MCP client. Use each tool to perform common tasks such as retrieving file information, listing and adding comments, exploring project assets, and managing webhooks. Each operation is designed to be straightforward: specify identifiers like file keys, team or project IDs, and optional messages or callbacks. Build workflows that combine multiple tools, for example: fetch a file’s details, then pull its version history, and finally list its comments to present a complete view of recent activity.

How to install

Prerequisites you need before installing:
- Node.js (recommended LTS version) and npm or yarn
- An active Figma access token for API authentication
- A suitable MCP client to run commands against the MCP server

Install via Smithery (automatic setup for Claude Desktop):

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

Manual installation steps

If you prefer to install manually, follow these steps to build and run the server locally.

1. Clone the project to your development environment.

2. Install dependencies.

npm install

3. Build the server.

npm run build

Available tools

get_file

Retrieve information about a specific Figma file using its file key.

get_file_versions

Fetch the version history for a given Figma file.

get_file_components

List components contained within a Figma file.

get_file_comments

List comments associated with a specific Figma file.

post_comment

Post a new comment to a Figma file.

delete_comment

Delete a specific comment from a Figma file.

get_team_projects

List all projects for a team.

get_project_files

Retrieve files contained in a project.

get_component_styles

Get published styles for a team.

create_webhook

Create a new webhook for a team to receive events.

get_webhooks

List all webhooks for a team.

delete_webhook

Remove a specific webhook by ID.