您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

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

在这里插入图片描述
现在的公司是直接提供XD文件,所以需要先下载XD软件:

软件下载链接

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

XD软件下载切图

打开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/

完成!!!


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进