Marketch 插件Sketch 设计稿一键导出 HTML 标注页面取 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设计师把 Sketch 文件丢给前端前端拿到手还是一堆静态图形间距靠肉眼量、颜色靠取色器、圆角靠猜。Marketch 是一个 Sketch 3 插件它把你文件里的画板导出成一个 HTML 页面浏览器打开后画板按原样渲染选中任意元素右侧面板直接给出 CSS 代码再悬停另一个元素就能看到两者之间的间距。对需要频繁走设计-前端交接流程的 iOS 界面设计、前端开发和小团队来说它把标注这一环省掉了。先讲清楚它是什么一句话定位Marketch 负责把 .sketch 文件里的画板转成可交互的标注文档——一个 zip 包里面有 index.html、data.js 和图片资源双击 index.html 就能在本地浏览器使用不需要服务器。它和一般的导出图片标注工具的区别在于CSS 数值是插件从图层属性里算出来写进 data.js 的不是截图上叠文字。所以开发者复制走的是代码不是标注图。这张图里能看到 Marketch 页面的三个区域左侧是按页面和画板组织的导航树iOS 页下的 Notification Center 等画板Icon 页下的 60pt1x/2x/3x 规格图中间是设计稿原样渲染并叠加了 75px、32px 的间距测量线右侧面板显示选中元素的 Position Size、Fill 色值、圆角以及一段可直接复制的 CSS 代码底部还有 Export Activity Layer 的图片导出入口。功能拆解三个真正用得上的点画板转 HTML 页面交付物变成一个文件导出时你可以选当前选中的画板当前页全部画板或整个文件全部画板。插件把每个画板的截图和图层数据打包生成一个自包含的页面发给开发后对方不需要装 Sketch浏览器打开即可逐画板查看。适合的场景是交接前的交付包多个画板、多页文件一次性打包替代过去我发你 Figma 链接你记密码或我截图发群里的做法。选中元素拿 CSS而不是拿标注图在导出的页面里点中任意元素右侧面板会列出它的宽高、位置、填充色、圆角并拼成一段 CSS 代码。开发者复制走就能用数值来自 Sketch 图层的原始属性。这张图右侧面板就是典型例子background:#4cd964; border-radius:4px; width:75px; height:32px;——颜色、圆角、尺寸一一对应不用人工换算。悬停测量间距替代手动标注选中一个元素后再把鼠标移到另一个元素上两者之间的距离会直接画出来并标上数值如图中的 75px、32px 测量线。做界面走查时这个按钮离边缘多远这两行之间留白多少这类问题当场就有答案不用再切回 Sketch 用标注工具。安装 Marketch 与首次导出获取插件有两种方式任选其一git clone https://gitcode.com/gh_mirrors/ma/marketch或者直接从 Release 页下载 marketch.sketchplugin.zip 解压。拿到marketch.sketchplugin文件夹后双击它Sketch 会自动完成安装如果插件菜单里没立刻出现重启 Sketch 即可。首次运行打开任意 .sketch 文件在插件菜单选择 marketch 的 Export as zipFile快捷键 Command Shift M。弹出对话框里有三个开关和三个选项默认值就能用画板范围Selected Artboards / Artboards on Page / All ArtboardsScale Artboard to 2x是否额外导出 2 倍图Export every layer是否把每个图层单独导出为图片面板里的 Export Activity Layer 功能依赖此项确认后会让你选择 zip 保存位置默认文件名就是 .sketch 文件名。导出的 zip 解压或直接双击 index.html 即可使用。实战经验三个容易踩的坑现象导出时提示没有画板页面是空的。原因Marketch 完全基于画板Artboard工作文件里如果只有散落的图层而没有框进画板插件找不到任何可导出的对象。做法导出前检查文件所有要交付的界面都收进 Artboard这也是它和图层截图工具最大的使用差异。现象Sketch v52 下导出功能异常或面板缺东西。原因Sketch v52 的 API 有破坏性变更v1.0.24 是绕过方案。该版本导出功能恢复了但右侧面板不显示文本和形状图层属于官方承认的临时状态。做法先看 CHANGELOG.md 里当前版本的已知限制再下结论别把版本临时缺陷当成自己的文件问题。现象导出的页面里单位不对或者某几个画板消失了。两个原因一是右上角 Unit 默认是 Standard如果你的设计按 pt 出的要切到 Retina 2x 或 3x 再取数值二是页面名或画板名以-开头的会被插件刻意跳过这是内置的排除机制想导出以-开头的名字要用\转义图层名加svg前缀则会以 SVG 格式导出。做法团队内约定好命名规则把排除当功能用而不是当故障查。适合谁以及下一步Marketch 面向三类人用 Sketch 出 iOS 界面的设计师交付物从sketch 文件变成zip 标注页、需要还原样式的前端直接拿 CSS不用反复问这个圆角几像素、以及需要走查间距的 PM 或 QA浏览器里就能量。下一步很简单拿一个正在做的小项目文件按上面的流程导出一次把 zip 发给你的开发同事让他们试试右侧面板复制代码的体验——这一个来回就能判断它值不值得进你的交付流程。【免费下载链接】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），仅供参考
