完整避 Figma API 限流：Figma-local-MCP 本地缓存对接 Trae 全流程

1. 免费 Figma 账号被 429 卡住的那几天我决定彻底绕开云端 API如果你用 Trae 这类 AI 代码工具对接过 Figma大概率见过这个报错429 Too Many Requests。Figma 免费 Starter 账号每月只有 6 次云端 REST API 调用额度稍微多解析几个页面就爆了而且报错信息很含糊你甚至不确定是额度用完还是被限流。我试过把请求间隔拉长、换时间段重试都没用因为额度是按账号算的不是按频率算的。Figma-local-MCP 这个方案的核心思路很直接不走 Figma 云端 REST API改成用 Figma 桌面客户端里的本地插件把设计稿导出成 JSON 图片资源落到本地磁盘再由一个本地 MCP HTTP 服务读取这些文件Trae 通过 SSE 连上这个本地服务。整条链路零云端调用没有次数上限断网也能解析。适合三类人前端开发者、Trae 使用者、以及被免费额度卡住的 Figma Starter 用户。下面是我在 Windows 10/11 上跑通的完整流程包含可复制的配置骨架和限流触发前后的验证动作。2. 前置准备TaoToken 与本地环境的分工在动手之前先把两件事分清楚。Figma-local-MCP 负责的是「设计稿数据从哪来」——它把 Figma 文件变成你磁盘上的 JSON 和 assets。而 Trae 负责的是「用这些数据生成代码」。如果你在 Trae 里用的是需要 API Key 的模型服务那 Key 的获取和额度管理是另一条线跟 Figma 限流无关别混在一起排查。TaoToken 这边主要解决的是模型调用侧的接入问题。你可以先到 API Keys 页面生成一个 Key接入文档里有各语言的调用示例。如果你只是想让 Trae 读取本地设计稿生成页面模型侧用默认配置也能跑但如果你要长期做编码、跑 Agent 任务建议看一下 Coding Plan额度模型更适合高频调用。想先验证模型对话是否正常可以直接在模型对话页面发一条测试消息确认链路通了再往下走。这一步的意义在于把「Figma 数据源」和「模型调用」两条链路分开验证。很多人一上来就全配好结果 429 报错和模型报错混在一起排查成本翻倍。3. 下载与目录规划把 exe、插件、缓存分开放先去 Figma-local-MCP 的 Release 页面资产列表里有 6 个文件你只需要下载两个figma-local-mcp-win-x64.exe是本地 MCP 服务主程序figma-plugin.zip是 Figma 本地导出插件压缩包。其余源码包不用下。目录规划我建议这样后面所有路径都基于这个结构D:\tools\figma\ ├── figma-local-mcp-win-x64.exe ├── design-cache\ # 导出的设计稿缓存 │ └── fluxstore_xxx\ # 单套设计稿子文件夹 └── figma-plugin\ # 解压后的插件文件夹 └── manifest.json把 exe 放进D:\tools\figma\同目录新建design-cache文件夹。figma-plugin.zip解压到单独文件夹备用。注意design-cache路径不要包含中文、空格或特殊符号后面 MCP 找不到缓存十有八九是路径问题。4. Figma 桌面端导入本地导出插件网页版 Figma 用不了本地插件必须装桌面客户端。装完登录你的账号免费 Starter 就行打开你要解析的设计稿文件。导入插件的步骤在 Figma 桌面端右键打开面板点Plugins → Development选Import plugin from manifest...在弹窗里选中解压后插件文件夹内的manifest.json。导入成功后再次进Plugins → Development点Framelink Exporter启动导出面板。这一步容易卡在「找不到 manifest.json」——确认你选的是解压后的文件夹里的文件不是 zip 压缩包本身。5. 导出设计稿到本地缓存JSON 图片资源打开 Framelink Exporter 面板后配置这几个参数配置项推荐值说明SCOPEExport selected nodes仅导出手动框选的页面体积小Render selected frames as PNG (2x)勾选2 倍高清截图Export icon subtrees as SVG勾选图标矢量文件Include image-fill bytes勾选页面填充原图素材FILENAME默认自动生成不用改三个 Assets 选项必须全勾缺一个后面生成代码时就会缺图标或背景图。配置完回到 Figma 画布鼠标框选你要导出的页面 Frame——必须选中否则Export as ZIP按钮是灰色的点不动。切回导出面板点Export as ZIP下载压缩包后解压到D:\tools\figma\design-cache\下生成独立子文件夹。6. 启动本地 MCP HTTP 服务并校验打开 CMD执行D:\tools\figma\figma-local-mcp-win-x64.exe --cache-dir D:\tools\figma\design-cache启动成功的日志长这样Configuration: - PORT: 3333 (source: default) - HOST: 127.0.0.1 (source: default) - OUTPUT_FORMAT: yaml (source: default) Initializing Figma MCP Local Server in HTTP mode on 127.0.0.1:3333... [INFO] HTTP server listening on port 3333 [INFO] StreamableHTTP endpoint available at http://127.0.0.1:3333/mcpCMD 窗口全程不能关关了 MCP 连接就断。校验方式浏览器访问http://127.0.0.1:3333/mcp页面能正常加载就说明端口服务在跑。这一步是限流触发前的关键验证动作——先确认本地服务活着再去配 Trae出问题能快速定位是哪一层。7. Trae 配置 SSE 类型 MCP 服务打开 Trae右上角设置 → 左侧 MCP 菜单 → 点「 添加」→「手动配置 MCP 服务」删掉默认模板粘贴这段配置{ mcpServers: { figma-local-cache: { type: sse, url: http://127.0.0.1:3333/mcp } } }保存后重启 Trae 的 MCP 服务列表显示「已连接」就对接完成。这里必须用type: sse不要用 command exe 的子进程配置——那个程序是 HTTP 服务不支持 stdio 管道配错了会一直卡在「准备中」。8. Trae 指令读取本地设计稿生成前端页面对接完成后在 Trae 里发指令。通用生成指令可以直接复制读取本地 D:\tools\figma\design-cache\fluxstore_community_20260803-182159 文件夹内全部 Figma 缓存数据 解析图层尺寸、色值、字体、SVG 图标、PNG 图片资源生成标准 Vue3 TypeScript SCSS 页面代码 使用 script setup 组合式 API图片路径引用本地 assets 文件夹完整还原页面布局、圆角、阴影、间距 代码拆分 template/script/style 三段增加注释适配移动端页面尺寸。如果只想生成单个页面把范围收窄读取缓存 fluxstore_community_20260803-182159 内 My Orders 订单页面 Frame生成 Vue3 订单列表页面 引入 Element Plus 表格组件还原页面按钮、状态标签、分割线样式。设计稿迭代时Figma 改完重新用 Framelink Exporter 导出新 ZIP解压覆盖design-cache里对应子文件夹的旧文件重新发指令Trae 会读最新缓存。整个流程没有任何云端 API 调用所以不存在 429。9. 常见报错排查从「准备中」到端口占用Trae MCP 一直显示「准备中」九成是用了 command exe 的 stdio 配置。删掉旧配置改成上面type: sse的地址配置保持 CMD 服务窗口不关。如果还不行右键 Trae 图标以管理员身份运行规避进程权限拦截。MCP 提示找不到设计缓存检查design-cache路径有没有中文、空格、特殊符号确认压缩包是完整解压的不是直接把 zip 丢进去确认导出时三个 Assets 选项都勾了JSON 和 assets 资源齐全。Windows 杀毒拦截 exe把figma-local-mcp-win-x64.exe加进 Windows Defender 白名单恢复被隔离的文件。端口 3333 被占用CMD 执行netstat -ano | findstr 3333查到 PID在任务管理器里结束占用进程再重启 exe 服务。Figma 导出按钮灰色回画布框选至少一个 Frame 或图层再切回导出面板按钮自动激活。10. 限流触发前后的验证动作与长期接入建议限流触发前的验证动作有两个一是浏览器访问http://127.0.0.1:3333/mcp确认本地服务活着二是在 Trae 里发一条最小指令比如「列出缓存目录下的文件」确认 MCP 通道通。限流触发后你根本不会看到 429因为整条链路不碰云端 API——这也是这个方案最省心的地方。如果你后续要把这套流程接到更长期的编码或 Agent 任务上模型侧的额度管理建议单独规划。API Keys 页面可以生成和管理 Key接入文档里有完整的调用示例长期高频编码的话Coding Plan 的额度模型比按次调用更划算。先把本地 Figma 缓存这条链路跑稳再去调模型侧排查会清晰很多。