Figma智能批量产图平台产品设计
Figma智能批量产图平台产品设计
一、项目概述
1.1 需求说明
业务侧素材生产需求增长，尤其在商品单元、活动素材大量扩张后，同一套设计版式经常需要替换不同商品图、价格、利益点、标题和活动信息，生成大量近似但内容不同的图片。
传统流程通常依赖设计师手动改稿、导出、压缩和交付，存在以下问题：
- 重复劳动多，素材量一大就会占用大量设计资源
- 运营和设计之间需要反复沟通字段、文案、图片和导出规格
- 手工替换容易出现图文错配、漏改、导出错误等质量问题
- 设计稿难以沉淀为可复用资产，后续相似需求仍然要重新制作
因此提出一种 基于Figma的自动化素材生成方案，该方案的核心价值在于通过系统产品化的方式，降低素材团队与设计师之间的协作成本，同时最大限度提高图片素材的产量。
1.2 目标用户
设计师
设计师负责制作可复用的Figma素材模板，并将模板信息上传到产图平台。设计师关注的是模板复用能力和是否减少重复改图的工作。
素材团队
素材团队负责准备商品图、标题、价格、利益点等批量数据，并使用模板生成多张素材图。更加关注操作流程是否简单易懂、产图速度是否稳定、产图结果是否可用。
平台维护者
产品维护者需要与设计师共同定义模板规范、处理异常模板、沉淀质量标准。更加关注系统可维护性、模板质量、渲染成功率和后续扩展空间。
1.3 产品目标
- 通过自动化方式快速生成大规模投放所需素材，支持营销活动需求
- 通过高效的图片生成能力，提升商品素材的完整性和质量
- 减少设计团队对重复性工作的依赖，专注于高价值的创意性设计，更好地服务核心需求
- 通过技术实施，确保团队能够优化素材生成流程
1.4 MVP 目标
- 跑通模板导入到批量出图的完整链路
- 自动识别模板中的文字和图片变量，降低人工绑定成本
- 提供真实 HTML 预览和变量高亮，提升用户确认效率
- 支持 Excel 批量数据和图片上传，覆盖基础批量产图场景
- 支持任务进度、结果查看和批量下载
⚠️ 目前不做SSO单点登录、权限控制
⚠️ 不承诺所有Figma设计稿的100%还原和自适应布局
二、方案调研
方案1：Figma插件直接变量替换
Figma实时双向绑定，数据修改后页面也会进行变化，文字可以自适应，例如文本框宽高可以根据内容动态调整。
切换成其它类型例如矩形或图片则不会自适应，需要手动调整图层大小。
具体使用的函数有：
figma.currentPage.selectionfigma.getNodeByIdfigma.currentPage.exportAsync
结论：该方案不能实现复杂的自适应情况。
方案2：编程将设计稿转为HTML+CSS
Figma支持以节点树的形式导出设计稿元数据信息（类似JSON格式），包含节点类型、样式信息、空间位置信息等，为设计稿自动生成代码提供精确的数据支持。
获取节点信息：
显示一张设计稿的HTML：
存在问题：
- 设计稿转HTML的还原度不够高，所有位置都是绝对坐标，需要手动换算CSS
- 设计师需要将设计稿中节点设置为Auto Layout，转换代码时才可以还原为Flexbox布局
- 复杂渐变、阴影、模糊等样式效果需要精调CSS样式表示
- 嵌套层级关系需要递归解析
结论：总体方案较为可行。
方案3：Figma MCP + Claude Sonnet 4.6转换HTML+CSS
MCP返回的是"Agent可理解的上下文"，与Figma插件函数返回的详细节点信息是不一样的。这里将Figma MCP返回的内容让Claude Sonnet 4.6模型生成HTML代码。
最终结果：
存在问题：
- 背景图丢失
- 节点定位差距较大
- 复杂样式不够复原
- 有些图片没有拿到
后续也可以调节Prompt，但是目前的HTML效果不够好。
方案4：Anima、Locofy、Sloth D2C工具试用
Anima试用（支持React/Vue/Html + Css/TailwindCSS）：
Locofy试用：
Sloth D2C试用：
结论：
还原都存在差距，后续需要设计稿规范和样式微调。从付费和效果差距上来看，选定Sloth D2C比较合适，且它开源免费，提供MCP和Skill。
三、产品详情
3.1 产品结构
当前平台产品主要包含四个页面/模块：
- 模板列表：查看、进入和删除已导入模板
- 模板导入：上传 Figma 导出文件并生成模板
- 模板详情：预览模板、查看变量、填写数据、上传 Excel、创建任务
- 渲染任务：查看任务状态、产图结果和下载图片
3.2 产品使用页面介绍
1、插件页面
2、打开vscode插件日志服务
3、打开本地sloth服务
4、点击对应模板，生成HTML代码文件
5、导入模板
名称选填，不填则自定义模板ID为模板名称。下面对应三个sloth导出的文件。
6、模板列表
7、替换数据
8、渲染任务
3.3 核心流程
功能模块
1. 模板导入
用户上传Sloth D2C MCP导出的 absoluteHtml、nodeList、imageMap 三个文件，系统自动创建模板，并把模板中的 base64 图片上传到 OSS，替换为可访问的线上图片地址。
用户不需要手动处理图片资源和HTML文件，平台把Figma导出物转成可管理、可预览、可批量渲染的模板资产。
2. 变量自动识别与模板预览联动
从HTML中自动识别出可替换的变量放置到模板详情页右侧，左侧使用IFrame加载真实HTML预览。
点击右侧变量后，左侧预览中对应图层会被高亮，帮助用户确认变量和设计元素的对应关系。
3. 数据录入
支持两种方式：
- 手动填写多行数据：适合少量测试或小批量产图
- Excel 上传：适合批量导入商品、价格、文案和图片链接
图片支持：
- 本地上传
- 阿里云OSS图片链接
4. 批量渲染与下载
系统创建批量任务后，由后端队列逐条处理数据，使用 Puppeteer 渲染 HTML 并截图，结果上传 OSS。
任务支持查看进度、成功数量、失败数量、单张结果和批量下载。
3.4 技术架构
前后端分离的平台化产品：
- 前端：Vue 3 + Vite，负责模板导入、预览、变量编辑、数据录入和任务查看
- 后端：Express + Puppeteer，负责模板处理、变量识别、批量任务、截图渲染和 OSS 上传
- 数据存储：sql.js 文件型 SQLite，用于存储模板、变量、任务和任务明细
- 图片存储：阿里云 OSS，用于存放导入资源、用户上传图片和最终产图
四、当前约束
⚠️ 当前导出依赖
sloth-d2c-mcp一类 D2C 工具，普通布局、定位、蒙版等场景已经可以较好还原，但复杂样式仍然存在边界。
⚠️
stroke渐变、复杂非线性fill等样式，使用纯CSS仍然较难稳定复现,因此对设计稿规范仍有要求。
💡 项目中曾评估过局部 SVG fallback，但 MVP 阶段尚未正式接入，后续可以作为少量复杂节点的增强方案；如果使用范围控制得当，渲染时长增加应当是可接受的。
