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/marketchMarketch是Sketch的一款免费插件它能把你的设计稿生成一个静态HTML标注页让你在浏览器里直接测量尺寸、复制CSS。想结束交付前手动量间距、抄色值的循环下面是最短上手路径。 它到底解决什么问题每次交付前你都要放大画板逐个量元素间距把色值手动抄进文档开发还会追问圆角是4还是8。Marketch把这些活儿搬到一个网页里打开生成的标注页点一下元素坐标、尺寸、可复制的CSS样式立刻出来不用再在Sketch和浏览器之间来回切。⚡ 从零到跑通最快上手路径克隆仓库git clone https://gitcode.com/gh_mirrors/ma/marketch解压仓库里的marketch.sketchplugin.zip压缩包双击解压出的marketch.sketchplugin文件完成安装然后打开Sketch需要Sketch 3及以上版本并且你的Sketch文件必须包含至少一个画板Artboard否则插件无法生成标注页。️ 跟着场景走一遍点击元素取CSS遇到的情况开发一个按钮不确定填充色值和圆角到底是多少。怎么操作在生成的HTML页面里单击这个按钮。得到的结果右侧面板立即给出X/Y坐标、宽高、填充色以及可直接复制的样式片段background: #4cd964; border-radius: 4px; width: 75px;悬停另一个元素量间距遇到的情况想知道上下两个元素之间隔了多少。怎么操作先选中其中一个元素再把鼠标移到另一个元素上保持悬停。得到的结果页面画出红色虚线参考线并标出两者之间的px数值对齐问题一眼确认。批量导出页面与画板遇到的情况项目横跨多个页面想一次性把标注整体交付出去。怎么操作在左上角面板勾选需要的页面和画板再从Sketch菜单执行Export as zipFile快捷键⌘ShiftM。得到的结果选中的画板被打包成zip包含标注页和对应切图直接发给团队即可。️ 容易踩的坑与小窍门没有画板的文件不生效装完插件没有任何反应时先确认文件里是否建了画板这是最常见的无效原因。右侧面板看不到文本当前版本中文本和形状图层不会出现在右侧面板这是对Sketch v52 API变更的临时方案遇到别慌可查版本记录看最新进展。用命名控制导出图层名以svg开头会按SVG文件导出页面或画板名以-开头则不参与导出真需要前缀就写成\-转义。切图单独导出右侧Export区域可切换1x/2x/3x倍数和PNG格式点Export Activity Layer即可把当前选中元素导出成图片。目前项目处于1.0.24版本。这套工具最适合独立开发者和自己向开发交付的设计师标注与CSS在一页里全部搞定。遇到bug可按issue模板提交问题或参照贡献指南发起PR感谢社区贡献者MForever78、noyobo、xunuo、rayps的持续支持。【免费下载链接】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），仅供参考