Figma 推出官方 MCP 服务 ,效果不错!

Figma 推出官方 MCP 服务

• 采用 SEE 模式免除繁琐配置
• 能比非官方的 MCP 获取更多详细设计稿信息和素材

下面是详细介绍和使用方法

官方的 MCP 会传输以下信息：

• 通过提供组件、变量、样式等元数据，减少 LLM 的搜索和推理负担，提高代码生成的准确性和效率。
• 用高层次的设计截图补充元数据，帮助 LLM 理解整体结构、页面流转和响应式布局等。
• 提供伪代码或实际代码示例，描述设计中定义的交互行为。
• 从设计中提取文本、SVG、图片、图层名、注释等内容，帮助 LLM 理解界面数据模型和填充逻辑。

如何使用：

  "mcpServers": {  
    "Figma": {  
      "url": "http://127.0.0.1:3845/sse"  
    }  
  }  

• 更新 Figma 客户端到最新版
• 在左上角，打开 Figma 菜单，进入 Preferences，启用 Dev Mode MCP Server
• 固定的 MCP 地址是 http://127.0.0.1:3845/sse
• 在Trae Cursor 或 Chatwise 中正常设置 MCP
• 直接在 Figma 中选择一个页面或复制画板链接给软件让其实现