Framelink MCP for Figma for Windsurf: Setup & Config

What you can do with Framelink MCP for Figma in Windsurf

Bring the design's structure and assets into coding, with context filtering built into the handoff.

• Inspect file-wide structure when the requested design has no known node identifier.
• Use a Cursor chat to connect Figma styling decisions with application code.

Before you start: Framelink MCP for Figma in Windsurf

• Personal access token issued by Figma
• npx available to the client process
• Editor or assistant with MCP support

The argument array reproduces the macOS/Linux README example, including its YOUR-KEY marker; substitute your token. Windows adds cmd /c around npx. As an alternative to the inline token, the README permits FIGMA_API_KEY in env and also mentions PORT.

Framelink MCP for Figma Windsurf configuration

1. Choose Windsurf configuration scope

   For Framelink MCP for Figma, open macOS/Linux: ~/.codeium/windsurf/mcp_config.json Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json. Merge into mcpServers; remote endpoints use serverUrl.

2. Add Framelink MCP for Figma to Windsurf

   Use the Figma-Context-MCP entry below in mcpServers. Keep Framelink MCP for Figma's documented stdio connection fields and your other Windsurf entries.

3. Check Framelink MCP for Figma in Windsurf

   Framelink MCP for Figma: Refresh MCP in Windsurf settings and inspect Cascade’s tools.

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ],
      "env": {}
    }
  }
}

Framelink MCP for Figma tools available to Windsurf

Framelink MCP for Figma's stored tool list documents 2 tools; compare it with Windsurf's connected tool list, because the stored list is not a live check.

download_figma_images

After refreshing Framelink MCP for Figma in Windsurf settings, check Cascade's tool list for download_figma_images.

get_figma_data

After refreshing Framelink MCP for Figma in Windsurf settings, check Cascade's tool list for get_figma_data.

Inspect design layout; a missing node ID can be handled by retrieving file-wide information.

Framelink MCP for Figma: full stored tool descriptions

Troubleshooting Framelink MCP for Figma in Windsurf

• Check npx figma-developer-mcp (Node.js/npm) on the machine running Windsurf's MCP integration for Framelink MCP for Figma; refresh MCP and inspect Cascade's tools.
• Framelink MCP for Figma uses stdio here: Windsurf must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: A personal Figma credential is necessary even when a design link is available.
• Known limitation: Cursor receives the detailed workflow treatment; other clients are discussed more generally.
• General Windsurf troubleshooting lives in the /clients/windsurf guide.

Frequently asked questions