Figma正式祭出官方MCP，好用吗？怎么用？

文章来源：万象ai发布时间：2025-07-31 13:46:31

igma正式祭出官方MCP，先体验一下好用不好用：

打开 Figma 桌面应用并确保已更新至最新版本。

然后点击那串小葡萄，开启MCP，如图所示：

底部有Dev Mode MCP Server Settings，能开启都开启一下。

MCP 地址是http://127.0.0.1:3845/sse，在底部会有成功的提醒。

来到Roo Code的MCP配置页面，为什么要使用Roo呢，因为这里可以使用免费又超大上下文的Gemini来处理复杂页面，而且Roo调用MCP也是我使用过最精准的。

配置信息如下：

{ "mcpServers": { "figma-dev-mode": { "type": "sse", "url": "http://127.0.0.1:3845/sse" } }}

下面以官方的 Dev Mode playground的设计稿为例。

首先需要创建或打开一个 Figma 设计文件。

有两种使用方法。

一种是基于选择，在桌面应用中选择Figma 内的画框或图层。

一种是基于链接的，操作如下，复制页面链接。

让它使用html进行页面的还原

MCP 会自动拼装请求到Figma本地的MCP服务器

实际页面

最后生成的页面会有点缺胳膊少脚，而且文字样式不对，文本内容也不全，中间细节处还缺少竖线，但是整体的布局是对的，当然也有可能是我不太会使用这个，有会的同学可以留言教我一下。

开发模式 MCP 服务器目前处于公开测试阶段。

而且仅仅适用于专业版、团队版或企业版计划中的开发人员席位或完整席位。

目前Figma提供的工具的描述和参数总结一下：

get_code（获取代码）

功能：为Figma桌面应用中指定节点或当前选中的节点生成UI代码。

使用nodeId参数指定节点ID。如果未提供节点ID，则使用当前选中的节点。

get_variable_defs（获取变量定义）

功能：获取指定节点ID的变量定义（如{"icon/default/secondary": #949494}）。这些可重用变量可应用于各种设计属性（字体、颜色、尺寸、间距等）。参数使用方式同get_code。

get_code_connect_map（获取代码连接映射）

功能：获取节点ID与代码组件的映射关系（如{"1:2": {codeConnectSrc: "组件代码位置", codeConnectName: "组件名称"}}）。参数使用方式同get_code。

get_image（获取图像）

功能：为指定节点或当前选中节点生成图像。参数使用方式同get_code。

从一系列get参数来看，它也只是能够获取Figma的元信息，不能够做双向的编辑操作。

上一篇: 硅谷AI圈变天！OpenAI弃微软转投谷歌，LeCun被边缘小扎组队血战复仇

活久见，OpenAI和谷歌「世纪握手」，达成合作了！另一边的微软，似乎转头就被抛弃了。另外，小扎也受了刺激，下决心亲自组队50人，破釜沉舟斥资150亿收购Scale AI，誓要做出AGI。硅谷变天了