figmcp

---

figmcp 是一个本地 MCP 服务，可将你在 Figma Desktop 中打开的 Figma 文件提供给编码 Agent。开发插件会通过 localhost 将文件传输到你计算机上的服务，因此读取文件时不会访问 Figma REST API：无需访问令牌、没有配额，也没有速率限制。

• 从设计到代码。 为 Flutter 项目生成 Flutter 组件，为静态网站生成 HTML + Tailwind，其他情况则生成 React + Tailwind，并附上资源和截图供你对照。
• 在 Figma 中设计。 Agent 使用 Figma 插件 API 脚本在打开的文件中创建和编辑画板，每个脚本对应一个撤销步骤。
• 使用你的组件。 通过 Code Connect 将设计组件映射到代码组件。
• 离线可用。 插件关闭时也能读取保存的快照。
• 适用于任何套餐。 支持所有 Figma 套餐，包括免费 Starter 套餐。无需 Dev Mode 席位。

支持 Claude Code、Cursor、Claude Desktop，以及任何可运行 stdio 服务的 MCP 客户端。

快速开始

需要 Node.js 18+ 和 macOS 或 Windows 上的 Figma Desktop。

1. 运行设置

npx -y @irshad.io/figma-local-mcp@latest setup

该命令会将服务注册到 Claude Code、将 Figma 插件复制到你的主文件夹，并显示配对码以及其他 MCP 客户端所需的配置。

2. 导入插件（仅需一次）

在 Figma Desktop 中，前往 Plugins › Development › Import plugin from manifest…，然后选择：

macOS	Windows
~/.figma-local-mcp/plugin/manifest.json	%USERPROFILE%\.figma-local-mcp\plugin\manifest.json

在 macOS 上，在文件选择器中按 ⌘ ⇧ G，然后粘贴路径。在 Windows 上，将路径粘贴到 File name 框中。

3. 配对并开始提问

重启编码 Agent。在 Figma Desktop 中，运行 Plugins › Development › figmcp 并输入配对码。连接成功后，圆点会变为绿色。然后选择一个画板并提问：

implement the selected Figma frame

工作期间请保持插件窗口打开。完整指南：figmcp.web.app/docs/installation。

使用方法

设计转代码

选择一个画框，或粘贴包含 node-id 的 Figma 链接：

implement this frame as a Flutter screen and match the spacing exactly
build this frame as a React component with Tailwind, using our existing Button
compare your screen with the Figma screenshot and fix the differences

包含 pubspec.yaml 的项目会生成 Flutter 组件，SVG 和图片会保存到 pubspec 声明的资源文件夹中。静态网站会生成 HTML + Tailwind，其他项目则会生成 React + Tailwind。React 输出会使用实际的字体系列，将设计变量声明为 CSS（包含 Tailwind 4 @theme），通过 .map() 将重复项写成数据，并为重复使用的文本样式命名；资源会根据图层命名，并通过复制命令放入 public/figma；原型中的点击操作、图层名称和占位符会转换为按钮、链接、地标和输入框；手机画框会绘制为填满视口的屏幕，桌面画框则会绘制为全宽区块可延展的页面。其类名适用于 Tailwind 3.4 和 4。这些代码仅供参考，Agent 会根据你的项目进行调整。更多 →

在 Figma 中设计

在 Figma Desktop 中打开文件，运行插件并提出要求：

design a settings screen for a 390x844 phone in Figma
add a dark mode version of the selected frame next to it

Agent 使用 use_figma 构建设计，并通过截图检查每一步。每个脚本都对应一次撤销操作。更多 →

Code Connect

map the selected button to AppButton in lib/widgets/app_button.dart
which components in this frame are not mapped yet?

映射后的实例会以你自己的组件形式返回。映射保存在项目中的 .figma-local/code-connect.json 内。更多 →

MCP 客户端

Claude Code 会在设置时注册。重启它并使用 /mcp 检查。

**Cursor、Claude Desktop 和其他客户端：**添加设置时打印的配置。配置如下所示，其中包含适用于你机器的路径：

