Marketch：把 Sketch 设计稿变成可测量、可取 CSS 的 HTML 页面

Marketch把 Sketch 设计稿变成可测量、可取 CSS 的 HTML 页面【免费下载链接】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 文件导出成一个 zip 包解压后就是一个 HTML 页面画板上的元素都能点击右侧面板直接给出尺寸、颜色、圆角和可复制的 CSS 代码。它解决的是设计稿标注这个环节——设计师不用再手动画标注线开发也不用拿放大镜量像素。对设计师和前端都适用尤其是两人协作、设计稿需要频繁交付的团队。插件由两部分组成marketch.sketchplugin/Contents/Sketch/export.cocoascript 这类 CocoaScript 脚本负责从 Sketch 读取图层数据index.html 则是导出页面前端负责渲染和交互。所以导出的页面不依赖 Sketch 本身任何浏览器打开就能用。 安装与首次导出上手路径很短三步走完git clone https://gitcode.com/gh_mirrors/ma/marketch克隆后进入目录双击marketch.sketchplugin文件夹Sketch 会自动安装。如果菜单里暂时没出现重启一次 Sketch 即可。之后在任意画板文件里按Command Shift M插件会把选中的页面导出为 zip。注意一点Marketch 依赖**画板Artboard**工作图层没放进画板里的内容不会出现在导出结果中。 生成页面的三个实际用途取 CSS 代码—— 选中页面里的任意元素右侧面板的 Code 区域会列出该元素的完整样式background、border-radius、width、height都在直接复制进项目即可。场景开发要还原一张卡片不用再逐属性问设计师这个圆角是 4px 还是 6px。元素间距测量—— 选中一个元素再悬停另一个两者之间的距离会直接标注在画面上。这是设计稿交付里最高频的疑问这两个模块间距是多少Marketch 把答案画出来了。切片与图层批量导出—— 页面右上角有 Show slices 开关可以查看画板内的切片面板下方的 Export 区域能选择倍率1x/2x/3x和格式png一键导出当前活动图层。设计稿切图就不用回 Sketch 里一张张导了。 两个命名开关Marketch 支持两个藏在命名规则里的用法在图层命名时顺带就能用上页面名或画板名以-开头该页面/画板会被跳过不进入导出。想导出的文件里混着草稿画板时很实用如果名字本身就要以-开头用\-转义。图层名以svg开头该图层会按 SVG 格式导出适合矢量图标这类不适合栅格化的资源。⚠️ 使用前的三个提醒画板是硬性前提没有画板结构的 Sketch 文件插件无从下手。当前 v1.0.24 是为了绕过 Sketch v52 的 API 变更做的兼容版本文本和图形图层暂时不会出现在右侧面板取 CSS 时以形状类图层为主作者仍在寻找长期修复方案。版本迭代历史包括 Sketch 各版本的兼容情况都记录在 CHANGELOG.md遇到我的 Sketch 版本导出异常时先查这里。Marketch 把标注、量距、取 CSS、切图这几件事收进了一个可直接在浏览器打开的页面里交付链路明显变短。下一步可以先拿一个包含两三个画板的简单文件跑一遍 Command Shift M感受一下导出页面的实际操作流程。【免费下载链接】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），仅供参考