Codex插件推荐：Local Figma Agent MCP，不购买付费套餐，也能让 Agent 读懂并修改Figma设计稿

Local Figma Agent MCP 面向 Codex、Claude Code、Cursor 等本地 Coding Agent。它通过 Figma Desktop 开发插件连接当前 Design 文件，让 Agent 能够读取真实的设计结构，并在隔离的 Proposal 中创建可审查的修改。

一、Figma MCP 很好用，但免费额度够用吗？

MCP（Model Context Protocol）正在改变 AI 编程工具获取上下文的方式。

以前，我们想让 AI 理解一份 Figma 设计稿，通常只有两种选择：截一张图发给模型，或者手动把颜色、间距、字体和组件关系描述一遍。

这两种方式都有明显的问题。

• 截图只能表达"长什么样"，无法完整表达节点层级、Auto Layout、变量和组件属性。
• 人工描述不仅费时间，还很容易遗漏真正影响实现的细节。
• Agent 在编辑器里写代码，开发者却要不停切回 Figma 查尺寸、导素材和确认组件。

Figma 官方 MCP 的出现解决了不少问题。根据官方介绍，它可以向 AI Agent 提供结构化设计上下文，并支持把原生 Figma 内容写回画布。

不过，对个人开发者和高频使用者来说，还有一个很现实的问题：调用额度。

Figma Pricing 显示 Starter 方案包含 每月 20 次 MCP 工具调用；Professional 方案可以提高到每天 200 次，但需要相应的付费套餐。

20 次调用听起来不算少，但一个完整任务可能会连续经历：

检查连接
→ 获取当前选择
→ 读取节点树
→ 获取字体与变量
→ 获取 CSS 提示
→ 渲染节点
→ 执行修改
→ 再次读取和渲染

一次稍微复杂的任务，就可能消耗多次工具调用。

那么问题来了：

能不能不升级付费套餐，也让本地 Coding Agent 高频读取和修改 Figma？

这正是我开发 Local Figma Agent MCP 的原因。

项目地址：github.com/Lancasteerr...

二、Local Figma Agent MCP 是什么？

Local Figma Agent MCP 是一个免费、开源、本地运行的 Figma MCP 方案。

它通过 Figma Desktop 开发插件连接当前打开的 Design 文件，并向 Codex、Claude Code、Cursor 等支持本地 stdio MCP 的 Agent 提供 23 个受限工具。

整个项目由三个部分协作完成：

组件	作用
Agent Plugin	安装 Agent 工作流说明，并自动配置匹配版本的 MCP Server
MCP Server	提供读取、渲染、Proposal、DesignPlan 等 23 个工具
Figma 开发插件	在 Figma Desktop 内读取当前文档并执行实际操作

它目前可以完成这些工作：

• 读取节点树、文本、字体、变量、组件和 Auto Layout；
• 获取 Figma Inspect CSS 提示；
• 将节点渲染为 PNG，辅助 Agent 进行视觉检查；
• 导出临时 PNG 或 SVG 素材；
• 复制现有设计并在独立 Proposal 中修改；
• 使用 DesignPlan 从零生成由原生 Figma 节点组成的页面；
• 让多个本地 MCP 客户端复用同一个 Bridge 连接。

项目本身不按照每天或每月的工具调用次数计费或限额。它仍然会对单次树读取、图片大小和临时素材容量设置边界，也会受到本机性能、MCP 客户端和模型自身额度的影响，但不会因为多调用了几次 Figma 工具而要求升级席位。

三、它和官方 Figma MCP 有什么区别？

先说结论：Local Figma Agent MCP 不是官方 MCP 的完整复刻，也不打算替代 Figma 的所有官方能力。

它更像是一个面向本地、高频、可审查工作流的开源选择。

对比项	官方 Figma MCP	Local Figma Agent MCP
免费使用	Starter 当前为每月 20 次工具调用	免费开源，无项目级调用次数配额
高频使用	通常需要升级对应的付费席位	无需额外购买 Dev/Full seat
运行方式	官方 Remote 或 Desktop MCP	Figma Desktop 插件 + 本地 Bridge
设计读取	官方设计上下文	节点、字体、变量、CSS、渲染等
设计写入	Write to Canvas	在独立 Proposal 中修改或生成
开放性	官方托管能力	MIT License，可查看和扩展实现

如果你所在的团队需要 Remote MCP、Code Connect、Team Library，以及 Figma 官方提供的完整生态，官方方案依然更合适。

如果你的主要需求是：

• 在本机频繁读取 Figma；
• 让 Agent 分析真实的节点和布局信息；
• 修改设计，但希望先得到一个可审查的副本；
• 使用开源方案研究或扩展 Figma MCP；

