MarketchSketch 设计稿获取 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/marketchMarketch 是一个 Sketch 插件可以把 Sketch 设计稿导出成一个 HTML 页面你在浏览器里点元素就能直接量尺寸、复制 CSS 样式。还在逐个量尺寸、抄色值接过设计稿的同学都熟悉这个流程用测量工具一个一个量宽高的像素值再从样式面板里手动抄填充色元素之间的间距全靠放大画布目测。这些数字在设计稿和代码之间来回誊抄很容易抄错。Marketch 的思路是把这件事搬到浏览器里完成它把画板ArtboardSketch 中独立的画布区域通常对应一个页面或一屏内容连同图片、图层数据导出成一个 HTML 文件打开后点谁看谁。下面从安装到导出走一遍完整流程。三步装好 Marketch 插件前置条件一句话需要 Sketch 3 或更高版本并且文件里必须包含画板否则插件无法工作。克隆仓库git clone https://gitcode.com/gh_mirrors/ma/marketch解压其中的marketch.sketchplugin.zip文件双击解压出来的marketch.sketchplugin安装即完成装好后 Sketch 菜单栏会出现 marketch 菜单项也可以直接用快捷键 CommandShiftM 触发导出。从选画板到拿到 CSS真实工作流勾选要导出的页面与画板打开插件面板后左上角是页面和画板的选择区。勾选想导出的对象支持多选、跨页面确认导出后得到的是一张包含所有画板的 HTML 页面可以整体浏览也可以直接发给同事看。如果某个页面或画板不想出现在导出里把它的名字加上-前缀即可被排除。如何拿到任意元素的 CSS在导出页面中点击任意元素右侧面板会立刻给出它的 X/Y 坐标、宽高、填充色和圆角等参数并生成对应的 CSS 代码比如一个按钮可能显示background: #4cd964; border-radius: 4px; width: 75px; height: 32px;直接复制进自己的样式文件即可不用再对着设计稿逐个数字核对。测量两个元素之间的间距布局对齐时最头疼的是间距。选中一个元素后把鼠标悬停到另一个元素上两者之间的距离会实时显示出来不用再反复放大缩小画布目测。把当前元素导出成 PNG需要把某个元素单独变成图片时比如切图给产品确认选中它之后点击 Export Activity Layer 按钮元素会以 PNG 格式导出把生成的图片拖到桌面即可保存。导出页面是空的先看这三个常见坑文件里没有画板Marketch 依赖画板收集图层信息内容直接放在画布上、没放进画板的话导出页面会是空的。把内容收进画板再试一次。右侧面板缺少部分文字、形状元素v1.0.24 为了绕过 Sketch v52 的 API 变更采用了临时方案该版本中文字和形状元素可能不会出现在右侧面板里但导出功能本身已恢复属于已知现象。Sketch 版本过老插件要求 Sketch 3 及以上老版本 Sketch 无法使用。源码结构与相关资源插件分两部分CocoaScript 脚本负责从 Sketch 抓取数据并打包进每个导出的 zip 中index.html负责展示图层和图片两者结构和定位 bug 的分工见 contribution.md。发现问题的话建议按 issue-template.md 提供信息再提交 issue。项目由 tudou527 发起MForever78、noyobo、xunuo、rayps 等多位贡献者也参与了维护欢迎提 PR 参与开发。【免费下载链接】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），仅供参考