教程 > iDoc > 基础教程 > 使用插件

使用插件

摹客iDoc PS插件

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

安装PS插件

在摹客官网(https://idoc.mockplus.cn/download/ps)下载摹客iDoc PS插件安装文件并点击进行安装。

打开插件

插件安装好后打开PS,在「窗口>扩展功能」找到摹客 iDoc 插件,选择并打开。

注册和登录

使用摹客平台账号(在 Mockplus、摹客 iDoc 上通用)即可登录。

选择项目

通过下拉菜单选择项目,设计稿将上传至该项目中。

选择项目

新建项目

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

新建项目

切换团队/切换账号

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

标记切图

选中需要切图的图层或编组,点击「标记切图」。

将在名称前增加“-e-”,「标记切图」变为「取消切图标记」,此时切图操作便完成了。(注意:标记切图只需标记需要切图的图层,标记无用的切图过多可能会导致上传失败。)

标记切图

选择设计稿倍率

点击倍率下拉框选择设计稿对应的倍率,也可以直接默认,在Web端可修改设计稿倍率。例:750px*1334px的设计稿对应 @2× 。

选择设计稿倍率

上传设计稿

标记完成切图之后,一键将设计稿上传至云端项目中,提示完成后便可在云端查看到刚才上传的设计稿。

上传设计稿

状态图

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

上传状态图PS

重置画板ID

在插件右上角点击该图标 PS更多图标 ,在弹出菜单中选择“重置画板ID”,可以对已经上传的文档进行重复上传。

重置画板ID

同步画板

如果在PS中删除了几个画板,再次上传设计稿时,勾选插件设置中的“上传全部画板时自动检测不对应的画板”,ps中已删除的页面在iDoc中也会同步删除。

0-2


摹客iDoc Sketch插件

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

安装Sketch插件

在摹客官网(https://idoc.mockplus.cn/download/sketch)下载摹客iDoc Sketch插件安装文件并点击进行安装。

下载插件

打开插件

插件安装好后打开Sketch,在「Plugins(插件)」中找到摹客 iDoc 插件,选择并打开。

打开插件

注册和登录

使用摹客平台账号(在Mockplus、摹客 iDoc 上通用)即可登录。

注册和登录

选择项目

通过下拉菜单选择项目,设计稿将上传至该项目中。

选择项目

新建项目

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

新建项目

切换团队/切换账号

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

切换账号

标记切图

选中需要切图的图层或编组,点击Sketch 右下角的 Make Exportable 便可完成切图标记,无需再设置多种切图倍率,iDoc将自动生成不同倍率的切图。

选择设计稿倍率

点击倍率下拉框选择设计稿对应的倍率,也可以直接默认,在Web端可修改设计稿倍率。例:375pt*667pt的设计稿对应 @1× 。

选择倍率

上传设计稿

点击上传所选或全部上传便会将设计稿资源一键上传至 iDoc,设计师和开发可登录摹客 iDoc 查看标注与下载切图。

状态图

在Sketch中选中单个画板,点击 iDoc 插件面板上的“上传为状态图”按钮,即可上传状态图。状态图详细操作可点击查看:状态图

状态图


摹客iDoc XD插件

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

安装XD插件

在 XD菜单栏找到「插件 > 管理插件 > 所有插件」,在面板中搜索 iDoc 即可快速安装 XD 插件。或者去摹客官网(https://idoc.mockplus.cn/download/xd)下载摹客iDoc XD插件安装文件并双击进行安装。注意:你需要将Adobe XD 更新到13.0以上版本。

打开插件

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

Mac OS:

Windows:

注册和登录

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

选择项目

通过下拉菜单选择项目,设计稿将上传至该项目中。

新建项目

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

切换团队/切换账号

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

选择团队1

标记切图

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

标记切图

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

取消标记切图

选择设计稿倍率

点击倍率下拉框选择设计稿对应的倍率,也可以直接默认,在Web端可修改设计稿倍率。例:750px*1334px的设计稿对应 @2× 。

选择设计稿倍率

上传设计稿

标记完成切图之后,一键将设计稿上传至云端项目中,提示完成后便可在云端查看到刚才上传的设计稿。

XD上传设计稿

状态图

在XD中选中单个画板,点击 iDoc 插件面板上的“上传为状态图”按钮,即可上传状态图。状态图详细操作可点击查看:状态图

XD状态图

下一章节 手动标注