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的元信息，不能够做双向的编辑操作。
文章来自于微信公众号“字节笔记本”，作者是“node”。
