从 Sketch 设计稿快速读取 CSS 和尺寸：Marketch 插件实用指南

从 Sketch 设计稿快速读取 CSS 和尺寸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接到一个 Sketch 设计稿后前端的第一步常常是测量按钮宽高多少、圆角几像素、两个元素间距是多少。靠肉眼加检查器逐个读数量完一屏往往要几十分钟还容易抄错值。Marketch 是一款 Sketch 插件它能把设计文件自动转换成一个可测量的 HTML 页面你在这个页面上点选元素即可直接看到尺寸坐标并拿到可复制的 CSS 样式代码。Marketch 是什么Marketch 定位很直接把设计稿到代码中间那段手工取样的工作自动化。设计师交付的 Sketch 文件经插件处理后会生成一个 HTML 页面页面里完整还原了画板结构每个元素都可点选位置、宽高、背景色、圆角等信息实时显示在侧边面板样式以 CSS 片段形式输出。它主要服务两类角色需要还原设计的前端开发者以及需要快速核对间距、标注尺寸的设计师。整个流程不需要额外工具导出结果是一个本地压缩包解压后用任意现代浏览器打开即可使用。插件怎么装安装只需两步均在本机完成克隆项目到本地git clone https://gitcode.com/gh_mirrors/ma/marketch在项目目录中找到marketch.sketchplugin文件夹双击它。Sketch 会自动识别并注册这个插件包。安装完成的验证标志Sketch 顶部菜单栏的Plugins菜单下会出现一个名为 marketch 的子菜单其中包含Export as zipFile和Get New Version两个选项。这两个命令由插件包内的 manifest.json 定义前者是核心导出功能快捷键为 ⌘⇧M后者用于在线比对版本号。如果菜单里看不到 marketch重新双击一次插件包再重启 Sketch。怎么从设计稿读出某个元素的 CSS装好之后以拿到一页设计稿的全部样式这条主线走一遍完整流程。先在 Sketch 中打开设计文件从 Plugins 菜单执行Export as zipFile。弹窗里让你选择导出的画板范围当前选中的画板、当前页全部画板、或整个文档全部画板默认是全部。确认后选择 zip 包的保存位置。这个打包过程由 zip.cocoascript 驱动完成后系统会提示导出成功并在 Finder 中定位到生成的 zip 文件。解压 zip用浏览器打开里面的 HTML 页面。页面是三段式布局左上角是页面和画板选择器中间是画板预览区右侧是属性面板核心逻辑都写在 export.cocoascript 里。接下来点选元素。在预览区单击任意元素它会被蓝色边框高亮右侧面板随即列出该元素的 X/Y 坐标、宽度和高度背景色、圆角等属性以及一段拼好的 CSS 代码例如一个绿色圆角按钮会输出background: #4cd964; border-radius: 4px; width: 75px; height: 32px;选中后直接复制这段 CSS 即可。需要量间距时保持一个元素处于选中状态把鼠标移到另一个元素上两者之间会出现带数值的标尺线横向纵向距离都会显示。几个值得先了解的参数导出画板范围。三种取值selected 只打包当前选中的画板page 打包当前页all 打包整个文档。第一次安装熟悉流程时选 selected 最快文件小、打开快正式交付开发时选 all 一次拿全。2x 导出开关。弹窗里默认开启决定是否额外输出 2 倍分辨率的画板整图。现在交付的屏幕基本都是 Retina建议保持开启开发拿到后可以直接用作背景或切图参考。图层命名前缀。两个约定值得提前告诉设计师图层名加svg前缀该图层会以 SVG 文件导出而不是位图页面名或画板名以-开头则跳过不导出适合放内部参考稿。页面右上角还有一个 Unit 下拉框用来切换测量数值的显示单位按开发侧的约定选择即可默认像素对 Web 开发没有歧义。常见的三个坑导出的页面是空的。现象是 zip 里 HTML 能打开但预览区没有任何画板。原因是插件只识别画板artboard结构直接铺在画布上没有放进画板的内容不会被收集。解决办法是回到 Sketch把每个页面或模块包进独立的画板再重新导出。文本和形状图层在右侧面板里不显示。这是当前 v1.0.24 版本的已知问题。该版本为了绕过 Sketch v52 的 API 变更做了临时处理副作用就是文本和形状暂不出现在属性面板中详见项目内的 CHANGELOG.md。等作者修复后升级即可导出 zip 本身不受影响。Get New Version 提示网络错误。检查更新的逻辑需要联网拉取远程版本号见 checkupdate.cocoascript网络受限时会直接报 NETERROR。这不影响导出和预览功能可以忽略想确认当前版本是否最新直接对比本地 manifest.json 里的 version 字段和仓库 CHANGELOG.md 即可。Marketch 适合Sketch 设计稿到前端样式这一交付环节功能边界在于它只处理画板内的结构输出是静态 HTML 页面而非可运行的组件。想深入了解版本修复历史读 CHANGELOG.md要参与代码或提交问题按 contribution.md 的指引和 issue-template.md 的模板操作即可。【免费下载链接】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），仅供参考