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

交付设计稿时，你被开发追着问"这个间距多少""圆角几像素"，然后拿标尺一个个量、一个个抄色值的场景，应该不少。装上Marketch之后，这些位置、尺寸、间距和CSS样式，直接从Sketch设计稿里量出来、拿走，不用在软件之间来回切换。

跟做一遍：四步让Marketch量出第一个间距

第一步，先装好插件。执行git clone https://gitcode.com/gh_mirrors/ma/marketch拿到源码包，把marketch.sketchplugin.zip解压后，双击里面的marketch.sketchplugin，它会自动注册进Sketch。

第二步，打开一个带画板（Artboard）的Sketch文件，在菜单栏运行Marketch，屏幕上会弹出一个预览页面。

第三步，在页面左上角勾选要处理的页面和画板，画板会整屏铺在页面中央，右侧留出样式区。

第四步，点一下画板里的按钮图层，右侧面板立刻出现它的X/Y坐标、宽高、填充色和圆角，直接以CSS代码的形式给出，比如：

background: #4cd964; border-radius: 4px; width: 75px; height: 32px;

想量间距就更有意思了：保持一个元素处于选中状态，把鼠标悬停到旁边的元素上，两者的间距数值会实时显示出来，不用再去拖辅助线估算。

省下的时间：Marketch改变的三个交付场景

量间距这件事，以前你得把Sketch放大到100%，手动拖个矩形去卡位置，再口头报数；现在选中一个元素、悬停另一个，数值直接浮出来，一整屏标注可以压缩成"你自己量一下这个页面"。

取色值和样式，以前靠取色器一个个点，圆角、字号再手动敲进文档，抄错一个还得返工；现在点击图层，右侧面板给出的是能直接粘进代码的样式，省掉的是转录环节。

多人协作交付，以前是把画板一张张导出PNG发群里，开发想看细节还得翻原稿；现在勾选"全部画板"导出成zip包，开发拿到的是可交互的HTML页面，量尺寸、看样式都在里面完成。

新手容易踩的坑：先知道这四件事

1. ⚠️ 导出时提示找不到画板。原因：插件依赖画板工作，内容如果只是散落在普通图层上，它认不出来。解决办法：先把内容放进画板再运行，这是硬性前提。
2. 部分文字和形状图层在右侧面板不显示。这是已知限制，CHANGELOG.md 里明确提到过。解决办法：从父级容器画板入手查看位置，或等后续版本修复。
3. 以"-"开头的页面和画板会被自动跳过。这其实是设计好的功能，不想导出的页面直接加个前缀横线就行，不用反复取消勾选。
4. Sketch版本兼容性。插件基于Sketch 3时代的接口编写，如果你用的是很新的Sketch，个别功能可能行为异常，先对照版本记录排查，解决不了就提issue。

往深了走：导出选项与参与项目

导出对话框里能选范围（选中画板、当前页全部、或整个文件的全部画板），还可以勾选是否导出2倍图、是否把每个图层单独导出成图片，快捷键是command+shift+m。发现bug可以按 issue-template.md 提供信息；想改代码就看 contribution.md，当前版本是1.0.24。

Marketch替不了开发做最终实现，但能把标注阶段反复拉扯的量尺寸、报数值压缩成一次页面导出。挑一块手头的设计稿现在就导出试试，效果比读十篇教程直观。

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