配置 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，并根据返回的数据生成代码。