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设计稿交付还在对着截图量像素周四下午四点设计师把Sketch文件甩进群配一句“标注看文件”。开发打开后放大截图一个按钮一个按钮地量margin再手动抄进样式文件。Marketch是个Sketch插件能把画板导出成浏览器里的HTML页面在页面上直接取每个元素的CSS。它解决的是设计稿交付这一环设计导出一次开发复制着用不再对着截图量像素。Marketch导出的页面能干什么把Sketch画板变成浏览器里可直接量取CSS的交互页面左侧导航选页面和画板中间预览区跟着切换点任意图层右侧面板吐出宽高、填充、圆角和可复制的CSS悬停第二个元素两者间距直接标出具体数值右上角开“Show slices”查看各图层的导出切片克隆仓库到双击安装导出流程怎么走你打开终端运行下面这条命令把项目拉下来git clone https://gitcode.com/gh_mirrors/ma/marketch进目录后你要的只有marketch.sketchplugin这个文件夹双击它Sketch会自动接管安装装完菜单里没出现就重启一次Sketch。接着打开任意.sketch文件按Command Shift M快捷键绑在manifest.json的 Export as zipFile 命令上弹出对话框选选中画板、当前页还是全部勾不勾2x画板和逐图层导出图片确认后选个保存位置得到一个zip包。解压后浏览器打开index.html画板就变成了下面这样的页面左侧是页面和画板列表中间是设计预览右侧是CSS数值。注意文件里必须用真正的画板普通分组不会被识别当前版本v1.0.24已兼容Sketch v52的API。中央是设计预览右侧是该图层的CSS。它擅长什么以及它不管什么它强的地方数值直接来自Sketch文件本身margin、填充、圆角这些参数可以原样复制进样式文件不用截图比对两个元素之间的间距悬停一下就标出来64×64以内、不含文字的小图标组会自动按组导出成一张图避免切片散落一地。它不管的不生成响应式断点导出的HTML是1:1的测量页不是生产级布局动效和交互逻辑也不在提取范围里只有静态样式。用命名规则控制导出范围如果你只想交付部分画板把页面或画板名字前面加个“-”它们就不会被导出真需要“-”开头就用“-”转义。想让某个矢量以SVG而不是PNG用图层名前加“svg”前缀即可。这两条规则都实现在marketch.sketchplugin/Contents/Sketch/export.cocoascript里。想改右侧面板的展示或导出页面样式直接打开index.html它是纯HTML/CSS/JS的单文件页面数据来源是zip里的data.js。 Marketch导出报错或面板缺数据怎么办导出时提示找不到画板原因文件里用的是普通分组不是Sketch画板。 处理把分组转成画板再确认导出对话框里的画板范围选项。Sketch v52下右侧面板不显示文字和形状原因v1.0.24是为绕过v52 API变更做的临时兼容这两类图层的展示被关掉了。 处理等官方的长期修复当前版本可以先用悬停测量拿数值。多行文字只显示第一行原因旧版本bugv1.0.22已修。 处理插件菜单里点“Get New Version”核对版本号升级后再导出。什么场景该用什么场景别用如果你的设计文件在Sketch里流转每周要向开发交付一批标注页面这个流程能省掉手动量像素的重复劳动。如果团队的稿子主要放在Figma里这个插件帮不上忙它的数据源是Sketch的原生API。如果只是批量导图片资源Sketch自带导出就够了多一层HTML页面没有必要。下一步把Sketch文件变成浏览器里可量测的页面。克隆仓库双击插件文件夹对一个画板按Command Shift M试一次。【免费下载链接】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设计稿交付还在对着截图量像素周四下午四点设计师把Sketch文件甩进群配一句“标注看文件”。开发打开后放大截图一个按钮一个按钮地量margin再手动抄进样式文件。Marketch是个Sketch插件能把画板导出成浏览器里的HTML页面在页面上直接取每个元素的CSS。它解决的是设计稿交付这一环设计导出一次开发复制着用不再对着截图量像素。Marketch导出的页面能干什么把Sketch画板变成浏览器里可直接量取CSS的交互页面左侧导航选页面和画板中间预览区跟着切换点任意图层右侧面板吐出宽高、填充、圆角和可复制的CSS悬停第二个元素两者间距直接标出具体数值右上角开“Show slices”查看各图层的导出切片克隆仓库到双击安装导出流程怎么走你打开终端运行下面这条命令把项目拉下来git clone https://gitcode.com/gh_mirrors/ma/marketch进目录后你要的只有marketch.sketchplugin这个文件夹双击它Sketch会自动接管安装装完菜单里没出现就重启一次Sketch。接着打开任意.sketch文件按Command Shift M快捷键绑在manifest.json的 Export as zipFile 命令上弹出对话框选选中画板、当前页还是全部勾不勾2x画板和逐图层导出图片确认后选个保存位置得到一个zip包。解压后浏览器打开index.html画板就变成了下面这样的页面左侧是页面和画板列表中间是设计预览右侧是CSS数值。注意文件里必须用真正的画板普通分组不会被识别当前版本v1.0.24已兼容Sketch v52的API。中央是设计预览右侧是该图层的CSS。它擅长什么以及它不管什么它强的地方数值直接来自Sketch文件本身margin、填充、圆角这些参数可以原样复制进样式文件不用截图比对两个元素之间的间距悬停一下就标出来64×64以内、不含文字的小图标组会自动按组导出成一张图避免切片散落一地。它不管的不生成响应式断点导出的HTML是1:1的测量页不是生产级布局动效和交互逻辑也不在提取范围里只有静态样式。用命名规则控制导出范围如果你只想交付部分画板把页面或画板名字前面加个“-”它们就不会被导出真需要“-”开头就用“-”转义。想让某个矢量以SVG而不是PNG用图层名前加“svg”前缀即可。这两条规则都实现在marketch.sketchplugin/Contents/Sketch/export.cocoascript里。想改右侧面板的展示或导出页面样式直接打开index.html它是纯HTML/CSS/JS的单文件页面数据来源是zip里的data.js。 Marketch导出报错或面板缺数据怎么办导出时提示找不到画板原因文件里用的是普通分组不是Sketch画板。 处理把分组转成画板再确认导出对话框里的画板范围选项。Sketch v52下右侧面板不显示文字和形状原因v1.0.24是为绕过v52 API变更做的临时兼容这两类图层的展示被关掉了。 处理等官方的长期修复当前版本可以先用悬停测量拿数值。多行文字只显示第一行原因旧版本bugv1.0.22已修。 处理插件菜单里点“Get New Version”核对版本号升级后再导出。什么场景该用什么场景别用如果你的设计文件在Sketch里流转每周要向开发交付一批标注页面这个流程能省掉手动量像素的重复劳动。如果团队的稿子主要放在Figma里这个插件帮不上忙它的数据源是Sketch的原生API。如果只是批量导图片资源Sketch自带导出就够了多一层HTML页面没有必要。下一步把Sketch文件变成浏览器里可量测的页面。克隆仓库双击插件文件夹对一个画板按Command Shift M试一次。【免费下载链接】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），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
