配置 MCP 让 cursor 结合 Figma 自动生成设计稿组件

配置 MCP 让 cursor 结合 Figma 自动生成设计稿组件

1. 获取 Figma Access Token

• 打开 Figma 官网，点击左上角头像，选择「Settings」。
• 在设置页面，切换到「Security」标签。
• 滚动到「Personal access tokens」部分，点击「Generate new token」。
• 输入名称，确保有 File content 和 Dev resources 的读取权限，点击生成。
• 复制生成的 Token，后续配置需要用到。

2. 配置 MCP 服务器到 Cursor

• Cursor 支持通过 JSON 配置 MCP 服务器。你需要将 Framelink Figma MCP 的配置添加到 Cursor 的 MCP 配置文件中。
• 配置内容如下（将 YOUR-KEY 替换为你的 Figma Token）：

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

• 步骤：
  1. 打开 Cursor 编辑器。
  2. 按 Cmd + Shift + P，输入 MCP，选择「Open MCP setting」。
  3. 将上面的 JSON 配置粘贴进去（如果已有内容，合并到 “mcpServers” 字段下）。
  4. 保存文件。

3. 使用 MCP 实现 Figma 设计

在 Figma 中，右键你想要实现的 Frame 或 Group，选择「Copy/Paste as」→「Copy link to selection」。
回到 Cursor，粘贴链接，并输入指令如：“实现这个 Figma frame”。

Cursor 会自动调用 MCP 的 get_figma_data，并根据返回的数据生成代码。