Marketch 教程：3 步把 Sketch 设计稿变成可测 CSS 的 HTML 页面

Marketch 教程3 步把 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 插件它把当前设计稿导出一份 HTML 测量页面你可以在浏览器里直接读出任意图层的位置、尺寸、间距和 CSS 样式。假设你刚接到一份交付设计稿开发在问某个按钮的圆角和填充色是多少这篇文章能让你在 3 步内拿到一个能打开的测量页面。第一个测量页面安装与导出git clone https://gitcode.com/gh_mirrors/ma/marketch装进 Sketch双击仓库根目录下的marketch.sketchpluginSketch 会自动安装之后顶部菜单里会多出 Marketch 一项。触发导出打开设计文件菜单选择 Marketch → Export as zipFile快捷键CmdShiftM。弹窗里勾选要导出的画板范围选中画板 / 当前页 / 全部、是否导出每个图层图片和 2x 画板截图然后选保存路径。打开页面解压生成的 zip双击index.html即得测量页面。zip 里包含index.html、data.js全部图层数据、画板截图以及存放切片的slice/子目录。页面上的三个测量场景 选中图层读坐标与 CSS在左上角选好页面和画板点击中央预览里的任意图层右侧面板立刻列出 X/Y 位置、宽高、填充色、圆角以及一段可直接使用的 CSSbackground:#4cd964; border-radius:4px; width:75px; height:32px;这段代码可以直接粘进项目的样式文件不用再回 Sketch 里逐个查色值。悬停另一个元素量间距选中一个元素后把鼠标悬停到另一个元素上页面会在两者之间标出红色与绿色两个间距标签例如示例图中的 -41.67px 和 1.71px旁边还附带 75px、32px 的元素尺寸。核对间距规范时悬停一次就能读到数值不用拿标尺逐一比对。一次性打包图层资源 导出时勾选导出每个图层选项插件会把每个图层按0.5x.png到3x.png四种比例导出切片图片单独放进slice/目录。图层名以svg开头时会额外导出一份同名.svg文件方便开发直接用矢量图标。整个 zip 可以直接转给开发不用再做一轮切图。页面操作动线固定动线是左上选页面 → 中间点图层 → 右侧读信息。右上Show slices开关控制画板上是否显示切片。Unit下拉切换尺寸显示单位Standard 等。右下 Export 区域Export Activity Layer按钮按所选 Size1x/2x/3x和 Formatpng重新导出当前选中图层。⚠️ 画板是插件的前置依赖。设计稿里没有画板图层全部悬浮时导出会直接提示无画板测量页面也不会有内容。容易踩的几个坑 ⚠️排除画板以-开头的页面或画板名不会被导出名字本身确实以短横线开头时写成\-转义。文字与形状图层可能不在右侧列表v1.0.24 为绕过 Sketch 52 的 API 变更做了降级处理此限制在 CHANGELOG.md 中有说明。检查更新菜单 Marketch → Get New Version 会比对远端版本号并提示是否有新版本逻辑见 checkupdate.cocoascript。要改代码的话抓取数据与导出流程集中在 export.cocoascript页面展示由同目录index.html负责报 bug 请照 issue-template.md 的模板提交参与贡献看 contribution.md。【免费下载链接】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），仅供参考