Figme

figme

一个 MCP 服务，让你的 AI Agent 无需联网、无需 Figma 账号或 API 令牌，即可读取 Figma .fig 文件。

将 Figma 设计保存为 .fig 文件后，你的 Agent 就能读取其中的所有内容：图层和布局、颜色、文本、组件、设计令牌和图片。figme 还能将任意画框绘制为图片，让 Agent 对比它构建的内容与设计稿。

you: "what does the tab component in design.fig look like?"

fig_overview  → 10 pages, 2,046 components, 273 variables, 212 images
fig_find      → "lv2/tab/large" is 2:1337, on page "Page 1"
fig_style     → display:flex, direction:row, gap:8, padding:"8px 16px",
                cornerRadius:4, stroke #FFFFFF bound to variable "tab/large/underline"
                (active #FFFFFF / inactive #333333)

为什么选择 figme

• 无需账号、令牌或网络。 figme 读取你磁盘上的文件，不会访问 figma.com。
• 文件中的内容一应俱全。 图层和几何信息、自动布局、填充、描边、效果、混合样式文本、组件和实例、变量、原型链接和图片。布局会转换为 CSS flexbox，颜色以十六进制表示，绑定到变量的颜色还会保留其令牌名称。
• 图片与数值兼备。 fig_render 可将任意图层绘制为 PNG 或 SVG。
• 响应精简。 即使文件包含 116,000 个节点，响应也只有约 20 KB。结果默认只包含浅层信息，并且可以筛选和分页。
• 适应 Figma 更新。 每个 .fig 文件都包含用于描述自身的架构，figme 会根据该架构解码文件，因此 Figma 后续新增字段也不会造成影响。

快速开始

你需要安装 Node.js 22.15 或更高版本。

1. 将设计保存为 .fig 文件。 在 Figma 中，选择 File → Save local copy…。如果是 Community 文件，请先点击 Open in Figma。

2. 将 figme 添加到你的 Agent。 在 Claude Code 中：

claude mcp add figme -- npx -y figme-mcp

对于 Cursor、VS Code、Windsurf 和其他客户端，请参阅设置客户端。

3. 提出请求。 提供文件的完整路径，如果有 Figma 链接，也一并粘贴：

使用 figme，读取 /Users/me/Desktop/App.fig，并将这个画框构建为 React 组件： https://www.figma.com/design/AbC123/App?node-id=3017-121

之后由 Agent 选择所需工具。还可以尝试以下请求：

• “列出 /Users/me/Desktop/App.fig 中的页面和使用最多的组件。”
• “将 /Users/me/Desktop/App.fig 中的颜色变量转换为 CSS 自定义属性。”
• “将 /Users/me/Desktop/App.fig 中的登录界面渲染到 /Users/me/Desktop/sign-in.png。”

设置客户端

所有客户端都运行同一条命令 npx -y figme-mcp。区别仅在于配置位置。

claude mcp add figme -- npx -y figme-mcp           # this project
claude mcp add -s user figme -- npx -y figme-mcp   # every project

{
  "mcpServers": {
    "figme": { "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

{
  "mcpServers": {
    "figme": { "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

code --add-mcp '{"name":"figme","command":"npx","args":["-y","figme-mcp"]}'

{
  "servers": {
    "figme": { "type": "stdio", "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

{
  "mcpServers": {
    "figme": { "command": "npx", "args": ["-y", "figme-mcp"] }
  }
}

{ "command": "npx", "args": ["-y", "figme-mcp"] }

在 Windows 上，有些客户端无法自行找到 npx。如果服务无法启动，请通过 cmd 运行：

{ "command": "cmd", "args": ["/c", "npx", "-y", "figme-mcp"] }

提示

• 始终提供文件的完整路径，即使附带链接也是如此。 Figma 链接无法告诉 figme 对应的是磁盘上的哪个文件，而且相对路径会根据客户端启动服务的位置解析。

• 不要让 Agent 打开 Figma 链接。 页面需要登录，因此 Agent 得不到任何有用信息，还可能根据 URL 中的文字编造设计。figme 会提醒 Agent 不要这样做；如果你的 Agent 还是尝试了，请阻止它。

• “未找到节点” 通常意味着保存的文件并非链接所指向的文件。对比 fig_overview 报告的文档名称与链接中的名称，或者让 Agent 改为按名称查找图层。

• 大文件需要内存。 解析后，39 MB 的 .fig 文件大约会占用 900 MB 内存，而 figme 最多会保留 4 个已解析的文件。在配置较低的机器上，只保留一个：

  { "command": "npx", "args": ["-y", "figme-mcp", "--max-files", "1"] }
  

工具

Agent 会自行选择这些工具；你不需要指定它们。

每种工具的参数和响应示例见 docs/tools.md。

限制

• 只读。 figme 不会更改你的 .fig 文件。只有在你要求 fig_image 或 fig_render 保存文件时，它才会写入文件。
• 这是快照，不是实时链接。 .fig 保存的是你保存时的设计状态。设计发生变化时，请重新保存；figme 会读取新文件。
• 渲染效果接近，但并非像素级精准。 fig_render 会近似处理一些效果，例如背景模糊和角度渐变，也会跳过一些内容，例如表情符号。每次渲染都会列出近似处理或跳过的内容。请参阅 docs/rendering.md。
• 不包含其他文件中的库。 从其他文件发布的样式、变量和组件会以引用形式显示，不包含其值。
• 不会解码矢量路径。 fig_blob 会返回其原始字节。

贡献

欢迎提交问题和拉取请求。CONTRIBUTING.md 介绍了如何从源代码构建和运行测试，以及解析器的工作方式。

许可证

MIT