Cursor Figma MCP 完整使用教程
其实总结起来很简单：
- 第一步 获取figma 自己账号的Key值 怎么获取（在下文）
- 第二步 在Cursor中进行配置
看到绿色链接就证明成功了 然后你就可以在对话中进行链接Figma中的复制的link链接
- 复制Figma中的link
📋 目录
📖 项目简介
Framelink Figma MCP 是一个 Model Context Protocol 服务器，它让 AI 编码工具（如 Cursor）能够直接访问和理解 Figma 设计文件。通过这个工具，AI 可以：
- 🎨 读取 Figma 设计元数据📐 理解布局和样式信息🔄 将设计一次性转换为准确的代码🚀 提高设计到代码的转换效率
✅ 前置要求
- Node.js 18.0.0 或更高版本Cursor 编辑器（最新版本）Figma 账户网络连接
🔑 获取 Figma API 令牌
步骤 1：登录 Figma
- 访问 Figma.com登录你的账户
步骤 2：创建 API 令牌
- 点击右上角的头像选择 "Settings"（设置）在左侧菜单中选择 "Personal access tokens"点击 "Create new token"输入令牌名称（例如："Cursor MCP"）点击 "Create token"重要：立即复制并保存生成的令牌（以
figd_ 开头）⚠️ 安全提示： API 令牌就像密码一样，请妥善保管，不要分享给他人！
⚙️ 安装和配置
方法一：使用 NPX（推荐）
Windows 用户：
打开 Cursor 编辑器
找到 MCP 配置文件
- 按
Ctrl + Shift + P 打开命令面板搜索 "MCP" 或 "Model Context Protocol"选择配置选项添加配置在配置文件中添加以下内容：
{ "mcpServers": { "Framelink Figma MCP": { "command": "cmd", "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=你的API令牌", "--stdio"] } }}MacOS / Linux 用户：
{ "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=你的API令牌", "--stdio"] } }}方法二：使用环境变量
{ "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--stdio"], "env": { "FIGMA_API_KEY": "你的API令牌" } } }}🎯 使用方法
步骤 1：准备 Figma 文件
确保文件访问权限
- 打开你的 Figma 文件点击右上角 "Share" 按钮设置为 "Anyone with the link can view"或确保你的账户有访问权限
复制文件链接
- 复制 Figma 文件 URL格式通常为：
https://www.figma.com/file/文件ID/文件名步骤 2：在 Cursor 中使用
打开 Cursor 聊天
- 按
Ctrl + L（Windows）或 Cmd + L（Mac）或点击聊天图标粘贴 Figma 链接www.figma.com/file/xxxxxx…
发送指令例如：
- "请帮我实现这个按钮组件""将这个设计转换为 React 组件""创建这个页面的 HTML 和 CSS"
🚀 实战示例
示例 1：实现按钮组件
用户输入：https://www.figma.com/file/abc123/Button-Design请帮我用 React 实现这个按钮组件，要求：1. 支持不同尺寸（small, medium, large）2. 支持不同状态（default, hover, disabled）3. 使用 TypeScript4. 包含必要的样式示例 2：创建页面布局
用户输入：https://www.figma.com/file/def456/Landing-Page请帮我实现这个着陆页，要求：1. 响应式设计2. 使用 Next.js3. 包含 Tailwind CSS4. 保持设计的视觉一致性示例 3：提取设计系统
用户输入：https://www.figma.com/file/ghi789/Design-System请分析这个设计系统并创建：1. CSS 变量文件（颜色、字体、间距）2. 基础组件库3. 使用说明文档❓ 常见问题
Q1: 配置后看不到 MCP 连接？
解决方案：
- 重启 Cursor 编辑器检查配置文件语法是否正确确认 API 令牌格式正确
Q2: API 令牌无效错误？
解决方案：
- 确认令牌已正确复制（包含完整的
figd_ 前缀）检查令牌是否已过期重新生成新的 API 令牌Q3: 无法访问 Figma 文件？
解决方案：
- 确保文件设置为公开可访问或确保你的账户有文件访问权限检查文件链接是否正确
Q4: AI 响应不准确？
解决方案：
- 提供更具体的指令分步骤请求（先分析设计，再实现代码）确保 Figma 文件组织清晰，有明确的命名
🔧 故障排除
检查连接状态
在 Cursor 中运行诊断命令：请检查 Figma MCP 连接状态
手动测试 API 连接：
- 在终端运行：
curl -H "X-FIGMA-TOKEN: 你的令牌" https://api.figma.com/v1/me应该返回你的用户信息常见错误码
- 401 Unauthorized: API 令牌无效403 Forbidden: 没有文件访问权限404 Not Found: 文件不存在或链接错误429 Too Many Requests: API 调用频率过高
日志查看
在 Cursor 中查看 MCP 日志：
- 打开开发者工具查看控制台输出寻找 MCP 相关错误信息
🎉 成功使用的标志
当一切配置正确时，你应该能看到：
- ✅ Cursor 聊天中显示 MCP 连接成功✅ 粘贴 Figma 链接后，AI 能识别并获取设计信息✅ AI 生成的代码与设计高度匹配✅ 包含准确的颜色、尺寸、字体等样式信息
