https://www.figma.com/mcp-catalog/

点进去一步步跟着操作

添加插件、授权认证、使用

使用流程 (基于 Figma‑MCP + Cursor)

  1. 确保 Figma 端已开启 MCP Server

    • 如果用的是远程 MCP（官方 remote server / token + API），确保你已正确配置并已授权连接。
    • 如果你用的是 Figma Desktop：打开 Figma → 切到 Dev Mode → 在右侧 “MCP server” 面板中启用本地 MCP。这样本地服务一般运行在 http://127.0.0.1:3845/mcp。

  2. 在 Cursor 中确认 MCP Server 已连接

    • 打开 Cursor → 进入 Settings → MCP tab → 确认你的 Figma‑MCP server 在列表中，并且状态是可用 / 已连接。
    • 如果是通过 URL（SSE / HTTP）连接，确保 URL 正确。若是通过 stdio / command 启动服务，也要保证命令可执行且 server 正在运行。

  3. 在 Figma 中复制你想操作的设计元素链接

    • 在 Figma 打开某个 frame / group / component → 右键 “Copy link to selection”。这个 link 会被用来告诉 MCP “你想操作哪个节点 (node)”。

  4. 回到 Cursor，切换到 “Agent / Composer 模式”

    • 在 Cursor 的聊天 / 编写界面 (Agent 模式 / Composer 模式) 中，粘贴刚刚复制的 Figma 链接。
    • 用自然语言 prompt 描述你要做什么，比如 “请帮我把这个 frame 转成 React + Tailwind 组件”，或者 “帮我导出这个设计的 CSS 样式 / layout /颜色 /字体”。 Cursor 会调用 MCP，把设计数据拉进来，然后结合你的 prompt + LLM 输出。

  5. 审批 / 执行 MCP 工具调用

    • 当你发出 prompt 后，Cursor 可能弹出对话，让你确认 “是否允许使用 MCP 工具／调用设计数据”。确认后，MCP 会执行，返回给你结构化数据或生成的代码／样式／资源等。
    • 然后你可以在 Cursor 中查看结果 (代码、样式、资源链接等)，按需复制 / 导出 / 集成到项目里。