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

解决免费 Figma 账号每月 6 次云端 API 限额 429 报错，纯本地文件读取，零云端调用、不限次数，全程图文步骤，适配 Windows 系统

文档信息

• 适用人群：前端开发者、Trae AI 代码工具使用者、Figma 免费 Starter 账号用户
• 核心优势：不走 Figma 云端 REST API，无调用上限，断网也能解析设计稿生成代码
• 环境：Windows 10/11、Figma 桌面客户端、Trae AI、Figma-local-MCP 二进制程序

一、 前置准备：安装 Figma 桌面客户端

操作步骤

1. 前往 Figma 官网下载桌面客户端，网页版无法使用本地插件，必须桌面端
2. 安装完成后登录你的 Figma 账号（免费 Starter 账号即可）
3. 打开你需要解析的设计稿文件（本文示例：FluxStore 商城社区版）
   

二、 下载 Figma-local-MCP 运行程序 + 导出插件

2.1 打开项目 Release 资产页

仓库地址：https://github.com/MiHarsh/Figma-local-MCP/releases

2.2 下载对应 Windows 文件

资产列表 6 个文件，仅需下载 2 个，其余源码包无需下载：

1. figma-local-mcp-win-x64.exe：Windows 本地 MCP 服务主程序
2. figma-plugin.zip：Figma 本地导出插件压缩包
   

2.3 文件存放整理

1. 新建目录D:\tools\figma\
2. 将下载的figma-local-mcp-win-x64.exe放入该目录
3. 在同目录新建缓存文件夹design-cache（存放后续导出的设计稿资源）
4. 解压figma-plugin.zip到单独文件夹，备用导入 Figma
   

三、Figma 桌面导入本地导出插件（Framelink Exporter）

操作步骤

1. 打开 Figma 桌面客户端，右击打开面板，点击Plugins→Development
2. 选择Import plugin from manifest...
3. 在弹窗中选中解压后的插件文件夹内manifest.json，完成导入
4. 导入成功后，再次打开Plugins→Development，点击Framelink Exporter启动导出面板
   

四、 Figma 导出设计稿本地缓存（JSON + 图片资源）

4.1 导出配置说明

打开 Framelink Exporter 面板，配置参数：

1. SCOPE 导出范围：

• Export selected nodes：仅导出手动框选的页面 / 组件（推荐，文件体积更小）
• Export current page：导出当前整页所有内容

2. ASSETS 资源导出（全部勾选，缺一不可）
   ✅ Render selected frames as PNG (@2x)：2 倍高清页面截图
   ✅ Export icon subtrees as SVG：图标矢量文件
   ✅ Include image-fill bytes：页面填充原图素材
3. FILENAME：自定义导出压缩包名称，默认自动生成无需修改
   
   我选中的是11个页面导出

4.2 执行导出

1. 返回 Figma 画布，鼠标框选需要导出的页面 Frame（必须选中，否则 Export as ZIP 按钮灰色不可点）
2. 切回导出面板，点击 Export as ZIP 下载压缩包
3. 将下载的 ZIP 压缩包解压到 D:\tools\figma\design-cache\ 下，生成独立子文件夹存放单套设计稿
   

五、 启动本地 MCP HTTP 服务

5.1 启动方式

1. 打开 CMD 命令提示符，执行以下命令启动服务

D:\tools\figma\figma-local-mcp-win-x64.exe --cache-dir D:\tools\figma\design-cache

2. 出现以下日志代表服务启动成功，CMD 窗口全程不能关闭，关闭即断开 MCP 连接

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/mcp

5.2 启动校验

浏览器访问http://127.0.0.1:3333/mcp，页面正常加载代表端口服务正常运行。

六、Trae 配置 SSE 类型 MCP 服务对接本地 Figma 缓存

6.1 Trae MCP 配置步骤

1. 打开 Trae 软件，右上角设置 → 左侧 MCP 菜单
2. 点击「+ 添加」→「手动配置 MCP 服务」
3. 删除默认模板，粘贴以下标准 SSE 配置 JSON

{"mcpServers":{"figma-local-cache":{"type":"sse","url":"http://127.0.0.1:3333/mcp"}}}

4. 保存配置，重启 Trae MCP 服务列表，显示「已连接」即对接完成
   

七、Trae 指令读取本地设计稿一键生成前端页面

7.1 通用生成指令（Vue3+TS+SCSS，直接复制发送）

读取本地D:\tools\figma\design-cache\fluxstore_community_20260803-182159文件夹内全部Figma缓存数据， 解析图层尺寸、色值、字体、SVG图标、PNG图片资源，生成标准Vue3 + TypeScript + SCSS页面代码， 使用<script setup>组合式API，图片路径引用本地assets文件夹，完整还原页面布局、圆角、阴影、间距， 代码拆分template/script/style三段，增加注释，适配移动端页面尺寸。

7.2 单页面精准生成指令（仅解析订单页）

读取缓存fluxstore_community_20260803-182159内My Orders订单页面Frame，生成Vue3订单列表页面， 引入Element Plus表格组件，还原页面按钮、状态标签、分割线样式。

7.3 更新设计稿迭代流程

1. Figma 修改页面后，重新使用 Framelink Exporter 导出新 ZIP
2. 解压覆盖 design-cache 内对应子文件夹旧文件
3. 重新发送生成指令，Trae 自动读取最新本地缓存生成代码

八、常见报错完整排查

8.1 Trae MCP 一直显示「准备中」

错误原因：使用 command+exe 子进程配置，程序为 HTTP 服务不支持 stdio 管道
解决方案：删除旧配置，改用 type: sse 的 SSE 地址配置，保持 CMD 服务窗口不关闭
补充：Windows 右键 Trae 图标，以管理员身份运行，规避进程权限拦截

8.2 MCP 提示找不到设计缓存

1. design-cache 文件夹路径不能包含中文、空格、特殊符号
2. 压缩包必须完整解压，不可直接放入 zip 压缩包
3. 确认 Framelink Exporter 导出时全部 Assets 选项勾选，生成完整 JSON 与 assets 资源

8.3 Windows 杀毒拦截 exe 程序

解决方案：将 D:\tools\figma\figma-local-mcp-win-x64.exe 添加 Windows Defender 白名单，恢复隔离文件

8.4 端口 3333 被占用

CMD 执行命令查询占用进程并结束

netstat -ano | findstr 3333

在任务管理器根据 PID 结束占用程序，重新启动 exe 服务

8.5 Figma 导出按钮灰色无法点击

解决方案：返回 Figma 画布，框选至少一个 Frame / 图层，再切回导出面板，按钮自动激活