手办收藏圈里常提到一种状态对着一柜子“塑料小人”提不起重新整理的劲头买新品的热情也断崖式下降这就是收藏冷淡期。设计工具的使用也会出现类似阶段——Figma 功能都知道但每次要改稿、导图、交接时总被重复问题绊住久而久之连打开客户端都变得抗拒。这篇文章不谈收藏而是借“冷淡期”这个话题记录一条把 Figma 工作流重新跑通的完整链路从客户端汉化、字体安装、图标导出 JSON到通过 MCP 让 AI 助手直接读取设计稿。整个练手项目用一个内部代号称呼爱丽丝Alice。给这套流程命名的目的是为了避免把文章写成零散技巧集合。日常开发里真正让人疲惫的往往不是某个功能不会用而是环境不一致、资源格式对不上、AI 工具拿到不到设计信息这些结构性痛点。只要把这些痛点一个个解决掉设计工具就会重新变得顺手。下面先解释为什么“冷淡期”通常不是动力问题而是流程问题。1. 从“冷淡期”说起为什么重新用 Figma 搭一套个人工作流1.1 冷淡期不是没动力而是流程太繁琐收藏玩家进入冷淡期的原因通常是藏品越来越多盒子和柜子占据空间拍照、除尘、回盒这些动作开始变成负担。对应到设计工具上Figma 使用者也经常陷入类似的恶性循环改了十几个版本开发拿到的却还是旧稿图标导出一遍又一遍命名每次都要重新统一想用 AI 辅助生成代码助手却看不到设计稿里的精确颜色和间距。问题越多越不想打开工具越不打开工具流程越生疏。这种状态下最大的风险不是出活慢而是开始用“先凑合能看”的心态做交付。真正让一个设计师找回状态的方式往往不是换工具而是把重复劳动压缩到最小。把 Figma 的环境、资源导出、AI 联动全部串成一条自动链路后日常交付会省掉大量机械操作剩下的时间才值得花在布局、节奏和视觉判断上。1.2 用“爱丽丝”项目验证一条完整链路在常见团队里设计稿交付经常卡在三个环节设计环境不一致有人用网页版有人用桌面客户端字体缺失时同一份文件在不同机器上渲染效果不同。图标资源要手动导出设计师逐个导出 SVG开发再手工整理命名和尺寸过程重复且容易出错。AI 工具看不到设计稿前端使用 AI 编程助手时助手只能看到代码不能直接读取 Figma 中的图层、样式和标注。爱丽丝项目要验证的链路就是统一 Figma 客户端与中文环境用插件把图标批量导出成 JSON通过 MCP 让 AI 客户端读取设计稿最终生成可落地的页面代码。这条链路每一环都有独立价值环境统一解决“为什么我打开和你不长一样”图标导出解决“开发到底该用哪个资源”MCP 接入解决“AI 凭什么知道我设计稿写的是什么”。1.3 这套流程适合谁、能拿到什么适合遇到以下情况的读者刚接触 Figma 中文环境想搞清楚汉化、语言包、客户端之间关系。想把 Figma 里的图标资源转换成前端可用的 JSON 数据但不想手工重复劳动。想在自己的 AI 编程工具里直接读取 Figma 设计稿但配置 MCP 时碰到 API 不可用、调用额度限制等问题。环境准备、关键操作、数据结构、MCP 配置、报错排查和可复用清单需要按一条完整链路串起来。示例代码用于说明实现思路落地时结合自己的项目名、团队命名规范和依赖版本再调整。下面从环境部分开始。2. 先对齐环境客户端、语言包、字体与项目结构2.1 Web 版与桌面客户端怎么选Figma 的界面按使用路径分成三类网页版、桌面客户端和移动预览端。只做临时查看时网页版够用但要做图标导出、插件开发和 MCP 联调推荐使用桌面客户端。原因是桌面端读取系统字体的机制更完整本地缓存和插件运行环境也更接近生产场景。使用方式优点需要注意的点Web 版无需安装、多设备同步快字体读取受浏览器限制系统字体不一定全部可用桌面客户端字体读取更完整插件运行更稳定需要下载安装更新频率较高移动预览端适合移动端实时预览不是完整编辑器不能做复杂编辑这里不是说网页版不能干活而是当你开始写 Figma Plugin、导出 SVG、接入 MCP 时桌面客户端能减少很多环境差异带来的干扰。个人练习项目可以随意切换团队项目建议固定一个主版本避免多人修改同一文件时出现“我这里正常你那里报错”的情况。2.2 汉化方案语言包、中文插件与安全取舍Figma 官方客户端目前没有开放内置语言切换界面默认是英文。中文用户主要靠几种方式获得中文界面社区汉化包、中文翻译辅助插件、浏览器翻译。三者的覆盖范围和安全级别不同。方案安装难度覆盖范围主要风险汉化补丁中菜单、面板较完整版本更新后失效非官方脚本存在注入风险翻译辅助插件低插件面板、局部菜单覆盖不完整浏览器翻译低网页版文本操作入口可能翻译错位选择方案时先想清楚字段安全再考虑界面习惯。Figma 文件里保存了大量未发布的设计稿和内部标注如果汉化补丁来源不可控执行了多余的网络请求或文件读取损失的不只是汉化功能。推荐优先使用翻译辅助插件或者选择脚本开源、能检查代码的汉化包。团队场景下更建议统一版本避免每个人安装不同补丁排查问题时无法对齐。注意下载非官方汉化包前要检查来源和授权。设计工具里保存的是未发布稿任何需要注入客户端的脚本都应该先确认它只做界面翻译不做额外行为。2.3 字体安装为什么设计稿里总是字体缺失“Figma 安装字体”是搜索里经常出现的问题根源在于 Figma 不负责安装字体它只读取操作系统已经安装的字体。设计稿打开后提示字体缺失不一定是设计文件坏了更可能是当前设备缺少对应字体。在桌面客户端中正确的检查顺序是先确认系统是否已安装该字体打开系统字体管理器检查。再确认字体是否对当前用户可见而不是只存在于另一个系统账户。如果是团队协作让成员统一安装同一版本的字体。如果只是临时预览可以在 Figma 中选择替代字体但不要覆盖原字体名避免污染设计文件。如果项目用到了特殊字体建议在团队页面说明里写清字体名称、字重和下载来源。这样新手加入时不需要反复询问“标题用的什么字体”也不会因为装了错误版本导致整份稿子看起来不对。2.4 建一个“爱丽丝”项目并规范图层命名操作目标建立项目目录把图层命名规范固定下来。在 Figma 首页点击 New project把它命名为“Alice Design System”进入文件后页面结构可以按下面方式组织Alice Design System ├── 01 Design Tokens ├── 02 Icons ├── 03 Components └── 04 Pages ├── Home └── Detail这个结构不是强制要求但它能让后续脚本处理“按页面导出图标”时少写很多判断逻辑。特别要关注图标图层的命名Frame 名称、导出切片的名称最终会变成 JSON 里的图标 key。命名混乱时前端拿到的数据结构也会乱导致组件映射出错。建议提前约定一套规范图标统一放在 Icons 页面。每个图标一个独立 FrameFrame 名称使用小写连字符例如icon-arrow-right。尺寸信息不要只写在 Frame 名里需要在导出时由脚本读取宽高避免文本解析出错。组件类图层用 PascalCase命名按“组件/状态”层级展开例如Button/Primary/Default。规范定好后下一步就可以写图标导出逻辑了。3. 把图标导出成 JSON从选中图层到前端可用的数据结构3.1 为什么需要图标转 JSONWeb 开发里图标不只是图片更是一种可遍历的资源配置。常见需求是前端要有一个图标清单包含名称、路径、尺寸、语义分组方便在组件里动态渲染也方便做图标搜索和权限控制。如果手动导出再手写 JSON数量一多就会失控。“Figma 如何将图标转换成 JSON”本质上要解决两件事从 Figma 文件里拿到图标的矢量数据SVG 路径再把名称、尺寸、文件标识和 SVG 数据整理成结构化 JSON。导出的 JSON 不一定只在页面渲染时用还可以接入组件文档、图标搜索工具或自动化测试。3.2 方式一手工导出 SVG 再批量转换学习阶段可以先手工完成一遍理解转换过程。在 Figma 中选中一个图标 Frame右侧 Export 面板把格式设置为 SVG点击 Export 导出。然后用一个脚本读取文件夹内所有 SVG生成 JSON。示例脚本使用 Node.jsconst fs require(fs); const path require(path); const svgDir path.join(__dirname, icons); const output []; fs.readdirSync(svgDir).forEach((file) { if (!file.endsWith(.svg)) return; const name file.replace(.svg, ); const content fs.readFileSync(path.join(svgDir, file), utf8); output.push({ name, svg: content, size: 24 }); }); fs.writeFileSync( path.join(__dirname, icons.json), JSON.stringify(output, null, 2) );这段脚本只做三件事扫描目录、提取文件名、组合 JSON。它没有处理尺寸和分组适合数量少、命名已经规范的情况。实际项目里可以引入更完整的处理库但先跑通最小链路更重要。3.3 方式二用 Figma Plugin API 直接导出手工方式适合只有几十个图标的时候图标多了就需要在 Figma 内部直接生成 JSON。使用 Figma Plugin API 可以读取当前选中的节点并导出 SVG。在 Figma 中创建插件菜单 Plugins - Development - New Plugin选择 Figma Design标准模板会生成manifest.json、code.js和ui.html。manifest.json示例{ name: Export Icons to JSON, id: export-icons-json, api: 1.0.0, main: code.js, editorType: [figma], permissions: [currentuser] }code.js示例figma.showUI(__html__, { width: 320, height: 120 }); figma.ui.onmessage async (msg) { if (msg.type export-icons) { const nodes figma.currentPage.selection; const result []; for (const node of nodes) { if ( node.type ! FRAME node.type ! COMPONENT node.type ! INSTANCE node.type ! VECTOR ) { continue; } const bytes await node.exportAsync({ format: SVG }); let text ; const chunkSize 0x8000; for (let i 0; i bytes.length; i chunkSize) { text String.fromCharCode.apply( null, bytes.subarray(i, i chunkSize) ); } result.push({ name: node.name, svg: text, width: node.width, height: node.height }); } figma.ui.postMessage({ type: result, data: result }); } };然后在ui.html里写一个按钮接收结果并输出到控制台button idexportExport JSON/button script document.getElementById(export).onclick () { parent.postMessage({ pluginMessage: { type: export-icons } }, *); }; window.onmessage (e) { const msg e.data.pluginMessage; if (msg.type result) { console.log(JSON.stringify(msg.data, null, 2)); } }; /script这里有几个关键点node.exportAsync返回的是Uint8Array需要用String.fromCharCode.apply转成字符串。对大数组使用分块转换可以避免调用栈溢出。图标建议统一放在同一个 Frame 内脚本只遍历当前选择避免误导出页面里的装饰元素。插件输出结果默认在 Figma Console 中查看落地时要保存到系统剪贴板或通过本地服务写入文件。3.4 JSON 字段设计和前端消费方式导出的 JSON 结构至少需要以下字段字段类型说明namestring图标名称用于组件 keysvgstringSVG 文本用于渲染widthnumber图标宽度heightnumber图标高度groupstring可选图标语义分组更好的做法是加入group字段让前端能按业务模块加载图标而不是一次性把所有图标打进主包。{ name: icon-arrow-right, svg: svg .../svg, width: 24, height: 24, group: common }前端渲染时可以把这段 JSON 加进图标组件interface IconData { name: string; svg: string; width: number; height: number; group: string; } function Icon({ data }: { data: IconData }) { return ( span className{icon icon--${data.name}} dangerouslySetInnerHTML{{ __html: data.svg }} / ); }使用dangerouslySetInnerHTML时要注意 SVG 来源。如果 JSON 来自设计团队的 Figma 文件风险相对可控如果图标数据来自第三方接口要先做白名单校验或转成组件模板避免注入。4. 接入 Figma MCP让 AI 客户端能直接读设计稿4.1 MCP 解决了什么问题MCPModel Context Protocol是一种让 AI 应用安全调用外部工具和数据的协议。放在 Figma 场景里它解决的是“AI 助手读不到设计稿”的问题。没有 MCP 时工作流通常是设计师截图开发看图AI 根据描述生成代码。设计稿里的精确颜色、间距、图层名和切图信息都在转换中丢失。接入 Figma MCP 后AI 客户端可以通过标准协议读取 Figma 文件的结构、图层、样式和 SVG 数据再结合代码仓库里的上下文生成更准确的前端代码。这套能力的价值在多页面项目里尤其明显。AI 读取到一个页面的 Frame 结构后能直接给出组件拆分建议而不是靠猜测生成一堆结构混乱的标签。4.2 安装和配置 Figma MCP Server实际项目里需要先准备一个 Figma 账号。一个可以访问目标文件的 Figma Personal Access Token。一个支持 MCP 的 AI 客户端例如 Claude Desktop、Codex 或同类开发工具。一个由社区或团队维护的 Figma MCP Server 端点。Personal Access Token 的创建位置一般在 Figma 账号设置的 Security 页面。创建时注意Token 拥有什么权限就按最小权限来不要把 Token 写进代码仓库、提交记录或公开配置。以常见 MCP 配置文件为例结构类似{ mcpServers: { figma: { command: npx, args: [-y, some/figma-mcp-server], env: { FIGMA_ACCESS_TOKEN: your-paste-token-here } } } }注意上面的命令和包名只是占位示例。具体包名和启动参数要以你选用的 MCP Server 文档为准不同团队封装的 Figma MCP Server 名字可能不同。配置完成后在 AI 客户端里新建会话输入“读取当前 Figma 文件的图层结构”。如果配置成功AI 会返回文件中的页面、Frame 和样式信息。如果返回空结果先检查 Token 是否有该文件访问权限。4.3 在 AI 工具中调用设计稿完成前端任务配置成功后调用方式取决于 AI 客户端实际支持的 MCP 工具名。实际使用中可以依次让 AI 做这些事列出Alice Design System文件中Home页面的 Frame 列表。读取icon-arrow-right的 SVG 数据。根据设计稿的间距和色板生成 React 组件。这些操作的价值在于设计稿不再需要人工转述。但也要注意MCP 读取的是 Figma 文件的表示层数据不一定包含业务含义。AI 生成代码时对图层名和组件名非常敏感。如果图层