Figma MCP 在 Cursor 的实战：从设计到代码的无缝转换

探索如何通过 Figma MCP（Model Context Protocol）在 Cursor 中实现设计与开发的高效协作，让 AI 助手直接读取 Figma 设计稿并生成高质量的前端代码。

前言

作为一名前端开发者，你是否遇到过这样的场景：设计师在 Figma 中完成了精美的界面设计，而你需要在代码中手动还原每一个像素、每一个间距、每一个颜色值？这个过程既耗时又容易出错。

随着 AI 编程工具 Cursor 的兴起，以及 Figma MCP 协议的推出，我们终于可以告别这种低效的工作方式。本文将带你深入了解如何在 Cursor 中配置和使用 Figma MCP，实现从设计稿到代码的自动化转换。

Figma MCP 简介

Figma MCP 是基于 MCP 协议实现的 Figma 集成方案，它允许 AI 助手（如 Cursor）直接访问 Figma 的设计数据，包括：

• 设计文件的结构和层级
• 组件的样式属性（颜色、字体、间距等）
• 设计规范（Design Tokens）
• 组件库信息

通过 Figma MCP，开发者可以让 Cursor 读取 Figma 设计稿，并基于设计稿生成对应的前端代码。

环境准备

1. 安装 Cursor

如果你还没有安装 Cursor，可以从 Cursor 官网 下载并安装。

2. 获取 Figma Access Token

要使用 Figma MCP，你需要一个 Figma 个人访问令牌：

1. 登录 Figma
2. 点击右上角的个人头像
3. 进入 Settings → Account
4. 滚动到 Personal access tokens 部分
5. 点击 Create a new personal access token
6. 为令牌命名（如 “Cursor MCP”）
7. 复制生成的令牌并妥善保存（注意：令牌只显示一次）

3. 安装 Figma MCP 服务器

Figma MCP 服务器可以通过 npm 安装：

npm install -g @modelcontextprotocol/server-figma

或者，你也可以使用 npx 直接运行，无需全局安装。

配置 Cursor MCP

步骤 1：打开 Cursor 设置

在 Cursor 中，打开设置（Settings），找到 MCP 或 Model Context Protocol 相关配置。

步骤 2：添加 MCP 服务器配置

在 Cursor 的配置文件中（通常是 ~/.cursor/mcp.json 或类似位置），添加以下配置：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-access-token-here"
      }
    }
  }
}

重要提示：

• 将 your-figma-access-token-here 替换为你刚才获取的 Figma Access Token
• 确保配置文件格式正确（JSON 格式）

步骤 3：重启 Cursor

保存配置后，重启 Cursor 以使配置生效。

步骤 4：验证连接

重启后，在 Cursor 中尝试与 Figma MCP 交互。你可以询问 Cursor：

@figma 列出我可以访问的 Figma 文件

如果配置成功，Cursor 应该能够返回你的 Figma 文件列表。

实战案例

案例 1：从 Figma 设计稿生成 React 组件

假设设计师在 Figma 中设计了一个按钮组件，你可以这样操作：

1. 获取设计文件的 URL

   在 Figma 中，打开设计文件，复制文件 URL。URL 格式通常为：

   https://www.figma.com/file/{file-key}/{file-name}
   

2. 在 Cursor 中请求代码生成

   在 Cursor 的聊天窗口中输入：

   请帮我读取这个 Figma 文件中的按钮组件设计，并生成对应的 React 组件代码：
   https://www.figma.com/file/xxxxx/button-design
   

3. Cursor 会自动完成以下操作：

   • 通过 Figma MCP 读取设计文件
   • 提取按钮的样式属性（颜色、字体、圆角、阴影等）
   • 生成符合设计规范的 React 组件代码
   • 使用合适的 CSS 或 Tailwind CSS 类名

案例 2：提取设计规范（Design Tokens）

设计规范是前端开发中的重要参考。通过 Figma MCP，你可以快速提取设计规范：

