看UI设计，可以丢PS，用Adobe XD更快下班。

用Photoshop做UI设计多年，让我们困惑的是，画板太多的时候，Photoshop的源文件会很大，会占用电脑的资源，同时对电脑的配置要求也很高，容易卡死。自从Adobe XD出现后，让UI设计师在设计APP \ WEB \ applets等时使用Adobe XD。没有sketch，会大大减少电脑占用的资源，以及PS源文件过大导致的卡死问题。我们先来看看Photoshop和XD中两个完全相同的源文件的资源大小。
首先，Photoshop:
请看左下角的音量。
这是一组简单的微信官方账号页面，容量高达580MB。
接下来，看看页面上更多XD版本的APP界面：
它的体积变成了339kb，没错，就是kb。
相对于这类源文件的大小，电脑操作的流畅度不是一般的高。Adobe被称为将设计效率提高5倍的工具。但并不能完全取代PS的存在。横幅和图片构图做好了，还是要靠Photoshop。目前XD的功能还在不断完善和更新中。比如用渐变的话，XD只能达到两种颜色的渐变效果，而PS里的渐变效果是多种颜色的组合。
下面详细介绍XD在实际UI设计中的一些基本功能。
1.图标：
在浏览器中打开https://axhub.im/icons/安装。
A的徽标将出现在浏览器中，然后单击它。
点击iconfont，会跳转到阿里巴巴图标库。
(以前用PS的时候，在阿里拍图标需要下载png或者AI文件，然后只能修改颜色或者在AI修改，然后复制到PS，比较麻烦。安装Axhub icons adobe XD后，这个操作会简单很多。)
选择一个图标并向上移动鼠标：
提示成功后可以回XD，ctrl V粘贴完毕。
图标将作为成组的形状层出现在画布中。
此时如果不按shift键修改图标，只会修改图层在图标组中的自适应位置。
如果选择图标组并按住shift键拖动，可以缩放图标大小。
由于Axhub icons复制的图标是一组形状层，我们可以选择形状层来修改颜色和其他属性。
上面的方法用XD实现比PS方便多了。
2.重复网格：
重复网格的使用有利于列表布局的准确性。
首先，我们在XD中创建新的列表并对其进行分组：
然后点击右上角的【重复网格】。
当绿线出现时，我们向下拖动它。
将生成一个列表。此时，如果要单独修改项目中的文本位置，将取消[重复网格]。取消后会生成多个列表项，即分组。
3.重复网格以填充数据。
我们需要把PS里每一栏的虚假数据一个一个的填进去，很浪费时间。这时候我们会用XD来重复网格，然后用TXT文件拖进来，生成各种真实的数据。
https://xd.94xy.com/repeat-grid.html
我选中段落，下载到桌面，把txt文件拖到设计稿里面的文本区。
需要填写的数据会立刻填写。
4.分享问题
设计稿写完了，想分享一下互动，却发现不对劲。
如果一定要用XD分享，目前的解决方案是，重新注册一个Adobe账号，选择外地，年满18周岁才能使用分享功能。其实习惯用蓝泻湖的也可以上传到蓝泻湖进行互动。
剪切图片
PS切割器人的局部剪辑我就不多说了。如果要裁剪PS的蓝色泻湖，应该选中图层，点击蓝色泻湖插件中的裁剪按钮，将其标记为裁剪。在XD上传蓝色泻湖的剪影很简单。
选择图标或图标组，然后单击右侧属性栏中的[添加导出标记]。
然后画布上传到蓝色泻湖，图标可以从前端下载。
对于所选的blue lagoon项目，使用blue lagoon XD桌面软件，选择画布，然后单击Upload。
XD教程今天分享到这里，明天继续。如有疑问，欢迎留言或私信。