那么 Local Figma Agent MCP 会是一个值得尝试的替代方案。

四、它具体能做什么？

1. 读取和分析设计

Agent 不再只能看截图。

它可以读取当前选择的浅层摘要、指定节点的归一化快照，以及受深度和数量限制的节点树。它还能继续查询字体、变量、可复用组件和 CSS 提示，并把节点渲染成 PNG 进行视觉核对。

换句话说，Agent 可以同时获得两类信息：

• 结构事实：节点层级、布局方式、字体、颜色、组件关系；
• 视觉结果：这个节点最终在画布上呈现出来的样子。

这比单纯把截图交给模型更适合设计分析、开发交接和 Design-to-Code 场景。

2. 修改现有设计

当任务涉及修改时，Agent 会先把目标节点和必要的布局上下文复制成 Proposal，再执行后续操作。

目前支持的操作包括：

• 设置 Auto Layout、间距、尺寸和定位；
• 更新文本；
• 调整节点层级；
• 创建 Frame 或 Component；
• 修改 Instance 暴露的属性；
• 渲染修改结果供用户审查。

原来的设计节点仍然保留在画布上，用户可以直接把源设计与 Proposal 并排比较。

3. 从零生成设计

复杂页面可以使用 DesignPlan。

Agent 会先读取可用字体、变量、样式和组件，再提交一份完整的声明式设计计划。计划验证通过后，插件会一次性创建 Proposal；如果验证或应用失败，不会在画布上留下半成品页面。

DesignPlan v1 支持 Frame、Text、Rectangle、Ellipse、Line、Image、SVG、Clone 和 Instance，也支持 Auto Layout、文本 range、样式和变量绑定。

五、它是怎么连接 Agent 和 Figma 的？

从用户视角看，整个流程可以简化成五层：

Codex / Claude Code / Cursor
        ↓
Local Figma Agent MCP Adapter
        ↓
本机 Bridge Daemon
        ↓
Figma Desktop 开发插件
        ↓
当前 Design 文件的当前页面

读取任务的典型流程是：

选择节点
→ Agent 获取结构与样式
→ 渲染节点
→ 综合结构与画面进行分析

修改任务的典型流程是：

读取源设计
→ 复制目标和必要上下文
→ 创建独立 Proposal
→ 在 Proposal 中修改
→ 重新读取或渲染
→ 用户在 Figma 中审查

首次 MCP Adapter 启动时会按需启动本机 Bridge Daemon。多个本地 Agent 可以拥有独立的 stdio 会话，同时复用同一个 Figma 插件连接。

六、安装与配置

前置条件

当前版本需要：

• Windows；
• Node.js 20 或更高版本；
• Figma Desktop；
• Codex CLI 或 ChatGPT 桌面版中的 Codex。

本文以 1.0.0 为例。Agent Plugin、Figma 插件 ZIP 与 MCP npm 包必须使用相同版本。

第一步：安装 Agent Plugin

先在 PowerShell 中为 Codex 添加项目的 marketplace：

codex plugin marketplace add Lancasteerr/figma_bridge_agent --ref v1.0.0

然后在 Codex 会话中运行 /plugins，选择 figma-local-agent marketplace，安装 Local Figma Agent。ChatGPT 桌面版中的 Codex 也可以在插件浏览器中完成同样的安装。

安装后，Agent Plugin 会自动提供匹配版本的 stdio MCP Server 和 Local Figma Agent Skill，不需要再手写启动命令或重复注册同名 MCP Server。

第二步：导入 Figma 插件

从项目的 v1.0.0 Release 下载：

figma-agent-bridge-plugin-v1.0.0.zip

解压后，在 Figma Desktop 中依次选择：

Plugins
→ Development
→ Import plugin from manifest

然后选择解压目录中的 manifest.json。

第三步：完成首次配对

在 Figma 中运行 Local Figma Agent Bridge，保持插件窗口开启，然后执行：

npx -y figma-local-agent-mcp@1.0.0 pair

终端和 Figma 插件会分别显示一个六位短码。确认两边完全一致后，在插件中点击 Codes match。

第四步：验证连接

重启 Codex 或新建一个 Agent 会话，然后让 Agent 调用：

figma_status

正常情况下，它会返回当前 Figma 文档、页面、选择和 Bridge 能力，并能发现 Local Figma Agent Skill。

注意：每次更新插件都需要Clear pairing，重新回到第三步配对。

如果你使用 Claude Code、Claude Desktop、GitHub Copilot、Cursor 或其他本地 stdio MCP 客户端，请先阅读项目的安装方式总览与配置文档（configuration.md），再选择直接配置 MCP Server、Development build 或源码构建路径。

