文章目录一、 前置准备安装 Figma 桌面客户端操作步骤二、 下载 Figma-local-MCP 运行程序 导出插件2.1 打开项目 Release 资产页2.2 下载对应 Windows 文件2.3 文件存放整理三、Figma 桌面导入本地导出插件Framelink Exporter操作步骤四、 Figma 导出设计稿本地缓存JSON 图片资源4.1 导出配置说明4.2 执行导出五、 启动本地 MCP HTTP 服务5.1 启动方式5.2 启动校验六、Trae 配置 SSE 类型 MCP 服务对接本地 Figma 缓存6.1 Trae MCP 配置步骤七、Trae 指令读取本地设计稿一键生成前端页面7.1 通用生成指令Vue3TSSCSS直接复制发送7.2 单页面精准生成指令仅解析订单页7.3 更新设计稿迭代流程八、常见报错完整排查8.1 Trae MCP 一直显示「准备中」8.2 MCP 提示找不到设计缓存8.3 Windows 杀毒拦截 exe 程序8.4 端口 3333 被占用8.5 Figma 导出按钮灰色无法点击解决免费 Figma 账号每月 6 次云端 API 限额 429 报错纯本地文件读取零云端调用、不限次数全程图文步骤适配 Windows 系统文档信息适用人群前端开发者、Trae AI 代码工具使用者、Figma 免费 Starter 账号用户核心优势不走 Figma 云端 REST API无调用上限断网也能解析设计稿生成代码环境Windows 10/11、Figma 桌面客户端、Trae AI、Figma-local-MCP 二进制程序一、 前置准备安装 Figma 桌面客户端操作步骤前往 Figma 官网下载桌面客户端网页版无法使用本地插件必须桌面端安装完成后登录你的 Figma 账号免费 Starter 账号即可打开你需要解析的设计稿文件本文示例FluxStore 商城社区版二、 下载 Figma-local-MCP 运行程序 导出插件2.1 打开项目 Release 资产页仓库地址https://github.com/MiHarsh/Figma-local-MCP/releases2.2 下载对应 Windows 文件资产列表 6 个文件仅需下载 2 个其余源码包无需下载figma-local-mcp-win-x64.exeWindows 本地 MCP 服务主程序figma-plugin.zipFigma 本地导出插件压缩包2.3 文件存放整理新建目录D:\tools\figma\将下载的figma-local-mcp-win-x64.exe放入该目录在同目录新建缓存文件夹design-cache存放后续导出的设计稿资源解压figma-plugin.zip到单独文件夹备用导入 Figma三、Figma 桌面导入本地导出插件Framelink Exporter操作步骤打开 Figma 桌面客户端右击打开面板点击Plugins→Development选择Import plugin from manifest...在弹窗中选中解压后的插件文件夹内manifest.json完成导入导入成功后再次打开Plugins→Development点击Framelink Exporter启动导出面板四、 Figma 导出设计稿本地缓存JSON 图片资源4.1 导出配置说明打开 Framelink Exporter 面板配置参数SCOPE 导出范围Export selected nodes仅导出手动框选的页面 / 组件推荐文件体积更小Export current page导出当前整页所有内容ASSETS 资源导出全部勾选缺一不可✅ Render selected frames as PNG (2x)2 倍高清页面截图✅ Export icon subtrees as SVG图标矢量文件✅ Include image-fill bytes页面填充原图素材FILENAME自定义导出压缩包名称默认自动生成无需修改我选中的是11个页面导出4.2 执行导出返回 Figma 画布鼠标框选需要导出的页面 Frame必须选中否则 Export as ZIP 按钮灰色不可点切回导出面板点击 Export as ZIP 下载压缩包将下载的 ZIP 压缩包解压到 D:\tools\figma\design-cache\ 下生成独立子文件夹存放单套设计稿五、 启动本地 MCP HTTP 服务5.1 启动方式打开 CMD 命令提示符执行以下命令启动服务D:\tools\figma\figma-local-mcp-win-x64.exe --cache-dir D:\tools\figma\design-cache出现以下日志代表服务启动成功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/mcp5.2 启动校验浏览器访问http://127.0.0.1:3333/mcp页面正常加载代表端口服务正常运行。六、Trae 配置 SSE 类型 MCP 服务对接本地 Figma 缓存6.1 Trae MCP 配置步骤打开 Trae 软件右上角设置 → 左侧 MCP 菜单点击「 添加」→「手动配置 MCP 服务」删除默认模板粘贴以下标准 SSE 配置 JSON{mcpServers:{figma-local-cache:{type:sse,url:http://127.0.0.1:3333/mcp}}}保存配置重启 Trae MCP 服务列表显示「已连接」即对接完成七、Trae 指令读取本地设计稿一键生成前端页面7.1 通用生成指令Vue3TSSCSS直接复制发送读取本地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 更新设计稿迭代流程Figma 修改页面后重新使用 Framelink Exporter 导出新 ZIP解压覆盖 design-cache 内对应子文件夹旧文件重新发送生成指令Trae 自动读取最新本地缓存生成代码八、常见报错完整排查8.1 Trae MCP 一直显示「准备中」错误原因使用 commandexe 子进程配置程序为 HTTP 服务不支持 stdio 管道解决方案删除旧配置改用 type: sse 的 SSE 地址配置保持 CMD 服务窗口不关闭补充Windows 右键 Trae 图标以管理员身份运行规避进程权限拦截8.2 MCP 提示找不到设计缓存design-cache 文件夹路径不能包含中文、空格、特殊符号压缩包必须完整解压不可直接放入 zip 压缩包确认 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 / 图层再切回导出面板按钮自动激活