Marketch Sketch 插件：从安装到导出标注页的完整流程

Marketch Sketch 插件从安装到导出标注页的完整流程【免费下载链接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.项目地址: https://gitcode.com/gh_mirrors/ma/marketchMarketch 是一款 Sketch 插件可以把 Sketch 文件导出成 HTML 标注页面页面里能直接量元素间距、点选任意元素查看它的 CSS 样式。设计师不用再逐张截图标注前端也不用隔着聊天窗口反复确认数值。设计师发文件前端等标注小周是前端今天接到 iOS 通知中心的界面。设计师把 .sketch 文件发了过来但没有标注图。小周放大设计稿量间距截了张图发过去这个间隙是多少对方回复看着像 4。一天下来来回确认了七八个数值还差一个圆角没对齐。这类反复沟通的根源在于设计文件里的数值只有装了 Sketch 的人才能读。Marketch 的做法是把设计稿导出成一个交互式 HTML 页面——不装任何软件浏览器里就能看设计、量间距、取 CSS。项目定位Sketch 设计稿导出可测量标注页Marketch 由两部分组成marketch.sketchplugin目录是插件本体负责从当前文件的画板提取数据并打包成 JSON配套的index.html是一个独立页面负责展示这些数据并支持测量。它适合的场景是手里有一份 Sketch 文件需要交付给不装 Sketch 的同事前端、产品、测试查看和取数。官方仓库是 tudou527/marketchREADME 与更新记录在仓库根目录当前版本号可以在marketch.sketchplugin/Contents/Sketch/manifest.json里确认。安装只需两步克隆后双击插件Marketch 支持 Sketch 3.4 及以上版本CHANGELOG.md 显示一路做了兼容修复直到 Sketch 52 的 API 变更。克隆仓库git clone https://gitcode.com/gh_mirrors/ma/marketch进入目录双击marketch.sketchplugin文件夹Sketch 会自动识别安装重启 Sketch 后在插件菜单里确认出现了 marketch 条目。跟着任务走从 Sketch 文件到 HTML 标注页以一份包含多个 iOS 界面的 Sketch 文件为例。在插件菜单选择 marketch → Export as zipFile或用快捷键 CmdShiftM。导出得到一个 zip解压后用浏览器打开index.html页面是三栏布局左栏页面和画板的导航树用来勾选要展示的画板中栏设计稿的 1:1 预览右栏选中元素的属性面板。图中右栏的 Code 区块就是前文说到的、可直接复制的 CSS中栏红、绿两个数字框则是选中一个元素后悬停另一个元素时的间距测量结果。具体操作先在左栏选好要展示的画板再在中栏点选任意元素右栏会列出 Position SizeX/Y 与宽高、Fill背景色、Radius圆角和一段完整 CSS 代码可直接粘进项目。需要量间距时点选一个元素再悬停到另一个元素上两个方向的距离会直接标在预览图上。三个决定体验的细节必须以画板为单位。README 明确写了插件依赖 artboard画板外的游离图层不会进入导出结果所以设计稿要整理好画板再导出。用-前缀屏蔽画板。页面或画板名以-开头就不会被导出名字里真要有-就写成\-CHANGELOG v1.0.5 引入。评审中的半成品界面加个前缀即可不用删除或挪页。用svg前缀导出矢量。图层名以svg开头该图层会被导出为 SVG 文件而不是位图CHANGELOG v1.0.10 引入logo 和图标类元素用 SVG 在任意尺寸下都清晰。避坑指南现象打开导出的页面左栏树是空的→ 原因文件里没有画板或画板名误带了-前缀 → 对策检查画板命名把误加的-去掉。现象Sketch 52 下右栏不显示文字和图形的属性→ 原因v1.0.24 为绕过 Sketch 52 的 API 破坏性变更移除了 sharedObject 查找见 CHANGELOG v1.0.24→ 对策知晓该版本限制或换旧版 Sketch 导出。现象双击插件安装后菜单里没有 marketch→ 原因Sketch 启动时缓存了插件列表 → 对策重启 Sketch 再找插件菜单。现象页面里图片裂开、样式丢失→ 原因只单独拷走了 index.html丢了同目录资源 → 对策解压后的整个目录一起使用不要只拷 html 文件。边界与延伸Marketch 是 Sketch 3 时代的项目基于 CocoaScript 编写而 Apple 已废弃 CocoaScript 运行时最新版本 v1.0.24 也只是对 Sketch 52 的兼容修复。如果团队已迁到新版 Sketch 或 Figma 协作流程它更适合作为一次性交付工具而不是长期方案。另要注意导出结果是导出时刻的设计快照设计一改就需要重新导出它不会自动同步。延伸方向如果团队在 Figma 上可直接用内置的 Dev Mode 或 Inspect 类插件取 CSS走标注协作平台的Zeplin 是同类选择。Marketch 的价值在于免费、产物是一个可直接发出去的独立文件对方无需任何账号或软件。下次设计师把 Sketch 文件发来时先拿其中最简单的一个画板跑一遍导出在浏览器里确认 CSS 和间距都对得上再推广到整个文件。【免费下载链接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.项目地址: https://gitcode.com/gh_mirrors/ma/marketch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考