如何把 Sketch 设计稿变成可测量的 HTML 页面Marketch 快速上手【免费下载链接】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你有没有过这种时刻开发问起按钮离顶部的距离你又得放大画板拿标尺量一遍标注和设计稿对不上来回确认耗掉半天。Marketch 是一个 Sketch 插件它把设计稿生成一个可测量的 HTML 页面点选元素就能拿到位置和 CSS 样式。图中左侧是页面与画板列表中间为设计画板右侧面板列出 Position Size、Fill、Radius 与生成的 CSS 代码画板上标出 32px、75px 的间距Marketch 是什么适合谁不适合谁先说清楚边界免得装完发现用不上。 Marketch 是一个 Sketch 3 及以上版本的插件把设计稿变成一个 HTML 页面你在上面直接测尺寸、取 CSS。 做 Sketch 交付的前端、设计师是它的目标用户。 用 Figma 等工具做交付的团队别装它跑不起来。 文件里如果没有画板Artboard也不适用插件必须依托画板工作。从零上手Marketch 装完后的第一次运行这节解决从下载到看到第一个结果的路径问题三步走完。拿到代码git clone https://gitcode.com/gh_mirrors/ma/marketch仓库里就是完整的插件包。装好插件双击仓库中的marketch.sketchplugin文件Sketch 会自动加载确认你的 Sketch 是 3 或更高版本。看到第一个结果打开一个包含画板的文件运行插件点击任意元素右侧面板立刻给出 X/Y 坐标、宽高和 CSS 代码。功能怎么用Sketch 测量 CSS 与批量导出这节回答哪些操作能直接拿到什么结果按三个真实场景拆。单元素操作点选元素拿位置与 CSS 样式还原一个按钮时选中它。 右侧面板列出 Position Size示例值 X 288px、Y 600px、Fill#4cd964、Radius4。 Code 区直接给出可复制的样式background: #4cd964; border-radius: 4px; width: 75px; height: 32px;不用再拿标注文档核对数值。间距测量选中一个元素再悬停另一个排版对齐最费眼睛的是间距。 选中一个元素鼠标悬停到另一个上画板里直接标出两者的间距如 32px、75px。 不用来回量对齐问题当场解决。整页批量处理勾选画板导出 HTML 与切图交付整个页面时在左上角面板勾选页面和画板。 插件生成包含所有设计元素的 HTML 页面方便整体查看和分享。 不想导出的页面或画板名称前加 - 前缀即可跳过要写真正的 -用 - 转义。 切图在 Export 区完成Size 选 1x、Format 选 PNG点 Export Activity Layer 按钮导出当前元素。 图层名加 svg 前缀该图层就按 SVG 文件导出。 顶部 Show slices 开关控制是否显示切片。常见问题与避坑Sketch 版本与画板要求四个最容易碰上的坑按现象→原因→解决给出。装了插件Sketch 里看不到 Marketch。原因Sketch 版本低于 3。解决升级到 3 或更高版本。Sketch 52 上右侧面板不显示文本和图形。原因Sketch v52 的 API 破坏性变更。解决1.0.24 已移除 sharedObject 查找做临时修复导出功能恢复文本与图形暂不在面板出现长期修复仍在进行。点击元素没有任何样式输出。原因文件里没有画板插件依托画板工作。解决把内容整理进 Artboard。想拿 SVG导出的却是 PNG。原因导出格式默认 PNG。解决给图层名加 svg 前缀。延伸资源贡献入口与版本信息想继续深挖看这几处。 版本修改记录在 CHANGELOG.md从 1.0.0 一直记到 1.0.24。 提 bug 按 issue-template.md 的模板开 issue改代码参考 contribution.md 提 PR。 当前版本 1.0.24项目仍在活跃开发感谢 MForever78、noyobo、xunuo、rayps 等贡献者的参与。克隆仓库两分钟生成你的第一个可测量页面。【免费下载链接】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），仅供参考