UNI-AI分享平台

Appearance

Figma MCP 服务 ​

观看建议指数

⭐⭐⭐⭐⭐ 强烈推荐！设计师和开发者的必备工具

什么是Figma MCP服务？ ​

Figma MCP服务是基于模型上下文协议(Model Context Protocol, MCP)的服务器，它允许您将Figma设计文件与Cursor、Windsurf、VS Code等AI编码工具无缝集成。通过这种集成，AI工具能够直接访问Figma设计数据，从而更准确地一次性生成符合设计的代码，效果远优于传统的截图方式。

视频教程 ​

观看以下视频，了解如何使用Figma MCP服务：

功能特点 ​

  • 设计数据转换：将Figma设计数据转换为AI模型易于理解的格式
  • 布局和样式信息：支持获取Figma文件、画板或组件的布局和样式信息
  • 资源下载：支持下载Figma中的图片和图标资源
  • 精确上下文：减少提供给模型的上下文量，提高AI响应的准确性和相关性
  • 代码连接：通过Code Connect功能，确保生成的代码与您的实际组件库保持一致
  • 设计令牌感知：能够理解和使用设计系统中的变量和令牌
  • 语义精确度：理解设计的层次结构、变体和约束

为什么需要MCP？ ​

传统上，设计师和开发者之间的协作面临着"设计到代码"的转换挑战。开发者需要手动检查设计文件，理解设计意图，然后编写代码来实现这些设计。这个过程不仅耗时，还容易出现误解和不一致。

截图方式的局限性 ​

仅通过截图方式让AI生成代码存在明显缺陷：

  • AI只能分析像素，无法获取设计系统的变量名称
  • 无法理解组件层次结构和变体
  • 难以准确识别颜色、间距和排版规范
  • 生成的代码与设计系统不一致

MCP服务的优势 ​

MCP服务通过以下方式解决这个问题：

  1. 直接访问设计数据：AI工具可以直接读取Figma中的设计元素、样式和组件
  2. 理解设计意图：通过获取完整的设计上下文，AI能更好地理解设计师的意图
  3. 自动代码生成：基于准确的设计数据，生成高质量的代码实现
  4. 保持一致性：确保生成的代码与设计系统和现有代码库保持一致
  5. 语义理解：不仅看到设计的外观，还能理解其结构和功能

设计上下文传递方式 ​

Figma MCP服务通过以下几种方式向AI提供设计上下文：

模式元数据 ​

如果您已经在设计和代码之间建立了对齐（如组件、变量和样式），MCP服务可以：

  • 提供组件的确切路径，帮助AI找到正确的代码文件
  • 共享变量名称和代码语法
  • 减少AI在代码库中搜索的时间

截图 ​

除了元数据外，MCP还提供设计的视觉信息：

  • 帮助AI理解整体布局和流程
  • 捕捉屏幕之间的关系
  • 提供设计意图的高级视图

交互性 ​

MCP可以提供描述设计行为的代码示例：

  • 伪代码作为代码原型
  • 状态组件的表示
  • UI序列的表示

内容 ​

MCP还会提取设计中的内容信息：

  • 文本内容
  • SVG图像
  • 图层名称
  • 注释

如何开始使用 ​

步骤1：启用MCP服务器 ​

  1. 打开Figma桌面应用并确保您已更新到最新版本
  2. 创建或打开Figma设计文件
  3. 在左上角，打开Figma菜单
  4. 在"首选项"下，选择"启用Dev Mode MCP服务器"

服务器将在本地运行，地址为http://127.0.0.1:3845/sse。

步骤2：设置您的MCP客户端 ​

根据您使用的编辑器或工具，配置方法略有不同：

VS Code ​

  1. 转到"代码→设置→设置"或使用快捷键⌘ ,
  2. 在搜索栏中输入"MCP"
  3. 选择"在settings.json中编辑"
  4. 添加以下配置：
json
"chat.mcp.discovery.enabled": true,
"mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
},
"chat.agent.enabled": true
"chat.mcp.discovery.enabled": true,
"mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
},
"chat.agent.enabled": true
  1. 打开聊天工具栏⌥⌘B并切换到"Agent"模式

Cursor ​

  1. 打开"Cursor→设置→Cursor设置"
  2. 转到"MCP"选项卡
  3. 点击"+ 添加新的全局MCP服务器"
  4. 输入以下配置并保存：
json
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Windsurf ​

  1. 打开"Windsurf→设置→Windsurf设置"或使用快捷键⌘ ,
  2. 导航到"Cascade设置"并选择"打开插件商店"
  3. 搜索"Figma"并安装插件
  4. 打开"Cascade"，您应该能看到Figma MCP服务器和可用工具

步骤3：向MCP客户端发送提示 ​

有两种方式向AI客户端提供Figma设计上下文：

基于选择 ​

  1. 在Figma桌面应用中选择一个框架或图层
  2. 提示您的客户端帮助您实现当前选择的设计

