三步把 Sketch 设计稿变成可测量的标注页：Marketch 插件快速上手

三步把 Sketch 设计稿变成可测量的标注页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/marketchMarketch 是一款 Sketch 插件能把你的设计文件导出成可在浏览器里测量尺寸、直接获取 CSS 样式的 HTML 页面。如果你经常在设计和开发之间反复确认尺寸、色值与间距它值得花五分钟装上试试。不用在 Sketch 里逐个手量尺寸、手抄色值直接得到一个可测量、带完整 CSS 的标注页面。 场景手动标注设计稿有多费劲没有工具时流程大概是这样的设计稿发给开发开发拿截图去量像素你再打开取色器抠色值一来一回对好几轮。用 Marketch 之后开发打开导出的标注页就能点着看位置、尺寸、CSS 全在右侧面板里间距也是实时显示的。你们只需要对哪个值不对不再需要确认值去哪里找。 Marketch 安装与首次导出五步完成打开终端运行git clone https://gitcode.com/gh_mirrors/ma/marketch拉取项目。在项目根目录找到marketch.sketchplugin插件包双击完成安装。打开一个包含画板的 Sketch 文件从顶部菜单 Plugins 中运行 Marketch。在页面左上角勾选要导出的页面和画板等待导出完成。浏览器自动打开标注页点一个元素右侧立刻显示它的位置和 CSS 代码。⚠️ 前置条件需要 Sketch 3 及以上版本文件里必须有画板Artboard没有画板时插件无法生成页面。 功能详解位置、CSS、间距、导出如何获取元素的位置和 CSS 样式在标注页里选中任意元素右侧面板会显示它的 X/Y 坐标、宽高、填充色和对应的 CSS 代码复制进你的项目就能直接用。如何测量两个元素之间的间距先选中一个元素作为参照把鼠标悬停在另一个元素上两者之间的距离会实时显示出来。对齐检查和布局核对不用再截图去量。如何批量导出多个画板的标注页面左上角的面板支持同时勾选多个页面和画板一次导出就生成包含全部所选内容的 HTML 页面适合把整个需求一次性交付给开发。如何把选中元素导出为图片点击页面上的 Export Activity Layer 按钮当前选中的元素就会导出为 PNG 图片方便单独交付或做对比。 常见坑与实用技巧没有画板就什么都得不到Marketch 依赖画板工作导出前确认文件里建了画板否则只会收到无画板的提示。不想导出的内容加前缀页面或画板名称以 - 开头就会被跳过如果名字本身要以 - 开头用 - 转义。想要 SVG 也靠前缀图层名以 svg 开头时该图层会额外导出为 SVG 文件。小图标组会被合并64×64 以内且不含文字的小组会自动合并成一张图片导出这是正常行为。1.0.24 版本的已知现象为兼容 Sketch 52该版本右侧面板可能不显示文字和形状元素遇到时留意后续修复版更新。 社区与生态Marketch 处于活跃开发中。发现 bug 时按 issue 模板 提供 Sketch 版本、现象描述和截图想改代码的话读一遍 贡献指南 就能动手提 PR。感谢 MForever78、noyobo、xunuo、rayps 等贡献者的持续支持当前最新版本为 1.0.24。三步装好、点选即测——标题里承诺的收益就是让设计稿到标注页不再依赖肉眼和手感。【免费下载链接】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），仅供参考