简介该插件是一款面向 Sketch 设计师与前端开发者的智能占位符生成工具基于 Faker.js 打造能向指定图层、符号以及从 Sketch 库导入的符号中插入随机且可控的模拟内容。内置 130 多种数据类型涵盖全名、邮箱、电话、段落等常见字段可为每个图层单独指定类型并支持反复刷新以获得同一类型的不同版本非常适合快速填充表格、列表或设计稿演示数据。资源包共 17 个文件以 JS 脚本和 JSON 配置为主辅以 PNG 图标、说明文档等整体约 919KB结构清晰便于二次开发和自定义扩展。已有 159 人学习下载适合需要提升设计稿真实感或研究插件开发的读者可直接安装体验也可参考源码学习 Faker.js 与 Sketch 扩展的整合思路。1. 交付前两小时还在手敲假数据sketch-data-faker 的 130 种解法做过 UI 交付的人都有这种经历画板上的姓名、地址、邮箱全靠手敲敲完还总被开发问“这个数据格式真实吗”。sketch-data-faker 是一个 Sketch 插件它把 Faker.js 的生成能力搬进 Sketch 面板为模型提供 130 多种智能占位符内容——从姓名、公司、日期到商品名、价格、颜色甚至黑客用语和车辆信息。你只需要选中文本图层点一下填充几秒内整块画板就有了看起来完全真实的数据。它适合产品设计、前端联调和需要做演示数据的一切场景配好一份 JSON 映射后团队里不太会写代码的同事也能一键替换整套 mock 数据不需要理解 JavaScript 内部逻辑。2. 理解数据生成链路从 Faker.js 的 130 种类型到 Sketch 图层的映射链2.1 插件运行机制manifest.json 如何把 JS 挂进 Sketch 菜单Sketch 的插件机制在 macOS 上很朴素一个文件夹加一个 manifest.jsonSketch 启动时扫描插件目录把命令注册到菜单栏。sketch-data-faker 的核心就是一个“用假数据填充选中图层”的菜单命令命令触发后执行对应 JS 函数函数可以访问当前文档、选中图层和文本内容。我第一次拆这类插件时也在找入口后面发现跟看 Web 项目看 package.json 一样先看 manifest.json 的 commands 数组入口函数就写在 script 和 handler 里。{ compatibleVersion: 3.0.0, identifier: dev.datafaker.sketch.plugin, name: Data Faker, commands: [ { name: Fill Selected Text with Mock Data, identifier: fillSelectedText, script: src/command.js, handler: onFillSelected } ], menu: { title: Data Faker, items: [fillSelectedText] } }这份配置里compatibleVersion 对应 Sketch 支持的插件 API 版本我这里写 3.0.0 是占位实际按你本机版本调整版本过低时整个命令会变灰identifier 要全局唯一团队里多人开发插件时别重复script 指向入口文件handler 是文件里 export 的函数名。menu 决定命令出现在哪个菜单项下快捷方式可以在 macOS 系统设置里再绑但命令本身能不能被调用只看这几处写没写对。老插件文档里常见的是直接给 handler 传一个 function这种写法在当前版本也能跑但官方推荐把函数写在单独脚本文件里方便复用和单元测试。为什么能直接在插件代码里 require(sketch)因为 Sketch 运行时把官方 API 包挂进了全局require 到的不是 npm 上的第三方包而是 Sketch 自己的内置模块。同理sketch-data-faker 在安装包里放了一份 Faker.js 打包产物require(faker) 实际加载的是本地依赖而不是网络请求。这个差异排查问题时很重要一旦看到 module not found十有八九是打包产物缺失或路径变了。2.2 130 多种类型从哪来Faker.js 的域与方法Faker.js 把假数据按业务域划分每个域下面有若干个具体方法。name 域下有 findName、firstName、lastName、jobTitleinternet 域下有 email、userName、domainNamecommerce 域下有 productName、price、departmentfinance 域下有 account、bitcoinAddressdate 域下有 past、future、between。sketch-data-faker 的做法是把这些方法整理成白名单在插件面板的下拉列表里一项一项排出来。选中类型后插件调对应方法把返回值转成字符串再写回图层。所谓 130 多种指的是白名单里的方法数不是模板数这一点跟“130 套模板”有本质区别。Faker.js 域代表方法输出示例常见用途namefindName / jobTitle王芳 / 前端工程师用户列表、名片、团队页internetemail / userNameshanshan.liexample.com注册表单、联系人列表addresscity / streetAddress湖心路 88 号收货地址、门店信息commerceproductName / price智能手环 / 299.00商品列表、订单明细datepast / between2024-06-18订单时间、日志摘要financeaccount / transactionType6222 0000 8848 / 转账钱包、交易记录vehiclemanufacturer / fuel某品牌 / 纯电动汽车资讯、预约页面hackerphrase / abbreviation连接辅助以太网端口极客风格演示页这 130 多个方法里有一部分并不适合直接塞进文本图层。比如 random.arrayElement 返回的是数组元素你必须自己传数组进去image.imageUrl 返回的是图片 URL不能当普通文本展示。插件在整理白名单时会把这类方法过滤掉只留“返回字符串、无参或参数可选”的稳定项。如果你在配置里写了一个返回数字的方法插件会先按字符串处理如果方法本身需要必选参数插件不会替你猜测会返回 null 并走兜底逻辑。所以填配置之前最好先在 Node 里跑一遍该方法确认返回值类型。2.3 数据流JSON 配置 → 匹配图层 → 生成并回写sketch-data-faker 和普通随机文本工具拉开差距的地方不是它调用了 Faker.js而是它有一套“按图层名映射”的配置机制。你可以写一份 JSON声明“图层名叫什么、绑什么类型、生成时传什么参数”。填充时插件遍历当前页面所有文本图层拿图层 name 去配置里匹配命中后调用对应生成规则把结果写进 layer.text。整个过程分三层配置层只描述映射关系生成层只负责产出字符串写入层只负责操作 Sketch 对象。这样设计还有一个好处数据源从 Faker 换成真实业务字段时配置文件不用大改只替换生成层实现。{ layouts: [ { match: 用户姓名, type: name.findName, locale: zh_CN }, { match: 用户手机, type: phone.phoneNumber, format: 1## #### #### }, { match: 注册时间, type: date.past, params: { years: 3 } } ] }这里的 match 支持精确匹配和正则比如 用户(姓名|昵称)$ 可以同时命中两种图层type 是必须的写成 Faker.js 的域.方法locale 用于 Faker 生成时会话级多语言切换format 做格式化手机号格式里 # 会被替换成数字params 对象会展开成 Faker 方法的参数。需要注意params 里参数名必须和方法签名一致date.past 接收的是 options 对象里面有 years 字段写错不会报错但会退化成默认随机时间这类无声错误最难排查。这套配置机制放到团队里的意义在于设计、前端、测试可以共用同一份 JSON。设计改版时只改配置文件不碰插件代码。下一章我会从安装开始讲一份能跑起来的完整配置长什么样。3. 安装与配置把 sketch-data-faker 接进现有设计流程3.1 安装zip 包、插件目录与首次运行安装 Sketch 插件有两种方式。一种是下载 .sketchplugin 包双击Sketch 自动安装另一种是把源码目录放进插件目录适合需要看源码或二次开发的场景。sketch-data-faker 这两种方式都支持区别在于双击安装的是打包后的产物放源码目录则要求你本地能处理 npm 依赖。团队环境里建议用第一种开发环境里用第二种不要把两个混在一起否则容易出现“明明改了源码插件跑的却是旧包”的怪问题。# 把解压后的插件目录放到 Sketch 插件目录 mkdir -p ~/Library/Application\ Support/com.bohemia.sketch/Plugins/ unzip sketch-data-faker-master.zip -d ~/Library/Application\ Support/com.bohemia.sketch/Plugins/ # 确认目录层级最外面一层不能多套一层同名文件夹 ls ~/Library/Application\ Support/com.bohemia.sketch/Plugins/这里最关键的是路径~/Library/Application Support/com.bohemia.sketch/Plugins/ 是 Sketch 扫描插件的固定目录漏写一层子目录就检测不到。macOS 的 Gatekeeper 偶尔拦截未签名插件现象是双击没反应去 系统设置-隐私与安全性 里手动允许即可。安装完重启 Sketch菜单栏顶部会多一个 Data Faker 菜单说明命令注册成功没出现就打开 Plugin Manager 看错误日志比盲猜路径快得多。提示Sketch 会在启动时扫描插件目录装完新插件后建议重启一次菜单栏出现“Data Faker”项才算注册成功。如果安装的是源码包先检查包里有没有 package.json 和 node_modules。部分发行版为了减包体积没有带 node_modules运行时会报 require(faker) 找不到。常见做法是进插件目录执行 npm install装完重启 Sketch。每次安装新依赖后命令菜单可能不会自动刷新需要重启一次 Sketch。这个坑很容易被忽略尤其当你只改了依赖没改代码时。3.2 配置数据模型通过 JSON 文件决定哪个图层填什么安装完的默认配置只能给你随机数据真正好用要靠一份围绕项目写的映射 JSON。拿一个典型用户列表页举例画板上有“用户名”“手机号”“注册时间”三个文本图层对应配置可以这样写{ locale: zh_CN, tokenPrefix: {{, tokenSuffix: }}, mappings: [ { match: 用户名, faker: name.findName }, { match: 手机号, faker: phone.phoneNumber, format: 1## #### #### }, { match: 注册时间, faker: date.past, params: { years: 2 } } ], fallback: lorem.word }match 用的图层名精确匹配多个模拟页面共享同一套配置时图层命名规范就很重要这一点后面避坑章还会讲。tokenPrefix 和 tokenSuffix 是模板占位符因为你不可能每建一个图层都去写匹配规则更快的办法是图层文本直接写“{{用户名}}”填充时插件会识别占位符用配置规则替换内容。fallback 是兜底类型图层名匹配不到任何规则但又是文本图层时给它生成一个短单词避免出现大面积空白。字段作用示例locale生成数据使用的语言区域zh_CN / en_USmappings图层名到生成规则的绑定数组见上文fallback未命中映射时的兜底类型lorem.wordtokenPrefix / tokenSuffix占位符包裹符号{{ / }}maxLength结果最大长度超出截断20这些字段都不是必填的但 fallback 建议一定配置因为图层命名总有不规范的时候。maxLength 是针对长文本的lorem.paragraph 如果直接填到标题图层会把版式撑爆所以标题类映射建议配 maxLength后面实战章会讲怎么按标题和正文给不同的截断策略。3.3 自定义数据源不依赖 Faker.js 也能喂数据业务字段时常需要特定数据集比如内部职级、预设城市、合规的假身份证号。这些不适合用 Faker 随机生成要么规则复杂要么数据必须来自给定列表。sketch-data-faker 的自定义 source 接口就为这种情况留了口子配置文件里 source 字段指向一个本地 JS 文件插件优先加载它拿不到值再退回 Faker。// 自定义数据源示例从固定列表里按字段名取值 const cities [示例市, 湖心区, 桥北区] const positions [初级设计师, 中级设计师, 高级设计师] export function generate(field, params) { if (field city) { return cities[Math.floor(Math.random() * cities.length)] } if (field position) { return positions[Math.floor(Math.random() * positions.length)] } return null }generate 函数接收两个参数field 是配置文件里 match 命中的字段名params 是你在 mapping 里自定义的参数对象。返回 null 表示这个字段不归自定义数据源管插件会继续走 Faker 规则。写自定义 source 时要注意文件的路径解析一般以插件根目录为基准而不是以当前 Sketch 文档的目录为基准这个容易记反。调试时可以在函数里临时抛一个 console.logSketch 的 console 面板能看到输出。3.4 快捷键与菜单归类命令多了之后建议把“填充选中图层”“刷新当前页”“打开配置”拆成三个独立 command不然每次都要点两层菜单。manifest.json 里可以加第二个命令{ name: Refresh Data on Current Page, identifier: refreshCurrentPage, script: src/command.js, handler: onRefreshPage, shortcut: cmd shift r }注意 shortcut 字段在较新版本 Sketch 里已经不建议写在 manifest 里而是由用户在 系统设置-键盘-快捷键 里自行绑定。大概原因是插件自动注册快捷键会和系统快捷键冲突Sketch 干脆把控制权收回。我一般会在项目的 README 里附一张快捷键对照表让团队成员按各自习惯绑定而不是强行统一按键。4. 实战从单个图层到整份文档批量填充 mock 数据4.1 批量填充选中图层选区、类型判断与空值兜底先写一个最基础的手动填充脚本。它做的事很简单获取当前选中图层过滤出文本类型逐个按配置生成值并写回。能跑通这一步后面所有复杂功能都是在这个骨架上加逻辑。const sketch require(sketch) const faker require(faker) export default function (context) { const document sketch.fromNative(context.document) const selection document.selectedLayers if (selection.isEmpty) { sketch.UI.message(请先选中一个或多个文本图层) return } selection.layers.forEach(layer { if (layer.type ! Text) return layer const value faker.name.findName() if (value ! undefined value ! null) { layer.text String(value) } }) sketch.UI.message(假数据填充完成) }sketch.fromNative(context.document) 把 Sketch 原生文档对象转成官方 API 对象这是每个插件入口都要做的第一件事。selection.layers 返回数组里面每一项可能是 Text、Shape 或 SymbolInstance 等类型所以要先判断 layer.type 是不是 Text 再写 text 属性。layer.text 直接赋值字符串Sketch 会自动改文案且保留原字体样式。UI.message 在窗口底部显示一条提示不会弹窗打断设计操作这是插件交互里比较克制的一种方式。4.2 按 Symbol 实例和 Override 填充考验匹配逻辑的地方实际项目中文本通常不直接摆在画板顶层而是藏在 Symbol 里。比如一个用户卡片 Symbol里面包含“姓名”“职位”“城市”三个 override。只遍历 selectedLayers 拿不到内部图层需要额外处理 overrides。selection.layers.forEach(layer { if (layer.type ! SymbolInstance) return layer const overrideTexts layer.overrides.filter(o o.property text) overrideTexts.forEach(ov { const rule findMapping(ov.path) if (rule) { ov.value generateByRule(rule) } }) })layer.overrides 是 Symbol 实例对外暴露的覆盖项数组property 为 text 表示这是一个文本 overrideov.path 是这个 override 在 Symbol 内部命名的路径例如“用户卡片/姓名”。data-faker 拿 path 去匹配配置规则比拿实例外层名称匹配更精准。注意写完 ov.value 后部分 Sketch 版本不会立即生效需要手动调用一次 setOverrideValues否则脚本跑完界面纹丝不动。这是我早期总遇到的头号玄学问题。4.3 联动数据源用真实接口结构生成整套假数据很多团队的流程是设计稿画完前端要求“mock 数据结构跟接口一致”。这个需求可以在>{ apiFields: [userName, phoneNumber, registerDate], fieldMap: { userName: name.findName, phoneNumber: phone.phoneNumber, registerDate: date.past } }再补一个导出的 JavaScript 片段把生成结果组装成接口需要的数组function buildMockList(schema, count) { return Array.from({ length: count }, () { const item {} schema.apiFields.forEach(field { const fakerRule schema.fieldMap[field] item[field] fakerRule ? generateSingle(fakerRule) : null }) return item }) }apiFields 决定输出字段的顺序和集合fieldMap 是字段与 Faker 规则之间的翻译层。这套结构的好处是设计稿和接口文档共用一份 schema字段改名时只改 fieldMap不需要动画板上的图层。generateSingle 是 mock 网关的入口函数建议保留 null 字段而不是隐式丢弃这样 mock 接口返回的数据里字段是齐全的前端模板不会因为缺字段报错。4.4 命令行调用让生成能力跑在 Sketch 外面不是每一位团队成员都会去 Sketch 里点按钮。QA 联调或者压力测试时需要直接在命令行批量生成固定格式的数据。只要是同一套 schemaNode 环境调用 Faker.js 出来的结果和 Sketch 插件结果没有本质差别区别只在写入端。npm run faker -- --count 20 --schema userCard --format jsonconst faker require(faker) function generateUserCard() { return { name: faker.name.findName(), phone: faker.phone.phoneNumber(), company: faker.company.companyName() } } Array.from({ length: 20 }, generateUserCard).forEach(item console.log(JSON.stringify(item)))--count 是生成条数--schema 是预设的映射名。我一般会在项目根目录放一个 faker-cli.js统一读环境变量里的 schema避免把规则散落在一堆临时脚本里。命令行方式的另一个用途是生成假数据文件直接落到项目目录供前端 mock server 使用这让设计稿数据和联调数据保持一致不会出现两个团队各自造数、格式对不上的情况。5. 常见问题与避坑五类典型翻车现场和排查步骤5.1 插件菜单是灰色的命令点不下去现象安装后菜单栏里能看到 Data Faker但命令是置灰的点不了。 原因常见原因有三个。一是 Sketch 版本太老manifest.json 里 compatibleVersion 高于当前版本二是 manifest 里 shortcut 字段写错导致整个文件解析失败三是插件目录放在其他路径下没被 Sketch 扫描到。 解决先对照 Sketch 的版本号与 compatibleVersion版本过低就升级 Sketch 或调低声明。再做一遍 manifest 的 JSON 语法检查多一个逗号或少一个引号都会让命令失效。最后确认目录路径我见过多次 unzip 时外层多套了一层目录导致 Sketch 没识别出来把插件文件夹直接放到 Plugins/ 根目录下一层就好。5.2 中文内容变成拼音或乱码现象locale 设成 zh_CN生成姓名是拼音或者出现类似 “Xxx is not a function” 的错误。 原因这是 faker 版本差异导致的。老版本的 faker.js 对 zh_CN 支持不完整部分方法没有中文数据就回退到英文音译。另一个情况是 locale 只对 name、address 这类实体数据有效对 lorem 这种随机文本没有本地化概念lorem 生成出来必然是英文。 解决把 faker 升级到支持 zh_CN 的版本。业务专用文案不要依赖 locale用自定义数据源从本地 JSON 取lorem 段落直接改用 companies/name 组合。如果看到 “Xxx is not a function”通常是 faker 方法名写错了去 node_modules/faker 里翻一下对应版本的方法列表比在网上搜更直接。5.3 填充完后一部分文本变为空白现象跑完脚本有的图层变成空文本也没有任何报错。 原因最可能的是生成方法返回了 undefined。常见于 params 传错类型比如 date.past 的 years 写成字符串Faker 内部运算失败返回 undefined或者配置文件里 faker 字段写了一个存在但返回数组的方法插件拿到数组后 toString 在某些版本下得到空串。 解决在写入前统一加防御性判断值不是有效的非空字符串就保留原文本。这个兜底逻辑一定要写在写入层而不是生成层否则无数条生成规则都要改。同时检查 fallback 是否配置fallback 能让匹配不到规则时也有内容可写避免空出整个画板。5.4 按钮点了没反应控制台才有线索现象命令能点但画板数据纹丝不动Sketch 底部也没弹出错误提示。 原因如果整个填充动作被包在 try/catch 里只打印 console.error界面层是不会有提示的。老版本 Sketch 插件对未捕获异常也静默处理必须开 console 才能看到完整堆栈。另一个坑是入口 handler 名字写对了但函数内部把文档对象拿错了比如用了老 API 的 document.selectedLayers 取名冲突。 解决把插件入口函数的 console.log 打开Sketch 的 console 面板能看到插件脚本的输出。第一次写插件建议先把 selectedLayers 数量和每个 layer.type 打出来确认选区传入正确再往下做填充逻辑。能看到 layer 对象但写不进 text大概率是图层被锁定检查图层面板右侧的锁图标。5.5 团队其他人 clone 下来插件跑不起来现象同一份插件源码自己电脑能跑同事 clone 后报 module not found 或者 require 失败。 原因大多是把 node_modules 排除了但插件代码是直接 require(faker) 的。Sketch 插件运行时不读项目级 node_modules只认插件目录里能查到的模块依赖缺失就直接失败。 解决发布前把 faker 和相关库打进一个 bundle或者明确在仓库里附带 node_modules接受体积变大。我自己的习惯是在提交前执行一次打包指令把依赖收敛成单个 style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />
)
