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

客官°小女子只卖身不卖艺 2022-10-15 11:57 11阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
现在的公司是直接提供XD文件，所以需要先下载XD软件：

## 软件下载链接 ##

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

## XD软件下载切图 ##

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

也可以通过下方的方式进行手动切图。  
打开XD软件并导入xd文件后，通过按住shift按键，依次选中对应的图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
然后选择“文件”——“导出”——“所选内容”，弹出导出对话框：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
选择导出的格式为png，导出用于web，然后修改存储切图的文件夹即可进行导出操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
XD软件导出切图完成！！

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

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

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

操作是十分的方便，下载插件并安装后，打开XD文件，保证XD文件是当前窗口，然后打开蓝湖XD插件，登录蓝湖账号，效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
此时直接点击“上传到蓝湖”即可。

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

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

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221014/8b55d85a3b35495ca8db1960f4f8a082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221014/055b57dc891248a6a8f14700ac12a0a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221014/af96314f25164fd19fe9d95aee059f70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221014/b0b1b1414dd44105a1a377724eadeeb4.png
[xd_http_help.lanhuapp.com_hc_kb_article_1168665]: http://help.lanhuapp.com/hc/kb/article/1168665/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021052509245378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[XD_http_help.lanhuapp.com_hc_kb_article_1420668]: http://help.lanhuapp.com/hc/kb/article/1420668/