跳到主要内容

figma MCP

· 阅读需 5 分钟
Quany
Quany
软件工程师

Figma MCP（Model Context Protocol）是一项创新技术，它作为一个“翻译官”和“桥梁”，将Figma设计工具与AI编程助手（如Cursor、Claude Code等）无缝连接起来。这使得AI能够直接“理解”Figma设计稿中的元素、样式和结构，并自动生成高质量的前端代码，从而显著提升从设计到开发的转换效率 。

🧩 核心功能与应用场景​

通过Figma MCP，AI助手可以为你完成以下一系列自动化任务，覆盖了从设计资源提取到代码生成的全流程 ：

  • 生成前端代码：只需在Figma中选中一个画板（Frame）或组件，AI即可根据设计生成对应框架（如React、Vue、Tailwind CSS）的代码，非常适合快速构建新功能或页面 。
  • 提取设计上下文：直接获取设计文件中使用的变量（Variables）、组件和布局数据，并将其注入到集成开发环境（IDE）中。这对于维护设计系统和使用组件库的工作流尤为有用 。
  • 导出设计资源：根据需要，批量或单独导出设计稿中的图片、SVG等资源，并支持指定格式和缩放比例 。
  • 分析设计系统：自动分析颜色方案、字体使用、组件结构等，生成分析报告或CSS变量文件，帮助保持设计一致性 。
  • 获取设计稿截图：获取设计节点的可视化截图，为AI提供精确的视觉参考，确保代码还原度 。

⚙️ 如何配置与连接​

Figma官方提供了两种使用MCP服务器的方式，你可以根据自身情况选择一种进行配置 。

服务器类型适用场景激活方式
本地服务器（Local）适合大多数个人开发者和小团队，通过Figma桌面应用运行，数据在本地处理 。1. 打开最新版的Figma桌面应用。
2. 进入一个设计文件。
3. 切换至Dev Mode(开发模式)。
4. 在检查（Inspect）面板的MCP server区域，点击 Enable desktop MCP server。服务器通常会运行在 http://127.0.0.1:3845/mcp 。
远程服务器（Remote）适合大型团队或希望简化配置的用户，直接连接至Figma的托管端点，无需运行桌面应用 。无需本地激活，服务器地址为：https://mcp.figma.com/mcp。但需要注意，某些高级功能可能需要特定的Figma订阅席位（如Dev或Full seat）。

连接到AI工具（以Cursor为例） 配置好服务器后，需要在你的AI编程工具中进行连接。下面以流行的Cursor为例 ：

  1. 打开Cursor，进入 Settings（设置）。
  2. 找到 MCP 选项页签。
  3. 点击 Add new global MCP server（添加新的全局MCP服务器）。
  4. 根据你选择的服务器类型，输入对应的配置信息 ：
    • 本地服务器： 
      {
        "mcpServers": {
          "Figma": {
            "url": "http://127.0.0.1:3845/mcp"
          }
        }
      }
    • 远程服务器： 
      {
        "mcpServers": {
          "Figma": {
            "url": "https://mcp.figma.com/mcp"
          }
        }
      }
  5. 保存配置。通常，连接状态指示灯变为绿色即表示成功 。

🚀 最佳实践与使用技巧​

为了获得更精准、高效的代码生成结果，可以参考以下建议 ：

  • 提供高质量的设计稿：在Figma中，尽量使用组件和自动布局（Auto Layout）来构建界面，并使用变量（Variables）来定义颜色、间距等样式。为图层赋予语义化的名称（如CardContainer而非Group 5），这能极大地帮助AI理解你的设计意图 。
  • 使用明确的提示词：在与AI交互时，清晰的指令至关重要。你可以指定技术栈、输出路径等，例如：
    • “为当前选中的Figma框架生成Vue 3组合式API的代码，并使用我们项目中src/components/ui下的现有组件。”
    • “获取这个设计中使用到的所有颜色和间距变量名及其数值。”
  • 利用Code Connect提升一致性：如果项目使用了Figma的Code Connect功能，务必启用它。这能将Figma组件直接映射到代码库中的具体组件实现，让AI生成的代码能最大程度地复用现有组件，保证一致性 。
  • 分批处理大型设计：如果设计稿非常复杂，一次性生成大量代码可能会超出上下文限制。可以尝试先使用get_metadata工具获取高层级节点图，然后有选择地针对特定节点生成代码 。

⚠️ 注意事项​

  • 权限与订阅：使用Figma MCP服务器需要相应的Figma账户权限。部分高级功能或更高的调用频率限制可能仅限于Professional、Organization或Enterprise订阅计划中的Dev或Full席位用户 。
  • 项目适配性：AI生成的代码是一个强大的起点，但可能无法100%完美适配所有项目特定的架构和逻辑。生成的代码需要开发者进行审查和必要的调整 。
  • 备选方案：除了官方方案，社区也存在一些开源的Figma MCP服务器实现（如figma-mcp-full-server），它们可能提供额外的功能，如更强大的批量导出和重试机制 。另外，国内也有类似Pixso这样的设计工具提供了类似的MCP功能，可能更适合部分用户的使用习惯 。

希望这份详细的指南能帮助你更好地理解和运用Figma MCP，解锁AI驱动的设计到代码自动化工作流。如果你在配置或使用过程中遇到更具体的问题，欢迎随时提出。

微信公众号​

微信公众号