Framelink Figma MCP Server

MCP server to provide Figma layout information to AI coding agents like Cursor

Catalog onlyCatalog onlySTDIO

Overview

Figma MCP Server is a server designed to provide Figma layout information to AI coding agents like Cursor, enhancing their ability to implement designs accurately.

To use the Figma MCP Server, clone the repository, install dependencies, set up your Figma API access token, and connect it to Cursor. Once connected, you can paste links to Figma files in Cursor's composer to interact with the design data.

Provides Figma design data to AI coding agents. - Simplifies and translates Figma API responses for better accuracy. - Supports fetching specific file and node information from Figma.

Implementing UI designs directly from Figma files.
Enhancing AI coding agents' accuracy in design implementation.
Streamlining the design-to-code workflow for developers.

Add to your AI client

Use these steps to connect Framelink Figma MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

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

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

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

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "figma-context-mcp-glips": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

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

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

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

FAQ

Can I use Figma MCP Server with any AI coding agent?

The server is specifically designed for use with Cursor.

Is there a cost associated with using Figma MCP Server?

No, it is free to use.

What kind of access do I need for the Figma API?

Only read access is required for the Figma API.

Developer tools