Sketch 插件 Marketch 完整指南设计稿一键生成可测量 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拿到设计稿后你通常要先拿标尺一个个量元素的坐标和间距这个过程繁琐、容易出错设计一改就得重来。Marketch 是一个 Sketch 插件它能从 Sketch 设计稿自动生成可测量的 HTML 页面——打开页面每个图层的位置、尺寸和 CSS 样式都能直接看到、直接复制。 前置条件与最简安装步骤Marketch 需要在 Sketch 3 及以上版本里运行且文件里必须有画板。安装一共三步git clone https://gitcode.com/gh_mirrors/ma/marketch克隆仓库拿到插件文件解压 marketch.sketchplugin.zip双击 marketch.sketchplugin 安装验证是否装好打开任一 Sketch 文件顶部菜单栏出现marketch菜单并含Export as zipFile项即可使用。 Marketch 三项核心能力这些功能的原理一致插件通过 Sketch API 读取各图层属性写成数据文件生成的页面再按数据渲染。点击元素查看位置与尺寸点击任意元素右侧面板立即显示它的 X/Y 坐标和宽高。插件在导出时记录每个图层的框架和叠放顺序页面据此渲染出标尺。从右侧面板直接取用 CSS面板会输出填充色、圆角等现成样式例如background: #4cd964; border-radius: 4px; width: 75px; height: 32px;属性名与 Sketch 实际显示对齐复制即可用。悬停即得两元素实时间距选中一个元素把鼠标移到另一个元素上两者间的距离马上显示出来。它基于记录的坐标直接计算对齐时不再需要手动量尺。批量导出多页面画板勾选多个页面和画板一次导出包含它们的 HTML。每个画板连同图层被打包进一个 zip附统一入口页方便整包查看和分享。 导出流程五步跑通选中一批画板、跑一次导出全程五步打开设计稿左上角勾选页面与画板菜单栏执行导出CommandShiftM解压 zip 并打开 index.html点击元素看坐标与 CSS悬停另一元素得到间距 使用 Marketch 容易踩的坑⚠️ 文件没有画板时插件会直接拒绝导出⚠️ 页面或画板名以-开头会被自动排除可用它隐藏草稿 图层名以svg开头时按 SVG 格式导出 1.0.24 版右侧面板不显示文字与形状属已知限制 Marketch 项目现状与参与入口当前版本 1.0.24仍在持续维护最近一次修复是为适配 Sketch 52 的 API 变动。参与路径有两条报 bug按 issue 模板提供 Sketch 版本、描述和截图改代码先读 贡献指南了解 CocoaScript 与 index.html 两部分Marketch 把量、查、对变成了点、看生成的测量页还能直接分享给团队。从仓库装好它打开任一 Sketch 文件照着上面五步跑一遍几分钟就能看到第一份可测量页面。感谢 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），仅供参考