How to add Figma Context MCP (figma-developer-mcp) to Windsurf

Popular community server that feeds Figma layout data to coding agents via a Figma API token. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 15, 2026 · 15k★ · stdio · apikey

Windsurf config for Figma Context MCP (figma-developer-mcp)

npx -y figma-developer-mcp --stdio

{
  "mcpServers": {
    "figma-context-mcp-figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-token>"
      }
    }
  }
}

Setup steps

1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
2Paste the Figma Context MCP (figma-developer-mcp) config below.
3Fill in placeholder secrets, then save.
4Click Refresh in the MCP panel.
5Figma Context MCP (figma-developer-mcp)'s tools become available to Cascade.

Before you start

Node.js (run via `npx`, no global install required).
A Figma personal access token — create one in Figma under Settings → Security → Personal access tokens (read access to file content and dev resources is sufficient).
An MCP-compatible client such as Cursor, Windsurf, VS Code, or Claude Desktop.

What Figma Context MCP (figma-developer-mcp) can do in Windsurf

get_figma_data

Fetch a Figma file (or a specific node) and return simplified layout, hierarchy, and style data for the agent.

download_figma_images

Download image and SVG assets (image fills, exportable nodes) from a Figma file to local paths.

Security

Requires a Figma personal access token that can read any file your account can access; scope the token narrowly and never commit it. The server sends file data to wherever your MCP client routes it.

Figma Context MCP (figma-developer-mcp) + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the Figma Context MCP (figma-developer-mcp) config there under the "mcpServers" key and restart the client.

Is Figma Context MCP (figma-developer-mcp) safe to use with Windsurf?

Requires a Figma personal access token that can read any file your account can access; scope the token narrowly and never commit it. The server sends file data to wherever your MCP client routes it.

What tools does this server expose?

Two: get_figma_data (fetch simplified layout/style data for a file or node) and download_figma_images (download image and SVG assets).

How do I get the Figma API key?

Generate a personal access token in Figma under Settings → Security → Personal access tokens, then pass it via --figma-api-key or the FIGMA_API_KEY env var.

Is this the official Figma MCP server?

No. It's a community project by GLips/Framelink (MIT licensed). Figma's own official server is separate and uses OAuth, not a personal access token.

View repo Full Figma Context MCP (figma-developer-mcp) page