教程 > 摹客协作 > 添加和导入设计 > 上传Adobe XD设计稿

上传Adobe XD设计稿

摹客支持Adobe XD。通过摹客XD插件,可以上传XD设计稿以进行标记切图等。

安装XD插件

在摹客官网(https://www.mockplus.cn/download/idoc-xd)下载摹客摹客XD插件安装文件并双击进行安装。注意:你需要将Adobe XD 更新到13.0以上版本。

打开插件

插件安装好后打开XD,在「菜单栏>插件」找到摹客插件,选择并打开。

注册和登录

使用摹客平台账号(在Mockplus、摹客上通用)即可登录。如果你看到的界面是英文的请点击左上角设置图标按钮切换插件语言。

选择项目和分组

通过下拉菜单选择项目和分组,设计稿将上传至该项目对应的分组中。

新建项目

通过点击加号图标进行新建项目的操作。

在新建项目时可选择项目集,将项目创建在目标项目集内。

切换团队/切换账号

点击右侧“更多”图标,可选择团队/切换账号。

标记切图

选中需要切图的图层或编组,在图层栏中点击「添加导出标记」图标。

此时图标Clipboard Image.png变黑,提示「添加导出标记」变为「取消导出标记」,此时切图操作便完成了。

自定切图尺寸

在 Adobe XD 中如何自定切图尺寸呢?看看下面的操作方式:

在 XD 中绘制一个矩形,将矩形调整为你所需的切图尺寸。

同时选中图标和矩形,将二者合并成组。

对分组“添加导出标记”,接着使用摹客插件将画板上传摹客即可。

选择设计稿倍率

点击倍率下拉框,根据设计稿的画板大小,选择设计稿对应的倍率。例:750px*1334px的设计稿对应 @2× 。

上传设计稿

标记完成切图之后,一键将设计稿上传至云端项目中,提示完成后便可在云端查看到刚才上传的设计稿。(注:操作过程中,如果误点击了“上传”,可在上传界面右上角点击“取消”,本次上传将会立即中止。)

状态图

在XD中选中单个画板并勾选“上传所选画板”,点击“上传”按钮,插件将自动执行上传状态图操作。状态图详细操作可点击查看:状态图

添加更新说明

用插件上传设计稿修改时,可为本次修改添加更新说明,方便其它同事快速了解修改内容。点击插件界面下方“添加更新说明“按钮,该说明将会和设计稿一同上传至摹客。

更新说明添加后,在摹客网页端-“动态”部分,就可以清楚地查看到更新说明信息啦!

导出高质量设计稿

如果你想导出非常高清的设计稿,请勾选“上传高质量设计稿”选项,设计稿会以原有尺寸的两倍宽度进行上传。(但这样做会牺牲摹客的性能,如果你感觉在摹客的画板部分有明显的卡顿,请勿勾选此选项。)

标注扩展区域

在插件-设置中,若勾选了“标注扩展区域”,图层如果有阴影、边框、模糊等扩展区域,上传摹客后会显示最大区域;若不勾选,上传摹客后的标注将不包含阴影、边框、模糊等,仅显示图层本身的大小。