前端工程师使用adobe XD软件下载切图和测量距离的方法

在之前公司做前端时，基本都是直接跟蓝湖打交道，UI设计师会将设计好的PS文件，通过蓝湖提供的切图插件进行标记，然后整体画板上传到蓝湖项目中，然后前端通过蓝湖进行查看下载切图和测量间距等，而且蓝湖会自动提供部分代码，可以直接使用，非常的方便及人性化。

现在的公司是直接提供XD文件，所以需要先下载XD软件：

软件下载链接

链接：https://pan.baidu.com/s/1O6i2fxkLgxTG2oY0oEoX1w
提取码：g52e
这个里面是ps，xd和ai，有需要的自己下吧

XD软件下载切图

注意：此处可以选中图片，然后右击选择 添加导出标记，如果是多张图导成一个切图，则可以shift多选图片后，进行Ctrl+G打组，然后再右击添加导出标记。
添加导出标记的图片，上传到蓝湖后，可以在蓝湖中进行切图的下载，这个是最简单最方便的方式了

也可以通过下方的方式进行手动切图。
打开XD软件并导入xd文件后，通过按住shift按键，依次选中对应的图标：

然后选择“文件”——“导出”——“所选内容”，弹出导出对话框：

选择导出的格式为png，导出用于web，然后修改存储切图的文件夹即可进行导出操作。

XD软件导出切图完成！！

XD软件测量距离及获取颜色等

除了切图，前端工程师还需要知道元素的间距、字体样式大小、各种颜色等，因此还是需要进一步操作的，因为我对XD软件实在是不熟悉，所以我想到将XD软件中的画板上传到蓝湖上进行操作。因为PS软件我比较熟悉，而且我知道PS是可以直接将画板上传到蓝湖的，而且PS和XD都是adobe公司出版的软件，肯定是可以上传到蓝湖的。

xd软件蓝湖插件使用链接：http://help.lanhuapp.com/hc/kb/article/1168665/

操作是十分的方便，下载插件并安装后，打开XD文件，保证XD文件是当前窗口，然后打开蓝湖XD插件，登录蓝湖账号，效果图如下：

此时直接点击“上传到蓝湖”即可。

另外蓝湖XD插件也有上传切图的办法：参考链接如下：

XD软件上传切图到蓝湖的方法：http://help.lanhuapp.com/hc/kb/article/1420668/

完成！！！