@figma 请提取这个文件中的颜色、字体和间距规范：
https://www.figma.com/file/xxxxx/design-system

Cursor 会返回类似这样的设计规范：

export const designTokens = {
  colors: {
    primary: '#3B82F6',
    secondary: '#10B981',
    // ...
  },
  typography: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      // ...
    },
    fontSize: {
      sm: '0.875rem',
      base: '1rem',
      // ...
    }
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    // ...
  }
}

案例 3：批量生成组件库

如果你需要从 Figma 组件库中生成多个组件：

@figma 请读取这个组件库文件，为每个组件生成对应的 React 组件：
https://www.figma.com/file/xxxxx/component-library

Cursor 会：

1. 识别文件中的所有组件
2. 为每个组件生成独立的 React 文件
3. 保持组件的层级结构和样式一致性

实用技巧

1. 指定代码风格

在请求代码生成时，明确指定你使用的技术栈和代码风格：

请使用 TypeScript + Tailwind CSS 生成这个组件的代码，遵循 Airbnb 代码规范

2. 处理复杂交互

对于包含复杂交互的组件，可以分步骤处理：

第一步：先读取这个组件的设计稿
第二步：生成基础样式代码
第三步：添加交互逻辑（hover、click 等）

3. 保持设计一致性

在生成多个相关组件时，要求 Cursor 保持设计一致性：

请确保所有生成的组件使用相同的设计规范，包括颜色、字体和间距

4. 优化代码质量

生成代码后，可以要求 Cursor 进行优化：

请优化这段代码的性能，并添加适当的 TypeScript 类型定义

常见问题与解决方案

Q1: Cursor 无法连接到 Figma

可能原因：

• Figma Access Token 配置错误
• MCP 服务器未正确安装
• 网络连接问题

解决方案：

1. 检查配置文件中的 Token 是否正确
2. 确认 MCP 服务器已安装：npm list -g @modelcontextprotocol/server-figma
3. 检查网络连接和防火墙设置

Q2: 生成的代码与设计稿有差异

可能原因：

• Figma 文件权限问题
• 设计稿使用了特殊效果（如模糊、混合模式等）

解决方案：

1. 确保你的 Figma Access Token 有访问该文件的权限
2. 对于特殊效果，可能需要手动调整代码
3. 在请求时明确说明需要处理的效果类型

Q3: 代码生成速度较慢

可能原因：

• Figma API 请求限制
• 设计文件过大

解决方案：

1. 分批处理大型设计文件
2. 只请求需要的特定组件或页面
3. 考虑使用本地缓存

最佳实践

1. 组织设计文件结构

   • 在 Figma 中使用清晰的命名规范
   • 合理使用组件和变体（Variants）
   • 建立统一的设计系统

2. 代码生成策略

   • 先生成基础组件，再组合成复杂页面
   • 保持代码的可维护性和可扩展性
   • 定期审查和优化生成的代码

3. 协作流程

   • 与设计师建立设计规范文档
   • 使用版本控制管理生成的代码
   • 建立代码审查机制

总结

Figma MCP 与 Cursor 的结合，为前端开发带来了革命性的变化：

✅ 提高效率：从设计到代码的转换时间大幅缩短
✅ 减少错误：自动提取设计属性，避免手动输入错误
✅ 保持一致性：确保代码与设计稿的高度一致
✅ 提升协作：设计与开发之间的沟通更加顺畅

虽然 AI 生成的代码能够处理大部分场景，但在复杂交互、性能优化和边界情况处理方面，仍需要开发者的专业判断和手动调整。

延伸阅读

• MCP 官方文档
• Figma API 文档
• Cursor 官方文档

写在最后

技术总是在不断演进，Figma MCP 和 Cursor 的结合只是 AI 辅助开发的一个开始。作为开发者，我们应该拥抱这些新工具，同时保持对代码质量的追求和对技术细节的深入理解。

希望这篇文章能帮助你在实际项目中更好地使用 Figma MCP 和 Cursor。如果你有任何问题或经验分享，欢迎在评论区交流！