Cursor用Figma MCP直出设计图

在Github上看到一个能够把通过Cursor MCP Server 读取Figma文件的方法，然后通过agent模式完成设计图到开发的过程。尝试了一下生成出来的内容布局完全不符合需求，但迭代一下或者给予更多提示估计能用。

原版内容对于最新版的Cursor配置上有差异，提供一下我的经验。另外以下内容部分内容转自原帖，仅作翻译。

流程：

在Cursor中打开composer并切换到agent模式。

粘贴Figma文件、画板或组的链接。

要求Cursor对Figma文件进行操作——例如实现设计。

Cursor将从Figma获取相关元数据并用它来编写代码。

安装

1. 拿到你的Figma API Key。

2. 快速部署。

快速部署

npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_API_KEY

# or
pnpx figma-developer-mcp --figma-api-key=YOUR_FIGMA_API_KEY

# or
yarn dlx figma-developer-mcp --figma-api-key=YOUR_FIGMA_API_KEY

# or
bunx figma-developer-mcp --figma-api-key=YOUR_FIGMA_API_KEY

部署成功后，终端会显示如下信息：

                            Initializing Figma MCP Server in HTTP mode on port 3333...
HTTP server listening on port 3333
SSE endpoint available at http://localhost:3333/sse
Message endpoint available at http://localhost:3333/messages
                        

3. 配置Cursor

原帖提供的方案与我的Cursor版本（0.47.8）的MCP配置有差异，以下是我的方法。

1. 打开Cursor的MCP配置文件，位于：./cursor/mcp.json

2. 添加以下内容

mcp.json

  {
    "mcpServers": {
      "figma-developer-mcp": {
        "url": "http://localhost:3333/sse",
        "env": {
          "FIGMA_API_KEY": "<your-figma-api-key>"
        }
      }
    }
  }

3. 在Cursor Setting/MCP/MCP Servers中检查。如无意外，会多出一个figma-developer-mcp的卡片，正确连接后会显示绿灯。

4. 在figma中将对应元件的链接复制过来喂给Cursor Agent。

5. 开工。

Cursor用Figma MCP直出设计图

来自这个 PO的方法

流程：

安装