从量取到出图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设计稿交给开发最耗时间的往往是这个间距多少、色值多少的反复确认。Marketch 是一个 Sketch 3 插件它把设计稿自动转换成可量取的 HTML 页面页面上可以直接读取任意图层的坐标、尺寸、色值和 CSS 样式代码也能完成切片导出。对于用 Sketch 协作的团队这是把重复测量工作省下来的一个工具。克隆仓库并挂载到 Sketch安装流程很短。先在终端克隆仓库git clone https://gitcode.com/gh_mirrors/ma/marketch进入项目目录后找到marketch.sketchplugin目录双击同名文件Sketch 会自动识别并安装装完重启 Sketch插件菜单里就能看到 Marketch。核心逻辑集中在 marketch.sketchplugin/Contents/Sketch/ 下export.cocoascript负责读取设计数据、生成页面util.cocoascript工具类checkupdate.cocoascript版本更新检查zip.cocoascript驱动导出打包流程画板生成可量取页面后的读法Marketch 工作的前提是设计稿里有画板artboard图层散铺没有画板时插件无法识别所以按页面或模块建独立画板是个好习惯。在界面左上角选好页面和画板后导出会得到一套 HTML 页面基于标准 HTML/CSS 构建在 Chrome、Firefox、Safari 等现代浏览器中都能正常打开。页面是三栏布局左侧导航区按分类切换设计页面、定位元素中央模拟移动设备屏幕直观预览设计在设备上的效果右侧属性面板是核心工作区。选中任意图层面板会给出 X/Y 坐标、宽高、背景色、边框色等属性并附上自动生成的 CSS。以圆角按钮为例background: #4cd964; border-radius: 4px; width: 75px; height: 32px;前端同学直接复制进项目即可不必再回头找设计师确认。选中图层后测量两个元素之间的间距CSS 里最麻烦的经常是 margin。Marketch 的做法很直接选中一个图层把鼠标悬停到另一个图层上两者之间的距离会实时显示出来。调整列表与卡片之间的留白、核对页面边距时不用放大再用标尺比划直接看读数。这一步对多页面保持间距一致性尤其有用。读数单位可以随时在界面顶部的 Unit 下拉菜单里切换像素、点等单位都支持按项目交付标准选一个页面上的数字和代码里的值就不会对不上。切片管理与多倍率出图画板里有切片区域时打开页面顶部的 Show slices 开关所有切片位置一目了然需要时可随时隐藏确认切片无误后在导出区选择尺寸支持 1x、2x、3x与格式PNG、JPG 等点击 Export Active Layer导出当前选中的图层。iOS 与 Android 交付通常要 2x、3x 图这一步一次就能完成。想批量交付时把相关元素规划在同一画板里成组处理效率明显高于逐个导出。插件版本检查与问题反馈该插件面向 Sketch 3 及更高版本设计兼容目前主流版本。想确认是否有新版本时可以看 checkupdate.cocoascript 里的实现逻辑或者直接关注项目的更新发布。项目仍在持续维护遇到情况按下面几条处理发现 bug按 issue-template.md 模板提交 issue想参与代码参考 contribution.md 后提交 PR生成页面的 HTML 模板是 index.html要调整交付格式时从这里入手。流程固定下来之后每份新设计稿照着走一遍即可一套可量取的页面能省掉设计与开发之间大量的来回沟通。【免费下载链接】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 插件的完整实操路径
从量取到出图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设计稿交给开发最耗时间的往往是这个间距多少、色值多少的反复确认。Marketch 是一个 Sketch 3 插件它把设计稿自动转换成可量取的 HTML 页面页面上可以直接读取任意图层的坐标、尺寸、色值和 CSS 样式代码也能完成切片导出。对于用 Sketch 协作的团队这是把重复测量工作省下来的一个工具。克隆仓库并挂载到 Sketch安装流程很短。先在终端克隆仓库git clone https://gitcode.com/gh_mirrors/ma/marketch进入项目目录后找到marketch.sketchplugin目录双击同名文件Sketch 会自动识别并安装装完重启 Sketch插件菜单里就能看到 Marketch。核心逻辑集中在 marketch.sketchplugin/Contents/Sketch/ 下export.cocoascript负责读取设计数据、生成页面util.cocoascript工具类checkupdate.cocoascript版本更新检查zip.cocoascript驱动导出打包流程画板生成可量取页面后的读法Marketch 工作的前提是设计稿里有画板artboard图层散铺没有画板时插件无法识别所以按页面或模块建独立画板是个好习惯。在界面左上角选好页面和画板后导出会得到一套 HTML 页面基于标准 HTML/CSS 构建在 Chrome、Firefox、Safari 等现代浏览器中都能正常打开。页面是三栏布局左侧导航区按分类切换设计页面、定位元素中央模拟移动设备屏幕直观预览设计在设备上的效果右侧属性面板是核心工作区。选中任意图层面板会给出 X/Y 坐标、宽高、背景色、边框色等属性并附上自动生成的 CSS。以圆角按钮为例background: #4cd964; border-radius: 4px; width: 75px; height: 32px;前端同学直接复制进项目即可不必再回头找设计师确认。选中图层后测量两个元素之间的间距CSS 里最麻烦的经常是 margin。Marketch 的做法很直接选中一个图层把鼠标悬停到另一个图层上两者之间的距离会实时显示出来。调整列表与卡片之间的留白、核对页面边距时不用放大再用标尺比划直接看读数。这一步对多页面保持间距一致性尤其有用。读数单位可以随时在界面顶部的 Unit 下拉菜单里切换像素、点等单位都支持按项目交付标准选一个页面上的数字和代码里的值就不会对不上。切片管理与多倍率出图画板里有切片区域时打开页面顶部的 Show slices 开关所有切片位置一目了然需要时可随时隐藏确认切片无误后在导出区选择尺寸支持 1x、2x、3x与格式PNG、JPG 等点击 Export Active Layer导出当前选中的图层。iOS 与 Android 交付通常要 2x、3x 图这一步一次就能完成。想批量交付时把相关元素规划在同一画板里成组处理效率明显高于逐个导出。插件版本检查与问题反馈该插件面向 Sketch 3 及更高版本设计兼容目前主流版本。想确认是否有新版本时可以看 checkupdate.cocoascript 里的实现逻辑或者直接关注项目的更新发布。项目仍在持续维护遇到情况按下面几条处理发现 bug按 issue-template.md 模板提交 issue想参与代码参考 contribution.md 后提交 PR生成页面的 HTML 模板是 index.html要调整交付格式时从这里入手。流程固定下来之后每份新设计稿照着走一遍即可一套可量取的页面能省掉设计与开发之间大量的来回沟通。【免费下载链接】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），仅供参考