涨姿势！让你一分钟玩转 XD 切图

[PxCook]

"关注像素大厨，把繁琐的事情交给我"👉

闲言碎语不要讲，接下来我们话端详~

这次给大家带来 XD 切图+自动标注+线上协作＜1 分钟!

相比较上一版本 XD 导入速度至少提升5 倍

那么让我们来看看如何玩转 XD 切图吧！！

大幅提高工作效率

XD 切图流程视频

• 导出切图到 PxCook

您可以在 Adobe XD 的图层中，激活“添加导出标记”图标，或在 Adobe XD 的右边栏中最后一个分栏中，将“添加导出标记”勾选上。在 Adobe XD 中，导出当前设计稿到 PxCook 中。

新版本中，我们加入了对 Adobe XD 的切图支持，同时彻底优化了从 XD 到 PxCook 的导入过程，使得导入速度比之前提升了5 倍！！让设计师和工程师之间的衔接更加紧密高效~

• 定义切图的范围

在有些情况下，可能需要特殊定义切图的范围，以固定切图的尺寸。我们可以通过将一个“描述范围”的形状图层放置于需要切图的组内，然后将该形状图层变为透明即可，如下图所示：

支持自动标注

• 支持工程师查看自动标注

在 PxCook 软件开发模式下，工程师可通过点选画板中元素的方式，直接查看元素之间的间距「图 1 」。同时在软件右边栏中可查看该元素的详细尺寸，样式，及相应代码「图 2 」，最后工程师可直接选择并下载相应切图「图 3 」。

• 切换百分比标注

在开发模式下，工程师可以通过画板右下角开关来激活百分比标注模式。百分比标注的参考层是通过查看标注的两个元素自动计算得到的。您也可以通过在画板中右键来设置当前选中的元素做为百分比标注的参考层。要注意的是在同一个画板中，只允许同时存在一个手动设置的参考层。

在线协作效率提升

设计师可添加协作人员进入项目，完成的设计稿及切图可直接导入到 PxCook 协作项目中，并自动适配工程师所需的尺寸，工程师可直接查看相应代码，一键复制所需代码！

iOS 类型下: 支持 Objective-C Swift 和 ReactNative 类型的代码生成。

Android 类型下: 支持 XML 和 ReactNative 类型的代码生成。

Web 类型下: 支持 CSS 类型的样式代码生成。

---

-End-

以上就是本次 PxCook XD 切图功能的优化成果，

感兴趣的小伙伴们快来体验一下吧！为“产●设●研”而生！

微信关注公众号：像素大厨 PxCook

可获取更多设计资讯，和各种作图小技巧