Marketch3步装好的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 插件它把 Sketch 文件生成一个 HTML 页面——你在页面上点哪个元素右侧就给出它的位置、尺寸和现成的 CSS 代码还能悬停测量两个元素之间的间距。设计师不用手动标注开发不用对着画稿数像素还原页面时直接取用现成数值。⚠️ 注意需要 Sketch 3 或更高版本并且 Sketch 文件里必须包含画板Artboard插件才能正常工作。3步把插件装进Sketch 获取安装包从仓库下载marketch.sketchplugin.zip如果你要直接改源码也可以克隆仓库git clone https://gitcode.com/gh_mirrors/ma/marketch解压这个 zip 文件双击解压出来的marketch.sketchpluginSketch 会自动完成安装装完后菜单栏里会出现 marketch 菜单当前版本为 1.0.24。打开页面先选画板再点元素左上角勾选要导出的页面和画板打开导出后的 HTML 页面左上角是页面/画板列表。导出时你可以一次勾选多个页面和画板它们都会出现在这个列表里逐个切换查看。点一下元素右侧面板给出全部信息点选画板里的任意元素右侧面板立刻显示 X、Y 坐标、宽、高、填充色值和圆角半径。比如一个绿色按钮面板里会直接生成这样一段代码background: #4cd964; border-radius: 4px; width: 75px; height: 32px;写样式时直接拷走就能用。量间距选中一个悬停另一个 选中一个元素把鼠标移到另一个元素上页面会实时标出两者之间横向和纵向的距离数字带 px 单位。对齐布局、检查留白时不用再回 Sketch 属性栏里翻数值。两个名字前缀的小技巧 图层名加svg前缀导出时这个图层会生成独立的 svg 文件页面名或画板名加-前缀可以把它排除在导出之外名字本身要以-开头时用\-转义右侧面板的 Export 区可以把当前选中元素导出为 PNG倍率和格式都能选菜单栏的 Export as zipFile快捷键 commandshiftm会把结果打包成 zip 下载项目资源想参与开发先看贡献指南项目分为 CocoaScript 负责取数、index.html负责展示两部分数据类 bug 查前者界面问题看后者发现 bug 时按issue 模板填写 Sketch 版本、问题描述和截图版本记录里能找到每个版本的修复内容项目感谢 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），仅供参考