教程 > 添加和导入设计 > 上传Figma设计稿

上传Figma设计稿

摹客支持Figma。通过摹客Figma插件,可以上传Figma设计稿到摹客平台查看标注、下载切图等。

安装Figma插件

在摹客官网(https://www.mockplus.cn/download/figma-intergration)点击“安装”按钮,随后自动跳转到Figma商店中,点击“Try it out”完成安装。

打开插件

插件安装好后打开Figma,任意打开一个项目后,在画布空白处右键 -> Plugins -> Mockplus。

注册和登录

使用摹客平台账号即可登录。(注:注意在设置内选择对应的语言,英文界面无法登录摹客中文账号。)

切换团队/切换账号

点击右上角的“更多”按钮,可以进行“切换团队”和“切换账号”的操作。

新建项目

点击项目下拉框进入选择项目页面,在页面右侧点击加号图标“+”,进行新建项目的操作。

新建好项目,可将页面上传到指定分组内。

标记切图

选中需要切图的图层或编组,在插件上点击“添加切片图层”,就可以一键完成切图。上传到摹客平台后,会自动生成各个平台尺寸的切图,例如:iOS的@1x、@2x、@3x。

选择设计稿倍率

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

倍率选择可参考下图:

自动识别画板大小

点击在“画板大小”的列表后方的自动识别按钮,会根据当前设计稿的尺寸,自动适配正确的倍率。

上传 Section 画板

当上传范围选择“上传所选画板”时,并且选中单个或多个 Section 时,支持上传整个 Section 或 上传 Section 内的 Frame。

在出现下方选择内容界面,选择“上传 Section”时,会将整个 Section 作为 Frame 上传到协作平台。(注:Section 画板大小限制 10000*15000 px ) 

当选择“上传 Frame”时,仅上传 Section 内包含的 Frame 到协作平台,不包含 Section 画板本身。

上传高质量设计稿

在插件的“设置”中,如果勾选了“上传高质量设计稿”,上传到网页端的设计稿(页面)会比之前更加清晰。

上传超清切图

在插件的“设置”中,如果勾选了“上传超清切图”,在上传切图的时候插件会把对应倍率的图片全部上传,在网页端下载切图时就能得到最清晰的图片(即原图,但勾选了此选项,上传速度会变慢)。

通知成员

设计稿成功上传后,可指定团队中的成员接收更新通知。点击插件上的“通知成员”,在弹窗中选择需要接收到通知的成员,同时还可以在下方文本框中添加具体的更新内容。