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页面量尺寸、看样式都在里面完成。新手容易踩的坑先知道这四件事⚠️ 导出时提示找不到画板。原因插件依赖画板工作内容如果只是散落在普通图层上它认不出来。解决办法先把内容放进画板再运行这是硬性前提。部分文字和形状图层在右侧面板不显示。这是已知限制CHANGELOG.md 里明确提到过。解决办法从父级容器画板入手查看位置或等后续版本修复。以-开头的页面和画板会被自动跳过。这其实是设计好的功能不想导出的页面直接加个前缀横线就行不用反复取消勾选。Sketch版本兼容性。插件基于Sketch 3时代的接口编写如果你用的是很新的Sketch个别功能可能行为异常先对照版本记录排查解决不了就提issue。往深了走导出选项与参与项目导出对话框里能选范围选中画板、当前页全部、或整个文件的全部画板还可以勾选是否导出2倍图、是否把每个图层单独导出成图片快捷键是commandshiftm。发现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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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页面量尺寸、看样式都在里面完成。新手容易踩的坑先知道这四件事⚠️ 导出时提示找不到画板。原因插件依赖画板工作内容如果只是散落在普通图层上它认不出来。解决办法先把内容放进画板再运行这是硬性前提。部分文字和形状图层在右侧面板不显示。这是已知限制CHANGELOG.md 里明确提到过。解决办法从父级容器画板入手查看位置或等后续版本修复。以-开头的页面和画板会被自动跳过。这其实是设计好的功能不想导出的页面直接加个前缀横线就行不用反复取消勾选。Sketch版本兼容性。插件基于Sketch 3时代的接口编写如果你用的是很新的Sketch个别功能可能行为异常先对照版本记录排查解决不了就提issue。往深了走导出选项与参与项目导出对话框里能选范围选中画板、当前页全部、或整个文件的全部画板还可以勾选是否导出2倍图、是否把每个图层单独导出成图片快捷键是commandshiftm。发现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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考