Marketch 完整指南：从 Sketch 设计稿自动测量尺寸并提取 CSS
Marketch 完整指南从 Sketch 设计稿自动测量尺寸并提取 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设计交付之后开发同学总要追问一堆色值、间距和圆角。你在 Sketch 里一层一层用标尺量再把数字贴到需求单里既繁琐又容易出错。Marketch 是一个 Sketch 插件能把你的设计文件自动生成一个可测量的 HTML 页面直接在浏览器里读出元素的尺寸、间距和 CSS 样式还能按多倍率导出图层图片。下面从安装到常用操作带你完整走一遍。它能帮你做什么Marketch 的测量页面是左中右三栏布局左栏选页和画板中栏看设计预览右栏是测量面板界面预览如下 你可以点击任意元素立即看到它的 X/Y 坐标和宽高不再拖标尺量来量去 你可以直接复制插件为元素生成的 CSS 代码background、border-radius、width、height粘贴即用 你可以选中一个元素、把鼠标悬停到另一个元素上实时查看两者之间的距离️ 你可以选择 1x/2x/3x 倍率与 PNG 等格式把选中的图层快速导出成图片 你可以用页面顶部的 “Show slices” 开关批量显示或隐藏设计稿中的切片快速上手安装插件并导出第一个测量页面克隆项目到本地git clone https://gitcode.com/gh_mirrors/ma/marketch在克隆出的目录里找到 marketch.sketchplugin/双击这个文件夹Sketch 会自动识别并安装插件装完重启 Sketch。打开一个包含画板的 Sketch 文件在插件菜单 marketch 中选择 “Export as zipFile”快捷键 CommandShiftM。导出的 zip 里带有测量页面 index.html 和图层数据用浏览器打开 index.html就能看到测量页面。核心场景实操测量元素尺寸和位置在左上角的列表里选好页面与画板在中间预览区点击任意元素右侧 Position Size 区域会给出 X、Y 坐标和 Width、Height单位是像素精确到每个元素。提取 CSS 样式对带填充和圆角的元素Code 区域会自动生成类似这样的代码background:#4cd964; border-radius:4px; width:75px; height:32px;面板上方还会单列 Fill 与 Radius 的取值核对没问题后整段复制直接用于项目里。查看元素之间的间距选中一个元素后把鼠标移到另一个元素上两者之间会出现红/绿配色的距离标记直接标出间隔像素值例如 32px。检查页面留白和对齐一致性时这个动作比手动测量快得多。多倍率导出图片在底部 Export 区域选择倍率1x/2x/3x和格式png 等点击 “Export Active Layer”当前选中的图层就会按所选规格导出一次覆盖 1x 到 3x 的开发需求。实用细节必须以画板为前提。插件围绕画板工作建议每个页面或模块单独建一个画板组织、识别都会更顺利。顶部的 Unit 下拉框可以切换测量单位默认 Standard按你的交付习惯调整。命名有约定图层名加 “svg” 前缀会导出为 SVG 文件页面或画板名加 “-” 前缀则不会被导出确实需要 “-” 时用 “-” 转义。导出主逻辑在 export.cocoascript版本检查在 checkupdate.cocoascript插件版本信息见 manifest.json。常见问题Q没有画板的设计能用吗A不行。插件要求有画板才能工作散层需要先包进画板再导出。Q支持哪些 Sketch 版本A插件从 Sketch 3 时代开始维护v1.0.24 还修复了 Sketch v52 API 变动导致导出功能失效的问题版本变化记录见 CHANGELOG.md。Q导出的 HTML 页面在哪些浏览器里能看A页面是标准 HTML/CSSChrome、Firefox、Safari 等现代浏览器都能正常打开。Q为什么右侧面板看不到文本和图形图层A这是 v1.0.24 的已知问题为绕过 Sketch v52 的 API 变动该版本暂不显示文本与形状图层。Q发现 bug 怎么办A按 issue-template.md 的模板补上 Sketch 版本、问题描述和截图后再提交 issue定位会快很多。写在最后Marketch 把 “手动测量、手动查样式” 变成 “一键生成、打开即测”设计交付环节能省掉不少来回。如果想参与开发可以看 contribution.md 了解代码结构和贡献流程反馈问题请参照 issue-template.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），仅供参考
