各位使用Adobe Xd的设计师们注意啦,今天要教大家一个实用的小技巧--批量清除画板的导出切图标记。
首先我们思考一下,为什么我们要使用这个功能呢?回顾在日常UI工作中如果有重复菜单或内容我们一般会复制一个原画板再进行新的绘制,比如弹窗,我们会熟练地把需要做弹窗的画板直接拷贝一份然后加一个黑色蒙层在上面绘制弹窗的内容。
但是这种情况如果原画板我们添加了很多切图标记的话,生成自动标注的时候,开发同学看到你的弹窗页面就会是下面这个样子:
![e1ead3a60c33c1727d842e9db9495178.png](https://i-blog.csdnimg.cn/blog_migrate/f7c5871f81d185eb93e6be6e09982ecd.jpeg)
原画板切图标记
![65ed713dd0f2194a9fd929839c298daf.png](https://i-blog.csdnimg.cn/blog_migrate/7b8a3018576788de931cf3010d894dec.jpeg)
弹窗画板切图标记
![format,png](https://img-blog.csdnimg.cn/img_convert/0eee81fb1dd5deed9e244285f4c4ebdf.webp?x-oss-process=image/format,png)
开发小哥哥在线迷惑~
可以看到原画板切图标记很多,我们直接叠加弹窗的话在导出标注的时候切图标记会非常混乱,并且这些标记在上一个画板已经有了,这个画板其实不需要再标记了,所以我们可以在复制原画板的时候做一次批量清理画板的标记。
怎么批量进行清理标记呢?知识点来了!以macOS为例:
Adobe XD添加导出标记的快捷键是control+command+E,所以我们的给大家的方法就是连续按两次快捷键就可以清除画板的标记了,具体参考以下步骤:
首先鼠标拖拽框选中需要清除标记的画板,这里最好切换到图层视图比较方便,我们可以看到图层面板里选中了大部分的切图图层(蓝色选中状态部分)
![fbd030d186b7410268c255d3b49aaa32.png](https://i-blog.csdnimg.cn/blog_migrate/68105bc58ebc8cd90e5b4fb1def708da.jpeg)
接下来使用一次快捷键control+command+E,我们可以看到底部两个选中的图层组我们没有标记的标记上了
![d680f5dc03c24782bd2d3a9dc44d5aaf.png](https://i-blog.csdnimg.cn/blog_migrate/8b0b01881f9e74b86daa534235f6711a.jpeg)
再使用一次快捷键control+command+E,可以看到红框内的标记已经全部清除。
![60cae689d06204d3943d2c0e788d54ac.png](https://i-blog.csdnimg.cn/blog_migrate/2d7faf3b775367217ef3a53ce27e9fb8.jpeg)
那么有的小伙伴会问了,为什么会有一部分没有标记没有被清除呢?原因是因为这部分没有被选中,使用一次性拖拽是没有办法选定二级组的,这个操作逻辑很简单,选中——标记为切图——取消标记,所以如果有漏网之鱼大家可以手动选择再使用快捷键清除一下,快捷键要记住呦~
![eff01b12c21e3006a3b82a9149c7ec41.png](https://i-blog.csdnimg.cn/blog_migrate/d2238100f2f618dda48b603368ebb942.jpeg)
将多余的标记清除干净再将标注分享给开发,开发小哥哥一定很开心的哈!
![format,png](https://img-blog.csdnimg.cn/img_convert/23c3a00be800e38429eb00884ca95549.webp?x-oss-process=image/format,png)
题外话,原本标记狮希望给大家做一个一键清除画板标记的功能,实现后发现官方限制了插件编辑组件、重复网格内部的权限范围(XD版本:v33.0.12.8),导致和Adobe Xd官方一样,也是没有办法做到一键清除的,像重复网格、组件、二级组这些都没有办法一次性清除标记,所以我们放弃了这个功能,还是希望官方后期能注重下这个体验,目前只能根据上述的快捷键办法勉强用用啦,至少可以清理一些真的很多余的切图标记,快来试试吧!