Cursor Figma MCP 完整使用教程

前端设计诗
946 阅读5分钟

Cursor Figma MCP 完整使用教程

什么是 Figma Context MCP ？

Figma Context MCP Server 通过将 Figma 数据直接提供给您的编码助手，连接设计与代码。它允许开发人员查询设计、理解布局，并根据已完成的设计生成 UI 代码——无需再与设计团队反复沟通。

主要特点：

  • 访问 Figma 框架、图层和文本
  • 将设计转换为组件代码（例如 React、HTML/CSS）
  • 分析间距、颜色和排版
  • 识别视觉不一致或缺失的元素
  • 将 Figma 结构转化为可供开发的见解

这种集成确保了设计的一致性并简化了开发过程。

其实总结起来很简单：
  1. 第一步 获取figma 自己账号的Key值 怎么获取（在下文）

image.png

  1. 第二步 在Cursor中进行配置

image.png

看到绿色链接就证明成功了 然后你就可以在对话中进行链接Figma中的复制的link链接

image.png

  1. 复制Figma中的link

image.png

📋 目录

  1. 项目简介
  2. 前置要求
  3. 获取 Figma API 令牌
  4. 安装和配置
  5. 使用方法
  6. 实战示例
  7. 常见问题
  8. 故障排除

📖 项目简介

Framelink Figma MCP 是一个 Model Context Protocol 服务器，它让 AI 编码工具（如 Cursor）能够直接访问和理解 Figma 设计文件。通过这个工具，AI 可以：

  • 🎨 读取 Figma 设计元数据
  • 📐 理解布局和样式信息
  • 🔄 将设计一次性转换为准确的代码
  • 🚀 提高设计到代码的转换效率

✅ 前置要求

  • Node.js 18.0.0 或更高版本
  • Cursor 编辑器（最新版本）
  • Figma 账户
  • 网络连接

🔑 获取 Figma API 令牌

步骤 1：登录 Figma

  1. 访问 Figma.com
  2. 登录你的账户

步骤 2：创建 API 令牌

  1. 点击右上角的头像
  2. 选择 "Settings"（设置）
  3. 在左侧菜单中选择 "Personal access tokens"
  4. 点击 "Create new token"
  5. 输入令牌名称（例如："Cursor MCP"）
  6. 点击 "Create token"
  7. 重要：立即复制并保存生成的令牌（以 figd_ 开头）

⚠️ 安全提示： API 令牌就像密码一样，请妥善保管，不要分享给他人！

⚙️ 安装和配置

方法一：使用 NPX（推荐）

Windows 用户：

  1. 打开 Cursor 编辑器

  2. 找到 MCP 配置文件

    • 按 Ctrl + Shift + P 打开命令面板
    • 搜索 "MCP" 或 "Model Context Protocol"
    • 选择配置选项

  3. 添加配置 在配置文件中添加以下内容：

    {
  "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 文件

  1. 确保文件访问权限

    • 打开你的 Figma 文件
    • 点击右上角 "Share" 按钮
    • 设置为 "Anyone with the link can view"
    • 或确保你的账户有访问权限

  2. 复制文件链接

    • 复制 Figma 文件 URL
    • 格式通常为：https://www.figma.com/file/文件ID/文件名

步骤 2：在 Cursor 中使用

  1. 打开 Cursor 聊天

    • 按 Ctrl + L（Windows）或 Cmd + L（Mac）
    • 或点击聊天图标

  2. 粘贴 Figma 链接 www.figma.com/file/xxxxxx…

  3. 发送指令 例如：

    • "请帮我实现这个按钮组件"
    • "将这个设计转换为 React 组件"
    • "创建这个页面的 HTML 和 CSS"

🚀 实战示例

示例 1：实现按钮组件

用户输入：
https://www.figma.com/file/abc123/Button-Design

请帮我用 React 实现这个按钮组件，要求：
1. 支持不同尺寸（small, medium, large）
2. 支持不同状态（default, hover, disabled）
3. 使用 TypeScript
4. 包含必要的样式

示例 2：创建页面布局

用户输入：
https://www.figma.com/file/def456/Landing-Page

请帮我实现这个着陆页，要求：
1. 响应式设计
2. 使用 Next.js
3. 包含 Tailwind CSS
4. 保持设计的视觉一致性

示例 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 文件组织清晰，有明确的命名

🔧 故障排除

检查连接状态

  1. 在 Cursor 中运行诊断命令： 请检查 Figma MCP 连接状态

  2. 手动测试 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 日志：

  1. 打开开发者工具
  2. 查看控制台输出
  3. 寻找 MCP 相关错误信息

🎉 成功使用的标志

当一切配置正确时，你应该能看到：

  1. ✅ Cursor 聊天中显示 MCP 连接成功
  2. ✅ 粘贴 Figma 链接后，AI 能识别并获取设计信息
  3. ✅ AI 生成的代码与设计高度匹配
  4. ✅ 包含准确的颜色、尺寸、字体等样式信息

📚 更多资源

avatar
文章
阅读
粉丝