企业官网建设流程全解析

Marketch 插件：Sketch 设计稿一键导出 HTML 标注页面，取 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 3 插件，它把你文件里的画板导出成一个 HTML 页面：浏览器打开后，画板按原样渲染，选中任意元素右侧面板直接给出 CSS 代码，再悬停另一个元素就能看到两者之间的间距。对需要频繁走设计-前端交接流程的 iOS 界面设计、前端开发和小团队来说，它把"标注"这一环省掉了。

先讲清楚它是什么

一句话定位：Marketch 负责把 .sketch 文件里的画板转成"可交互的标注文档"——一个 zip 包，里面有 index.html、data.js 和图片资源，双击 index.html 就能在本地浏览器使用，不需要服务器。

它和一般的"导出图片+标注工具"的区别在于：CSS 数值是插件从图层属性里算出来写进 data.js 的，不是截图上叠文字。所以开发者复制走的是代码，不是标注图。

这张图里能看到 Marketch 页面的三个区域：左侧是按页面和画板组织的导航树（iOS 页下的 Notification Center 等画板，Icon 页下的 60pt@1x/2x/3x 规格图），中间是设计稿原样渲染并叠加了 75px、32px 的间距测量线，右侧面板显示选中元素的 Position & Size、Fill 色值、圆角，以及一段可直接复制的 CSS 代码，底部还有 Export Activity Layer 的图片导出入口。

功能拆解：三个真正用得上的点

画板转 HTML 页面，交付物变成一个文件

导出时你可以选"当前选中的画板""当前页全部画板"或"整个文件全部画板"。插件把每个画板的截图和图层数据打包，生成一个自包含的页面，发给开发后对方不需要装 Sketch，浏览器打开即可逐画板查看。

适合的场景是交接前的"交付包"：多个画板、多页文件一次性打包，替代过去"我发你 Figma 链接你记密码"或"我截图发群里"的做法。

选中元素拿 CSS，而不是拿标注图

在导出的页面里点中任意元素，右侧面板会列出它的宽高、位置、填充色、圆角，并拼成一段 CSS 代码。开发者复制走就能用，数值来自 Sketch 图层的原始属性。

这张图右侧面板就是典型例子：background:#4cd964; border-radius:4px; width:75px; height:32px;——颜色、圆角、尺寸一一对应，不用人工换算。

悬停测量间距，替代手动标注

选中一个元素后再把鼠标移到另一个元素上，两者之间的距离会直接画出来并标上数值（如图中的 75px、32px 测量线）。做界面走查时，"这个按钮离边缘多远""这两行之间留白多少"这类问题当场就有答案，不用再切回 Sketch 用标注工具。

安装 Marketch 与首次导出

获取插件有两种方式，任选其一：

git clone https://gitcode.com/gh_mirrors/ma/marketch

或者直接从 Release 页下载 marketch.sketchplugin.zip 解压。拿到marketch.sketchplugin文件夹后，双击它，Sketch 会自动完成安装；如果插件菜单里没立刻出现，重启 Sketch 即可。

首次运行：打开任意 .sketch 文件，在插件菜单选择 marketch 的 "Export as zipFile"（快捷键 Command + Shift + M）。弹出对话框里有三个开关和三个选项，默认值就能用：

• 画板范围：Selected Artboards / Artboards on Page / All Artboards
• Scale Artboard to 2x：是否额外导出 2 倍图
• Export every layer：是否把每个图层单独导出为图片（面板里的 Export Activity Layer 功能依赖此项）

确认后会让你选择 zip 保存位置，默认文件名就是 .sketch 文件名。导出的 zip 解压或直接双击 index.html 即可使用。

实战经验：三个容易踩的坑

现象：导出时提示没有画板，页面是空的。原因：Marketch 完全基于画板（Artboard）工作，文件里如果只有散落的图层而没有框进画板，插件找不到任何可导出的对象。做法：导出前检查文件，所有要交付的界面都收进 Artboard；这也是它和图层截图工具最大的使用差异。

现象：Sketch v52 下导出功能异常或面板缺东西。原因：Sketch v52 的 API 有破坏性变更，v1.0.24 是绕过方案。该版本导出功能恢复了，但右侧面板不显示文本和形状图层，属于官方承认的临时状态。做法：先看 CHANGELOG.md 里当前版本的已知限制再下结论，别把版本临时缺陷当成自己的文件问题。

现象：导出的页面里单位不对，或者某几个画板"消失"了。两个原因：一是右上角 Unit 默认是 Standard，如果你的设计按 pt 出的，要切到 Retina @2x 或 @3x 再取数值；二是页面名或画板名以-开头的会被插件刻意跳过，这是内置的排除机制（想导出以-开头的名字要用\转义），图层名加svg前缀则会以 SVG 格式导出。做法：团队内约定好命名规则，把"排除"当功能用而不是当故障查。

适合谁，以及下一步

Marketch 面向三类人：用 Sketch 出 iOS 界面的设计师（交付物从"sketch 文件"变成"zip 标注页"）、需要还原样式的前端（直接拿 CSS，不用反复问"这个圆角几像素"）、以及需要走查间距的 PM 或 QA（浏览器里就能量）。下一步很简单：拿一个正在做的小项目文件，按上面的流程导出一次，把 zip 发给你的开发同事，让他们试试右侧面板复制代码的体验——这一个来回就能判断它值不值得进你的交付流程。

【免费下载链接】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