让AI直接读懂设计！5步搞定Figma免费接入Cursor全流程

一、全文速览图

把 Figma 通过 MCP 的方式接入 Cursor 可以让 AI 编辑器直接获取设计稿的结构化信息，自动还原设计稿的布局、样式和组件，设计和开发速度大幅提升。

本文就来手把手教你进行配置和操作，以下步骤中 Cursor 和 Figma 都是白嫖阶段（免费版）即可尝试，只要你一步步跟着来，代码小白也能成功跑通，而且你会发现再想让 Figma 接入其他 AI 产品也变得轻而易举。文末附 AI coding 实践案例和经验总结。

二、配置方法‍‍‍‍‍‍

如果你的 Figma 付费开启了开发者模式（Dev Mode），可以使用 Figma 官方提供的 MCP 服务直接对接 Dev Mode，Figma 官网上有教程，这里我就不做过多赘述：

我这里重点讲的是如果你无法使用开发者模式该如何连接 Cursor。具体分以下几个步骤：

Step 1. 获取 Figma 的 API Key

这一步是在帮助 Figma 生成一个与 Cursor 打通的密钥。打开 Figma，点击左上角的 Figma 图标，选择 Help and account - Account settings - Security；在 Personal access tokens 区域，点击 Generate new token 创建一个新的 Token，可自定义命名，比如“Cursor-MCP”：

要注意以下几点：

1. 最好能将需要对接的 Figma 设计稿链接设为“公开”，无需密码查看；
2. 生成的 Token 只显示一次，一定要复制保存好，后续无法再次查看；
3. 设置时的权限至少勾选 “Files:read” 和“Variables:read”，少勾选会导致 Cursor 无法读取设计数据。

Step 2. 在 GitHub 仓库中配置

这一步是在建立 Figma 与 Cursor 的 “数据通信桥梁”，授权 Cursor 的读取权限。打开 Figma GitHub 仓库：https://github.com/GLips/Figma-Context-MCP；找到仓库中的 MCP 配置代码（见下图），根据你的设备系统直接复制全部内容，先粘贴到你任意一个空文档中：

然后将刚粘贴好的代码中 YOUR-KEY（下图中红框的内容），替换成你在第一步中创建的 Figma API KEY，替换时注意格式，不要多删或多添符号：

Step 3. 安装 Node.js LTS

Figma MCP 服务需要依赖 Node.js 才能运行，必须安装对应版本。你只需要在 Node.js 官网下载 v20 及以上版本（以 Mac 系统为例）的安装包，跟随系统的安装向导一步步操作，无需额外设置：

安装之后，你可以打开电脑的“终端”，验证下是否安装并运行成功：

在终端里直接输入指令：node -v，如果显示 v20.x.x（或更高版本），就说明安装成功了：

Step 4. 在 Cursor 中配置 MCP

这一步是让 Cursor 为 Figma 打开权限。打开桌面端的 Cursor 编辑器，点击右上角的 Settings 图标，找到 Tools & MCP，将第二步中已经替换好的 Figma API KEY 的那一段配置代码（如下图）：

全部粘贴到 Cursor 的配置框中：

配置完成后，需要重启 Cursor。重启后查看 MCP 的状态灯，变绿即代表连接成功：

Step 5. Figma 设计生成代码

以上配置完成后，就可以正式使用了。打开 Figma 设计稿，可以直接复制设计文件、画板或组件的链接，打开 Cursor 的聊天窗口，粘贴 Figma 链接，再用自然语言描述你的需求。Cursor 就会自动基于 Figma 的真实数据生成前端代码。举几个例子，你的指令可以是 Figma 链接 + 以下任意一种描述：

1. 把这个设计转成 React 代码实现出来；
2. 生成这个页面的 HTML+CSS+Tailwind；
3. 基于这个设计生成响应式移动端页面。

三、使用心得 & 提醒

另外一些感受和经验分享给大家：

① 这个方法适合设计稿结构清晰、组件层级明确的项目。设计稿要注意整洁性，不要有过多的隐藏或多余元素。

② 复制设计稿链接时，推荐复制单个组件或画板链接，避免数据过载，也能够提高代码生成准确率。另外，也推荐使用 Figma Copy 功能中的 Copy as code，可以直接复制 code 喂给 Cursor，生成内容的准确率也会有所提高。

举个例子，下图是我用 Figma Copy Link 和 Copy as code 分别喂给 Cursor 后生成的效果对比。可以看出来用 Code 来进行生成会更加接近原设计稿：

③ 这两种方式的生成效果都要好于直接给 Cursor 喂一张截图。截图是 AI 在“猜”设计；用 MCP 接入是 AI 在“读”真实的设计数据，比如接入 MCP 后的 Cursor 能够直接判断出我的设计稿使用的是 XX 开源组件库的组件。

④ 不管使用哪种生成方式，生成的效果最多只能还原到 90% 左右，尚且还无法做到 100% 完全一致，比如复杂交互、特殊动画，还需要进一步手动或者用自然语言来进行局部微调。

⑤ 以上步骤只能保证两者默认单向读取、不自动双向同步，如果你在 Cursor 的代码里改了元素的颜色值，Figma 里的颜色属性是不会变化的。Cursor 的作用是辅助生成和修改代码，不是设计源。

⑥ 如果需要 Cursor 直接修改 Figma 的设计稿，需要在 Cursor 中增加支持“写回”的 MCP：Cursor Talk to Figma（后续会分享教程，欢迎关注）。

过程中有任何问题，你都可以在留言评论区问我。

我也会持续为你分享和总结相关的经验和案例。

欢迎关注作者微信公众号：「长弓小子」