Marketch：将 Sketch 设计稿完整导出为可测量 HTML 页面

Marketch将 Sketch 设计稿完整导出为可测量 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 代码可以一键复制图层还能导出为图片。设计交付中的“量尺寸、抄样式”这部分工作由它代劳不必再用放大镜逐个像素比对。Marketch 快速安装与首次导出克隆仓库。git clone https://gitcode.com/gh_mirrors/ma/marketch在项目根目录双击marketch.sketchplugin完成安装macOS 也可以在终端执行open marketch.sketchplugin打开任意 Sketch 文件选中画板在插件菜单 marketch 下执行 “Export as zipFile”按弹窗选择画板范围选中 / 当前页 / 全部、是否把每个图层导出为图片并指定保存路径完成后解压 zip用浏览器打开 index.html 即可开始测量。快捷键⌘ ⇧ M跟着一个任务做在 Marketch 中量取图层尺寸并提取 CSS以一个按钮图层为例整个流程 4 步。选中图层读取位置与尺寸在预览页左侧的页面列表里点击切换画板再点击中间预览中的目标图层。右侧面板的 Position Size 区域会直接给出 X、Y 坐标与宽高精确到像素。复制 CSS 代码右侧面板 Fill、Radius 等属性下方是 Code 区域展示可直接粘进项目的 CSS。示例中的按钮图层输出如下background:#4cd964; border-radius:4px; width:75px; height:32px;测量元素间距保持一个元素处于选中状态把鼠标悬停在另一个元素上页面会实时标出两者的水平与垂直距离标注色块中带 px 数值。导出选中图层为图片在右侧面板底部的 Export 区域选择 Size1x/2x/3x与 Formatpng 等点击 “Export Activity Layer”中文界面显示为“导出选中图层”图片出现在页面中后右键或拖拽到桌面即可保存。上手经验用画板承载页面内容Marketch 只解析画板内的内容绘制时给每个页面或模块单独建画板否则导出时会提示“没有选择任何画板”。用名称前缀跳过或改格式页面或画板名以 “-” 开头时该内容不参与导出图层名以 “svg” 开头时会额外按 SVG 格式导出该图层。确实需要 “-” 开头时写成 “-”。选对单位并看懂导出逻辑预览页右上角有 Unit 下拉框按前端实际使用的单位px 或 pt选择保证面板读数与代码一致。想深入实现可以从 zip 导出入口 zip.cocoascript 和负责画板遍历、图层解析的 export.cocoascript 读起。常见坑右侧面板不显示文字与形状。原因v1.0.24 为绕过 Sketch v52 的 API 变更临时移除了该显示。处理先在 Sketch 面板中查看文字数值或等待官方长期修复版本。导出时提示“没有选择任何画板”。原因文件里没有画板或画板所在页面不可见。处理先创建画板并把内容放进画板再执行导出。检查更新显示“无法访问更新服务器”。原因“Get New Version” 命令需要联网获取新版本号当前网络不通。处理该命令与导出功能无关可直接忽略。Marketch 适合两类人交付多屏设计稿的设计师以及接手设计稿的前端开发。下一步就是按上面的步骤装好插件把第一个画板完整跑通一次。遇到 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），仅供参考