{
  "mcpServers": {
    "figma-local": {
      "command": "/usr/local/bin/node",
      "args": ["/Users/you/.figma-local-mcp/app/node_modules/@irshad.io/figma-local-mcp/bin/figma-local-mcp.js"]
    }
  }
}

客户端	配置文件
Cursor	~/.cursor/mcp.json（所有项目）或 .cursor/mcp.json（单个项目）
Claude Desktop（macOS）	~/Library/Application Support/Claude/claude_desktop_config.json
Claude Desktop（Windows）	%APPDATA%\Claude\claude_desktop_config.json

各客户端在 macOS 和 Windows 上的分步说明：figmcp.web.app/docs/configuration。

工具

工具	功能
get_design_context	提供节点的参考代码（Flutter 或 React + Tailwind）、资源、截图和变量。主要工具。
get_metadata	以 XML 格式提供图层树：ID、类型、名称、位置和尺寸。
get_screenshot	获取节点或所选内容的 PNG。
get_variable_defs	获取节点使用的变量和样式，并根据其模式解析。
download_assets	获取导出的渲染图、原始图像填充和矢量 SVG。
verify_code	使用 flutter test 渲染 Flutter 代码，或在无头 Chrome 中渲染 React 或 HTML + Tailwind，并与 Figma 的渲染结果进行比较：错误、布局不匹配、像素差异和差异图像。
use_figma	运行 Figma 插件 API 脚本以创建和编辑设计。
search_design_system	获取打开文件中的组件（包括属性和变体）、样式和变量，以便在设计时重复使用。
place_image	将本地 PNG、JPG、GIF 或 SVG 放入打开的文件中，作为新图层或图层填充。
get_code_connect_map	查看哪些实例映射到哪些代码组件。
add_code_connect_map	将设计组件映射到代码组件。
remove_code_connect_map	移除组件映射。
whoami	查看连接状态、配对码、打开的文件、所选内容和快照。
save_design_export	将节点的完整设计导出写入 JSON。
import_design_export	将导出 JSON 加载为快照。

各工具的参数：figmcp.web.app/docs/tools。

工作原理

Figma Desktop  ── WebSocket 127.0.0.1:3947 ──▶  figma-local-mcp  ── MCP stdio ──▶  Coding agent
(dev plugin)       paired with your code        (node server)                     (Claude Code, Cursor, …)

插件使用 Figma 插件 API 读取打开的文件，并运行 Agent 发送的脚本。服务端会将其转换为代码、资源、截图和元数据。关闭插件后，读取操作会回退到最新保存的快照。更多 →

配置

在 MCP 客户端配置的 env 中设置这些变量。

变量	默认值	描述
FIGMA_LOCAL_MCP_DIR	~/.figma-local-mcp	数据文件夹：插件、配对码、快照和资源。
FIGMA_LOCAL_MCP_FRAMEWORK		当客户端未指定时，强制使用 flutter、react 或 html。
FIGMA_LOCAL_MCP_CODE_CONNECT	.figma-local/code-connect.json	Code Connect 映射文件的路径。
FIGMA_LOCAL_MCP_ALLOW_ORIGINS		服务为插件接受的额外来源，以逗号分隔。

更新

npx -y @irshad.io/figma-local-mcp@latest setup

然后重启编码 Agent 并再次运行插件。插件会自行更新，因此无需再次导入。

故障排除

• **指示点一直是灰色：**先启动编码 Agent，然后再次运行插件。
• **配对码丢失：**重新运行设置，或让 Agent 运行 whoami。
• **use_figma 无法编辑文件：**将文件从 Dev Mode 切换回 Design mode。

更多解决方法：figmcp.web.app/docs/troubleshooting。仍无法解决？请附上 whoami 的输出提交问题。

开发

npm install
npm test

路径	内容
bin/、src/	MCP 服务、插件桥接程序和代码生成器
plugin/	Figma 开发插件
tools/	生成代码的可视化和 Flutter 检查工具
test/	测试（node --test）
web/	网站和文档（figmcp.web.app），使用 Firebase Hosting 上的 Next.js

开发网站：cd web && npm install && npm run dev。发布网站：npm run deploy。

许可证

MIT

_{Figma 是 Figma, Inc. 的商标。本项目与 Figma, Inc. 无关。}