七、三个可以直接尝试的使用示例

下面的提示词可以直接交给已安装 Local Figma Agent MCP 的 Agent。实际结果会受到当前 Figma 文件中的节点、字体、变量和组件资源影响。

示例一：读取当前设计

先在 Figma 中选择一个 Frame 或组件，然后发送：

读取当前选择，说明它的节点层级、Auto Layout、字体、颜色、间距和主要视觉样式。结合渲染结果检查你的理解，但不要修改 Figma。

Agent 可能执行如下流程：

figma_status
→ figma_get_selection
→ figma_get_tree
→ figma_get_css
→ figma_render_node
→ 汇总设计分析

这里的重点不是要求 Agent 固定调用所有工具，而是告诉它：既要理解结构，也要用渲染结果检查自己的判断。

示例二：优化卡片 Proposal

在 Figma 中选择一张卡片，然后发送：

读取当前选中的卡片，把它复制为独立 Proposal。保持原有视觉风格，统一内部间距，强化标题与正文的层级，并检查文本是否使用一致的字体。完成后渲染 Proposal，向我说明具体修改了哪些内容，不要修改源节点。

这个示例可以体验 Proposal 复制、布局调整、文本更新和渲染检查的完整流程。

示例三：使用 DesignPlan 创建登录页

打开准备承载新设计的页面，然后发送：

使用 DesignPlan 创建一个桌面端登录页 Proposal。页面包含品牌区域、邮箱输入框、密码输入框、登录按钮、忘记密码入口和注册提示。优先复用当前页面已有的颜色变量、文本样式和按钮组件；先读取可用字体与设计资源，再验证完整计划，验证通过后应用并渲染预览。

这个示例用于体验资源读取、DesignPlan 验证和完整页面生成。

以上第二、第三个示例仅提供提示词，需要提前在设计稿中导入相关素材。你可以在自己的 Figma 桌面端中运行，并根据实际设计系统继续细化要求。

八、几个使用技巧

开始前先检查连接

先调用 figma_status，确认插件连接、当前文档、当前页面和选择状态，能减少大量无效排查。

同时读取结构和渲染结果

节点快照适合确认结构事实，渲染结果适合确认视觉表现。二者结合比单独使用其中一种更可靠。

简单修改使用 Proposal，复杂页面使用 DesignPlan

调整一张卡片的间距和标题，可以使用 Proposal 工具连续修改；创建包含大量节点的新页面，则更适合先验证完整 DesignPlan。

在提示词中明确任务边界

建议直接写清楚"只读分析""创建 Proposal"或"使用 DesignPlan"，减少 Agent 对任务类型的猜测。

在使用agent读取或修改设计稿时不要操作figma

在agent运行时操作figma会改变设计稿状态，有可能导致agent修改失败并重试，这会大幅增加token消耗量

Figma 插件和 MCP Server 保持同一版本

更新时需要同时替换 Figma 插件 ZIP 和 npm 包版本，不能把稳定版插件与 Development MCP Server 混用。

九、它适合哪些用户？

Local Figma Agent MCP 比较适合：

• 不想为了高频 MCP 使用升级付费席位的个人开发者；
• 使用 Codex、Claude Code、Cursor 的前端开发者；
• 希望让 AI 理解真实设计结构的设计师；
• 正在探索 Design-to-Code 工作流的个人或小团队；
• 希望研究或扩展 Figma MCP 的开源开发者。

当前版本主要面向 Windows、Figma Desktop 和本地 MCP 客户端。纯远程 Agent 无法连接本机 Bridge；项目暂不提供 Team Library 查询、远程传输、自动更新或特定前端框架的固定代码生成器。

十、总结

Figma 官方 MCP 提供了完整、成熟的官方生态。如果你需要 Remote MCP、Code Connect、Team Library，以及官方持续扩展的完整能力，官方方案依然最省心。

但如果你的核心需求是：

• 免费开源；
• 本地高频调用；
• 让 Agent 读取真实的 Figma 结构；
• 在可审查的 Proposal 中完成修改；

那么 Local Figma Agent MCP 提供了一条不同的路径。

它不是简单地把截图交给 AI，而是让 Agent 真正进入设计上下文，并参与"读取、分析、修改、生成、审查"的完整过程。

如果这个项目对你有帮助，欢迎体验、提交 Issue，也欢迎点一个 Star。

• GitHub：Lancasteerr/figma_bridge_agent
• 最新版本：GitHub Releases
• 安装配置：中文配置文档
• 问题反馈：GitHub Issues