用前端思想看UI设计软件，sketch、Adobe XD让前端开发更高效

在前端开发的过程中，前端人员与UI设计师交流最多的是什么？如何够有效的与UI设计师沟通呢？

自从用了自动标注工具，大部分的属性，前端开发人员可以自己搞定了，但是，细节的地方很多，不是简单的标注工具就万事大吉了；

在项目开发期间，经常听到前端与UI设计师的交流，总结几个问题：

虽然并不算复杂，但是感觉还是费了不少时间，归纳下来，UI设计师不懂前端开发，而前端开发不懂UI设计，如果彼此了解一些，或许能够事半功倍；

本着提高开发效率的思想，一个偶然的机会，需要使用Adobe XD，由于我们的团队与项目的UI设计师不在一起，沟通自然没有那么方便，用蓝湖标注的内容，不能满足我的要求，就尝试直接使用Adobe XD；

从开发的角度，我们关心的自然不是UI设计本身，那是设计师的工作，我们最初的目的是如何导出切图（设计师给标注的切图不符合我们的需要，如果让设计师来改，频繁沟通，有些浪费时间，影响效率）；

但第一眼看到Adobe XD的界面的时候，感觉这个软件，简直是给开发人员使用的，或者是开发人员可以直接使用的，而不是仅仅给设计人员的；

启动之后，打开一个文件，可以看到

感觉似曾相识，我们需要的东西都在这里，是不是可以对他做一些编程方面的事情呢，值得探索一下；

经过简单的了解，基本上了解了UI设计师是如何完成切图的

选中需要切图的节点，然后点击这个小图标，即完成了切图标记，原来设计师就是这样轻松完成切图标注的，如果他不标注，在自动标注工具上，就无法下载切图，啊哈，原来是这样呀

点击右键，弹出菜单，选择最后一项，导出当前切图

按照自己的需要，选择对应的格式即可

这里有一个发现，导出格式，对于开发来讲，svg格式可能是更好的，不管是前端、Android、iOS等，普遍都对svg有比较好的支持（ie8不考虑），用了svg，再也不用考虑图片尺寸和放大失真的问题了，当然，具体的使用方法，在每种语言中，要自己去研究一下；

既然有了开头，自然就不会轻易结束；

通过慢慢的了解，从开发人员的角度，去了解UI设计师的工作，从而提高自己的开发效率；

尽管如此，绝不仅仅如此 。。。