Figma MCP Server

Integrates with Figma's API to interact with files, comments, components, and webhooks.

Local serverstdioTypeScript

What is the Figma MCP server?

Integrates with Figma's API to interact with files, comments, components, and webhooks. That is what the figma mcp server brings to an AI assistant: the same capability, reachable through the Model Context Protocol rather than a separate app or dashboard.

The short version

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

  • File Operations —
  • Get file information
  • Get file version history
  • Get file components
  • Comment Management —
  • List comments in files

The tools it exposes

The server publishes 12 tools. What each one is for:

  • get_file — Get information about a Figma file json { "file_key": "string" }
  • get_file_versions — Get version history of a file json { "file_key": "string" }
  • get_file_components — Get components in a file json { "file_key": "string" }
  • get_file_comments — Get comments from a file json { "file_key": "string" }
  • post_comment — The post_comment tool exposed by this server
  • delete_comment — Delete a comment from a file json { "file_key": "string", "comment_id": "string" }
  • get_team_projects — Get projects for a team json { "team_id": "string" }
  • get_project_files — Get files in a project json { "project_id": "string" }
  • get_component_styles — The get_component_styles tool exposed by this server
  • create_webhook — The create_webhook tool exposed by this server
  • get_webhooks — The get_webhooks tool exposed by this server
  • delete_webhook — The delete_webhook tool exposed by this server

What it needs from you

Configuration is passed through the environment: FIGMA_ACCESS_TOKEN. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.

Getting it running

Installation goes through your MCP client rather than a global install: point it at @smithery/cli on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.

How it compares

Plenty of developer tooling servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. Figma's toolset — get_file, get_file_versions, get_file_components and 9 more — is a fair guide to whether it matches your workflow. It is maintained by deepsuthar496; worth a glance at recent repository activity before you build anything load-bearing on it.

SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.

Things to watch

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • With 12 tools registered it takes up a noticeable share of the context window; turn it off in projects that never touch Figma.
  • Missing credentials fail quietly in some clients — if no tools show up, check the environment block first.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Available tools

ToolWhat it does
get_fileGet information about a Figma file json { "file_key": "string" }
get_file_versionsGet version history of a file json { "file_key": "string" }
get_file_componentsGet components in a file json { "file_key": "string" }
get_file_commentsGet comments from a file json { "file_key": "string" }
post_commentThe post_comment tool exposed by this server.
delete_commentDelete a comment from a file json { "file_key": "string", "comment_id": "string" }
get_team_projectsGet projects for a team json { "team_id": "string" }
get_project_filesGet files in a project json { "project_id": "string" }
get_component_stylesThe get_component_styles tool exposed by this server.
create_webhookThe create_webhook tool exposed by this server.
get_webhooksThe get_webhooks tool exposed by this server.
delete_webhookThe delete_webhook tool exposed by this server.

How to install the Figma MCP server

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

Configuration as documented by the project. Restart the client after saving.

Configuration

VariableDescriptionRequired
FIGMA_ACCESS_TOKENCredential the server authenticates with.Yes

Example prompts to try

  • Use Figma to get file.
  • Use Figma to get file versions.
  • Use Figma to get file components.

Frequently asked questions

The tool supports getting file information, retrieving file version history, and listing components within a Figma file.