基于链接 ​

  1. 复制Figma中框架或图层的链接（右键点击 → 复制/粘贴为 → 复制链接到部分）
  2. 提示您的客户端帮助您实现所选URL的设计

MCP工具功能 ​

Figma MCP服务器提供了三种主要工具：

1. get_code ​

获取当前选择或特定节点ID的代码表示。可以在服务器设置中更改代码类型：

  • React和Tailwind（默认，提供交互性）
  • 其他框架（即将推出）

2. get_image ​

获取设计的截图，用于处理或总结。帮助AI理解设计的视觉方面。

3. get_variables ​

获取变量定义，包括颜色、间距、排版等设计令牌。如果添加了代码语法，会一并提供。

实际案例对比 ​

案例：卡片组件实现 ​

使用截图方式 ​

提示：请根据这个截图实现一个卡片组件
提示：请根据这个截图实现一个卡片组件

结果：

  • AI生成基本的HTML和CSS
  • 颜色使用硬编码的十六进制值
  • 间距不一致
  • 没有使用设计系统组件

使用MCP方式 ​

提示：请使用Figma链接实现这个卡片组件，使用我们的设计系统
提示：请使用Figma链接实现这个卡片组件，使用我们的设计系统

结果：

  • 正确引用设计系统中的变量（如颜色、间距）
  • 使用正确的组件引用
  • 代码与现有设计系统保持一致
  • 准确捕捉交互状态和变体

最佳实践 ​

结构化您的Figma文件以获得更好的代码 ​

  • 使用组件：对任何重复使用的元素（按钮、卡片、输入框等）
  • 将组件链接到代码库：通过Code Connect功能实现
  • 使用变量：用于间距、颜色、圆角和排版
  • 为变量添加代码语法：使用插件API批量添加代码语法
  • 语义化命名图层：例如使用CardContainer而非Group 5
  • 使用自动布局：传达响应式设计意图
  • 使用注释和开发资源：传达难以通过视觉捕捉的设计意图

编写有效的提示来引导AI ​

好的提示可以：

  • 将结果与您的框架或样式系统对齐
  • 遵循文件结构和命名约定
  • 将代码添加到特定路径（如src/components/ui）
  • 在现有文件中添加或修改代码，而不是创建新文件
  • 遵循特定的布局系统（如网格、弹性盒、绝对定位）

示例提示：

  • "从这个框架生成iOS SwiftUI代码"
  • "为这个布局使用Chakra UI"
  • "使用src/components/ui组件"
  • "将此添加到src/components/marketing/PricingCard.tsx"
  • "使用我们的Stack布局组件"

分解大型选择 ​

将屏幕分解为更小的部分（如组件或逻辑块）以获得更快、更可靠的结果：

  1. 为较小的部分或单个组件（如卡片、页眉、侧边栏）生成代码
  2. 如果感觉速度慢或卡住，减小您的选择范围

常见问题解决 ​

get_image工具错误 ​

如果您看到以下错误消息：

Your request failed. Please try again. Request id: [number]

可能的解决方法：

  1. 选择较小的设计区域（当前版本在处理大型设计区域时可能超时）
  2. 尝试使用O3模型而非Claude-4-sonnet（在Cursor中可以手动选择模型）

get_code工具错误 ​

如果您看到以下错误：

The Figma design at this link references a "[Name of component]" component, but the code export suggests the main content is currently missing or hidden.

解决方法：

  1. 重启Figma MCP服务器：在Figma桌面应用中，导航到"首选项→启用Dev Mode MCP服务器"，关闭后再打开
  2. 重启编辑器中的MCP客户端

视频教程 ​

观看以下视频，了解如何使用Figma MCP服务：

常见问题 ​

Figma MCP服务是免费的吗？ ​

Figma的Dev Mode MCP服务可在拥有Dev或Full席位的Professional、Organization或Enterprise计划上使用。

我需要Figma桌面应用吗？ ​

是的，目前您只能从Figma桌面应用使用Dev Mode MCP服务器。未来版本将支持远程服务器功能，无需桌面应用。

支持哪些编辑器？ ​

当前支持VS Code、Cursor、Windsurf和Claude Code等支持MCP服务器的代码编辑器或应用程序。

如何获得最佳结果？ ​

结构良好的Figma文件、清晰的提示和适当大小的选择是获得高质量代码输出的关键。遵循本文档中的最佳实践可以显著提高结果质量。

MCP与传统API有什么区别？ ​

MCP是一种标准化协议，允许AI系统与外部工具交互。与传统API相比，MCP简化了集成过程，并针对LLM使用进行了优化，确保数据以结构化、易于理解的方式提供。

未来发展 ​

Figma正在开发以下MCP服务器功能：

  • 远程服务器能力：无需桌面应用即可使用MCP
  • 更深入的代码库集成：更简单的Code Connect体验
  • 更多框架支持：除React和Tailwind外的其他框架
  • 注释支持：更好地理解设计意图
  • Grid支持：更精确的布局实现

相关资源 ​

Copyright © 2025 unidt