简介Sketch Data Faker 是一款面向 UI/UX 设计师和前端开发者的 Sketch 开源插件可为设计稿批量生成 130 余种可定制的随机占位内容覆盖全名、邮箱、电话、段落等常用数据类型并支持符号内部刷新与 Sketch Libraries 导入符号联动尤其适合制作数据仪表盘、列表页及表格原型。资源包共 17 个文件、919KB主体为 5 个 JavaScript 源码文件与 4 个 JSON 配置文件另附插件安装包、Markdown 说明文档、PNG 图标及构建配置等结构直观便于直接安装或二次开发。当前已有 159 人学习/下载。通过本包可获得完整插件源码、安装文件与配置示例既能开箱即用地在 Sketch 中注入随机数据也可参考其插件 API 与 Faker.js 集成方式拓展自定义数据类型减少原型阶段手工造数成本。1. 设计稿里的假数据让评审折半sketch-data-faker 在 Sketch 里能干什么一次后台系统改版几十张界面的表格、卡片、个人信息全要填内容我坐在工位上手工编“王总、李经理、138xxxx”编到第三张页面就想摔键盘。更麻烦的是编出来的数据一眼假评审时候对方随手一指问“这个订单金额为什么全是整数”整个设计的可信度当场打折。sketch-data-faker 就是解决这个问题的一个跑在 Sketch 里的插件用 Faker.js 的 130 多条数据源生成智能占位内容选中文本图层按一下快捷键姓名、邮箱、日期、金额、地址随时换选中图片图层还能替换成头像或占位图。适合 UI 设计师、设计系统维护者也适合做演示项目时需要快速造一批 mock 数据的前端同学。2. 插件的骨架与加载原理manifest、handler 与 Sketch 的 JS API不少设计工具插件是黑匣子装上能用出了问题完全不知道从哪查。sketch-data-faker 不是那种东西它就是一段运行在 Sketch 内的 JavaScript通过 Sketch JavaScript API 读写当前文档的图层把 Faker.js 生成的文本或图片地址写回去。搞懂这个基础结构装错插件、命令不出现这类翻车问题就能自己排查。2.1 插件的骨架manifest.json 把菜单和脚本串起来Sketch 插件的固定形态是「一个文件夹 manifest.json 若干 JS 文件」。manifest.json 是插件的身份证声明了插件叫什么、菜单里显示什么、按下菜单命令后执行哪个 JS 函数。sketch-data-faker 的 manifest 结构大致长这样{ name: sketch-data-faker, description: 智能占位符内容插件基于 Faker.js 提供 130 数据类型, author: example, version: 1.0.0, identifier: com.example.sketch-data-faker, commands: [ { name: 填充选中图层, identifier: fill-selected, script: plugin.js, handler: fillSelected, shortcut: ctrl cmd d } ], menu: { title: Data Faker, items: [fill-selected] } }这段 JSON 里有几个字段决定插件能不能被 Sketch 正确识别。identifier 是全插件的唯一 ID多插件冲突时最容易出问题建议带域名反写前缀。commands 数组里的每个命令必须同时具备 script 与 handlerscript 是相对于插件根目录的 JS 文件名handler 是文件里的全局函数名两者拼错一个菜单能出现但点击会直接报错。shortcut 是可选的快捷键声明Sketch 要求同时按下三个修饰键加一个普通键格式如上面示例注意不要和 Sketch 内置快捷键冲突。manifest 只是入口真正干活的是 plugin.js。Sketch 通过 CocoaScript 桥接 JavaScript 与原生框架插件运行时可以从 context 拿到当前文档、选中图层、页面环境。常见的取选中图层的写法是 context.document.selectedLayers()拿到的是图层数组后续遍历时还要再调 layers() 转成普通数组。理解了这个调用链你就知道插件并不是魔术它和你用 AppleScript 控制 Sketch 是同一层级的机制。2.2 安装与加载手动放置目录和开发者模式macOS 下 Sketch 读取插件的目录是固定的~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/。把包含 manifest.json 的整个文件夹丢进去重启 Sketch 就完成了注册。我在开发调试时习惯走命令行复制带备份避免一个写坏的配置把原插件覆盖掉# 备份旧版插件目录 mkdir -p ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins.bak mv ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/sketch-data-faker \ ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins.bak/ # 复制新版插件文件夹 cp -R ./sketch-data-faker \ ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/这段命令做了两件事先把旧版本移到备份目录再复制新版本进插件目录。注意路径里有空格所以目录名要加反斜杠转义。如果之前没装过这个插件跳过备份命令直接复制即可。复制完成后重启 Sketch菜单栏 Plugins 里应该会出现 Data Faker 子菜单。开发期还有更快的迭代方式Sketch 的 Preferences 里打开 Enable Developer Mode然后菜单栏 Plugins Development 会多出 Reload Plugins 入口。改完 plugin.js 后点一下就能重新加载不需要反复重启 Sketch。日志输出也有专门入口Sketch 会把插件里的 log() 打印到 Plugins Development Show Console 里。刚开始写插件时我习惯在每个函数的入口打一条 log 确认执行路径。比如填充函数里先输出当前选中图层数// 在 handler 里输出选中图层数量确认插件被正确调用 function fillSelected(context) { var document context.document; var selection document.selectedLayers(); log(选中图层数: selection.count()); // 后续处理... }这条 log 能快速区分两类问题菜单点击后完全没有输出说明 manifest 或 handler 映射有问题有输出但数据没填充才是后续填充逻辑的锅。这个分批定位的思路能省下不少排查时间。3. 填充实战文本图层、图片图层与 130 数据类型怎么落到画布安装只是开始真正要解决的是「选中什么图层、按什么逻辑填什么内容」。sketch-data-faker 的交互设计很简单选中画布里的图层运行菜单命令插件按图层类型自动分发。但分发逻辑和边缘情况需要拆开看。3.1 按图层类型分发一次选中多图层也不乱Sketch 图层对象有明确的类型标识文本图层是 MSTextLayer位图图层是 MSBitmapLayer形状组是 MSShapeGroup普通分组是 MSLayerGroup。填充逻辑的第一步就是遍历选中图层并逐层判断类型不同类型走不同的数据策略// plugin.js 中按图层类型分发填充逻辑 var faker require(faker); // Faker.js 通过 npm 安装后即可 require function fillSelected(context) { var document context.document; var selection document.selectedLayers(); var layers selection.layers(); for (var i 0; i layers.length; i) { var layer layers[i]; if (layer.className() MSTextLayer) { fillTextLayer(layer); } else if (layer.className() MSBitmapLayer) { fillBitmapLayer(layer); } else if (layer.className() MSShapeGroup) { fillShapeLayer(layer); } } }这段代码的逻辑核心是「按类型分派而不是按图层名分派」。原因很实际设计稿里的图层名往往不规律有叫“姓名”的、有叫“user_name”的还有干脆没改名的但类型是稳定的文本图层就是要填文本图片图层就是要换图。实际开发时每个分支函数里再根据图层名做细粒度匹配这样组合起来既稳定又灵活。3.2 文本图层填充保留样式只替换字符串文本图层填充最忌讳的是把整个图层重建一遍那样会丢失字色、字号、字距。正确做法是只动字符串内容保留样式对象// 填充文本图层根据图层名推断数据类型未命中则回退到随机句子 function fillTextLayer(layer) { var name layer.name() || ; var rule matchRule(name); // 从配置中找当前图层的映射规则 var text rule ? faker.fake(rule) : faker.lorem.sentence(); layer.setStringValue(text); // 只替换内容不重建图层 }这里的细节在于 matchRule 与 faker.fake。matchRule 是读取配置文件、返回一个 Faker.js 模板字符串的函数比如图层名为 user_email 时返回{{internet.email}}。faker.fake 则负责把模板字符串解析成真实数据支持多字段组合比如{{name.lastName}}{{name.firstName}}能拼出中文姓名。用 setStringValue 写回时文本样式全部保留只是字符串变了。如果图层不在编辑态Sketch 偶尔会拒绝写入我一般会在写入前把图层变成可编辑状态或者先记录并恢复编辑状态。3.3 图片图层填充远程地址与占位图策略图片图层分成两类一类是真正的位图图层MSBitmapLayer另一类是形状组里加了图片填充的图层MSShapeGroup。位图图层的填充直接设置远程图片 URL// 位图图层替换为随机头像图片使用 placeBezier 指定拉伸区域 function fillBitmapLayer(layer) { var avatarUrl faker.image.avatar(); // 返回 128x128 的头像地址 layer.setImageURL(avatarUrl, 0, 0, 1, 1); }setImageURL 的后四个参数是比较容易被忽略的它们定义了图片在图层里的填充位置与拉伸比例依次是 x、y、宽度比例、高度比例。传 0, 0, 1, 1 表示图片填满整个图层边界等比缩放由 Sk 再解释一下helper的调用逻辑matchRule 最后一行返回{{our_project}}faker.fake 就会把这个模板解析成刚才定义的数组里的随机一项。所有业务里出现频率高的专属字段都可以按这种套路收敛到自定义 JSON 里不需要每次复制粘贴。4.3 格式化与模板组合从单字段到整句整段单字段填充只是基础实际设计稿里更多是「一段话里有多个变量」的场景。Faker.js 的模板引擎支持在一条字符串中组合多个数据源这是 sk etch-data-faker 生成智能内容的底气所在// 使用模板组合生成订单摘要姓名 订单号 金额 var tpl {{name.findName}} 刚刚提交了订单 {{finance.amount}} 元; layer.setStringValue(faker.fake(tpl));模板里每个{{xxx.yyy}}对应 Faker.js 的一个方法路径fake 函数会一层层解析。日期类数据还能接函数参数比如要生成最近一段时间内的随机日期faker.date.between(2024-01-01, 2024-06-30)它返回 Date 对象需要.toLocaleDateString()转成字符串再拼进模板。金额类数据默认带小数位金融风控页与普通的商城列表页对金额格式的要求不一样前者可以用finance.amount(2, 10000, 5000)控制小数点与区间后者直接用commerce.price更省事。我一般会在配置里预置十几个常见模板比如「{{name.findName}} 的 {{company.companyName}} 账户」写进 JSON 的 templates 字段在 matchRule 命中 key 后直接取用。这样设计稿里同一种业务字段在不同页面里呈现出不同文案视觉不重复演示效果会自然很多。5. 避坑与排查装完不显示、中文乱码、映射不命中的 5 个现场按 130 数据类型这个标题下载插件的人多真正用起来不踩坑的少。以下是几个高频故障现场全部来自实际使用与开发过程中的记录按「现象 - 原因 - 解决」直接对应。5.1 菜单栏里根本没有 Data Faker现象插件目录放对了Sketch 也重启了但 Plugins 菜单下找不到入口。原因一manifest.json 的 JSON 格式不合法。插件目录里多一个逗号、少一个引号Sketch 会静默跳过整个插件不给你任何报错提示。原因二identifier 与其他已安装插件冲突Sketch 只加载后注册的一方。解决先做 JSON 校验。在终端里执行python3 -c import json; json.load(open(manifest.json))输出报错信息就能定位语法问题。再把 identifier 换成自己项目的域名反写形式例如更具体的com.yourname.datasketch避开常见冲突。最后重启 Sketch 再看 Plugins 菜单。5.2 填充出来的中文全部变成问号现象用{{name.findName}}生成数据画布里出现的是「???」。原因plugin.js 文件保存时不是 UTF-8 编码或者 Faker.js 的 locale 没有正确加载Faker 默认走英文数据中文资源缺失时会退化成乱码。解决确认 JS 文件用 UTF-8 无 BOM 保存macOS 自带的文本编辑容易弄成 UTF-16。其次在 plugin.js 顶部显式加载中文 localevar faker require(faker/locale/zh_CN);最后用faker.locale打印当前 locale 值核对是否真的切换成功。5.3 选中图片图层按快捷键没反应现象文本图层填充正常位图图层完全无动作也不报错。原因Sketch 图层类型判断踩坑。场景一是图层被打了组外层是 MSLayerGroup内层才是位图遍历时看到外层类型就跳过了场景二是形状组用了图片填充但 className 是 MSShapeGroup走了 shape 分支该分支没有实现图片替换。解决遍历时写一个递归函数遇到 MSLayerGroup 就下钻到子图层再判断MSShapeGroup 分支里判断是否有图片填充样式有就同样替换图片资源。调试时先用 log 打印每个图层的 className比盲猜类型高效得多。5.4 快捷键按了没反应菜单点却有用现象菜单点击能正常填充快捷键却完全无效。原因Sketch 内置快捷键优先级更高或者同一个快捷键被其他插件占用。解决打开 Plugins Manage Plugins检查冲突项。最稳妥的办法是不依赖快捷键只在 manifest 里声明快捷键改用菜单操作如果团队多人共用一套插件配置建议快捷键统一走ctrl cmd d这种低频组合不要碰cmd shift p这类 Sketch 高频键位。5.5 图层名为 user_email 却不命中映射现象配置里写了user_email: {{internet.email}}图层名也叫 user_email填充时却走了 fallback 随机句子。原因matchRule 匹配逻辑和图层名实际内容对不上。图层名带后缀是最常见的比如画布里的文本图层名是「user_email_text」或「user_email / 标签」大小写混排、连字符与下划线混用导致严格相等匹配失败。解决matchRule 内部做归一化处理。先转小写再用正则把[^a-z0-9]全部替换成空字符串最后做包含匹配而不是全等匹配。例如user_email_text归一化成useremailtext配置 key 的规则也做同样归一化然后判断图层名是否以规则前缀开头。这样哪怕图层名改了后缀映射依然能命中。6. 进阶批量填充、Symbol 联动与数据工厂的验证习惯基础的选中填充只是单个图层的手工操作真正让 sketch-data-faker 产生工程价值的是「批量处理」与「模板复用」。我比较推荐的做法是维护一份固定的「字段图层名规范」所有需要填充的文本图层统一命名成df_字段key前缀Symbol 内的文本通过 override 命名同样遵循这套规则。然后插件提供一个「填充全画板」命令遍历当前页面所有图层对名字以df_开头的文本层自动套用配置映射。这样设计稿里凡是打了标记的图层一次运行全部填充完毕效率和一致性都远超手工逐层操作。配置层面还值得做的一步是把「字段 key 与模板」拆成两套 JSON字段 key 负责告诉插件填什么模板负责决定生成什么样的文案。改造后同一套设计稿在中文演示、英文演示、数据脱敏演示之间只需要切换 locale 和模板 JSON插件代码一行不用动。配合 Symbol 实例的 override本质上你就有了一套可控的 mock 数据工厂。测试时可以先跑一次批量填充然后检查所有图层里是否还残留{{或者df_前缀这能快速发现映射遗漏的图层。这个插件我用了一周后形成的一个习惯是每次把新版插件丢进目录前强制走一遍 JSON 校验 空文档冒烟测试。先校验 manifest 和 config 的 JSON 合法性然后新建空白 Sketch 文档画一个文本层和一个位图层跑一次全流程填充确定不报错再丢进正式目录。这套检查流程后来帮我挡下了不少「同事说插件坏了但其实是文件没存对」的问题。希望帮到你。本文还有配套的精品资源点击获取