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当一份设计稿交付给前端时尺寸、间距、色值这些细节往往要靠人工反复核对稍不留神就会记错一个圆角。Marketch 把这部分核对工作挪到了浏览器里它是一个 Sketch 插件能把当前 Sketch 文件转成一个 HTML 测量页面页面上可以直接读取每个图层的位置、尺寸和 CSS 样式。项目定位与适用人群Marketch 是一个面向 Sketch 文件的自动化测量插件适合需要对照设计稿取尺寸、取样式的开发者以及希望减少交付反复确认的设计师。生成的测量页面是标准 HTML/CSS 文件用 Chrome、Safari 等现代浏览器打开即可使用。安装并载入 Marketch 插件整个过程分三步。第一步把项目拉到本地git clone https://gitcode.com/gh_mirrors/ma/marketch第二步在克隆出来的目录里找到marketch.sketchplugin文件夹它就是插件本体内含页面模板 index.html 与导出、更新等 Cocoascript 脚本命令与快捷键在marketch.sketchplugin/Contents/Sketch/manifest.json中注册。第三步双击marketch.sketchplugin把它载入 Sketch之后在 Sketch 的插件菜单里会出现 Marketch 菜单含 Export as zipFile 与 Get New Version 两条命令前者可绑定 Command Shift M 直接触发。按任务走查四个常用操作导出完成后会得到一个 zip 包解压后打开其中的 index.html数据保存在同目录的 data.js 里即可开始使用。页面把能力组织在几件具体事情上 测量元素的尺寸与位置在页面左上角选择要载入的页面与画板然后在中间预览区点击任意图层。右侧面板会列出该图层的 X/Y 坐标与宽高数值精确到像素无需再回 Sketch 里用标尺比划。提取图层的 CSS 样式选中图层后右侧面板的 Code 区域会按该图层的填充色、圆角、宽高生成一段可直接复制的 CSS 代码例如background: #4cd964; border-radius: 4px;。取色、记圆角这类手工活可以省掉。核对相邻元素的间距先选中一个图层再把鼠标悬停到另一个图层上页面会以红绿标注实时显示两者之间的距离并用加号、减号区分方向。列表行距、图标与文字间距这类问题用这个方式核对最省事。 以 1x/2x/3x 倍率导出图层右侧面板底部是 Export 区域选择倍率1x、2x、3x与格式如 png点击 Export Active Layer 即可导出当前选中图层。若生成页面时勾选了导出所有图层包内会为常用图层附带 0.5x 到 3x 的成套图片图层名以 svg 开头的还会额外导出 SVG 文件。逐图层的导出细节见marketch.sketchplugin/Contents/Sketch/export.cocoascript。生成的页面长什么样三栏布局页面分为三栏左栏罗列页面与画板用来切换要查看的设计内容中栏是设计预览区可直接点击其中图层右栏是属性面板集中展示位置尺寸、CSS 代码与导出控件。顶部工具条另有 Show slices 开关控制切片图层的显示和 Unit 单位下拉框。⚠️ 使用前需要留意的几个坑点插件依赖画板。导出逻辑会先检查文件里是否存在画板没有画板就无法生成测量页面建议每个页面或模块都落在独立画板里。用命名约定控制导出范围。名称以连字符 - 开头的页面或画板会被默认跳过把草稿和参考稿这样命名一次导出全部画板时不会带入多余内容。先确认单位与倍率再动手。页面右上角的 Unit 决定测量数值展示的单位导出对话框里还能选择画板截图是否按 2x 出图与团队约定保持一致可避免返工。快速问答支持哪些 Sketch 版本插件为 Sketch 3 及以上版本设计更高版本的兼容情况可查仓库根目录的CHANGELOG.md。导出后页面是空的怎么办优先检查当前文件是否包含画板这是插件运行前提。如何导出 SVG将图层重命名为以 svg 开头导出图层时会附带输出同名 SVG 文件。下一步在 Sketch 中载入 Marketch导出当前文件先完成一次测量与一次图层导出。发现问题或想参与开发时可参考仓库根目录的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），仅供参考