设计师和开发者占据着不同的世界，使用着不同的工具。但是在实际工作中，设计师和开发人员之间能否密切合作直接影响最终产品的呈现，两者之间建立良好的沟通和协作方式是非常必要的。

MasterGo 作为一款面向团队的专业 UI/UX 设计工具，始于设计却不止于设计。从诞生之初就带有协作基因，除了设计师，产品经理、开发人员都可以加入进来。

本篇 MasterGo 上手指南主要面向开发者，帮助他们了解并正确使用 MasterGo，让设计和代码连接更紧密，加速提升交付效率。

一、MasterGo 能为开发者做什么？

MasterGo 提供了无缝的设计交付体验。

*自动标注，设计交付无缝衔接

MasterGo 标注模式提供“自动标注”功能，可以完整而清晰地生成设计图中每个元素的尺寸、位置、颜色、间距、字号等标注。一个分享链接，团队内的开发者们就可以随时查看设计图。

一键切图，高效交付开发

MasterGo 切图功能，预设 iOS、 Android、Flutter 设备的尺寸、倍率、前后缀、格式等参数。向开发交付设计稿时，无需再手动一个个切图并且设置参数导出，一图即可精准匹配多设备、多尺寸使用需求，更高效、精准地交付设计稿。

设计图同步蓝湖，交付选择更多样

虽然用 MasterGo 也可以查看设计图标注，但由于大多数工程师习惯使用蓝湖查看标注。因此，与蓝湖联动后，MasterGo 设计图文件可「一键同步至蓝湖」，满足工程师的使用习惯。

评论功能，沟通效率原地起飞

设计师与开发人员沟通不畅无疑会影响最终的产品呈现。当开发者对于设计稿存有疑问时，可以通过MasterGo 「评论」功能，直接在设计图对应的地方添加评论，及时跟设计师沟通，更高效地沟通与调整设计图。

开放平台

通过 MasterGo 提供的 API，我们可以将整个设计稿的权限开放给开发者，开发者获取到所有的基础信息之后，可以开发自己的插件。对于团队来说，就可以开发一些更能够提升团队效率的插件。

二、上手 MasterGo 的准备工作

Step 1：注册一个 MasterGo 账号

方法一：你可以使用 微信/钉钉，扫描二维码直接注册你的 MasterGo 账号；

方法二：使用蓝湖账号，直接授权登陆 MasterGo；

方法三：你可以通过手机号/邮箱，注册 MasterGo 账号；

注册成功后，就可以和团队其他成员开始协作了！ Step 2：被邀请进入团队，开始协作

已经在团队中的成员，可以将你邀请进入团队，这样无需发送链接也能自行进入到团队内的项目文件中，获取样式代码和下载切图。

方法一：团队中的成员可以直接输入用户名/手机号/邮箱，发送邀请。你将通过MasterGo/手机短信/邮箱收到邀请信息，点击链接即可加入团队。

方法二：团队中的成员使用链接，发送至被邀请者，打开链接，选择「加入团队」即可。

三、开发者操作流程

完成以上准备工作即可开始使用 MasterGo 与团队进行协作，接下来，我们继续解锁更多开发者们需要关注功能和操作吧！

01 打开文件链接

首先，与设计师协作时，通常开发者会从设计师手中获得一个 MasterGo 的设计文件链接。

推荐使用 Chrome（谷歌浏览器）打开 MasterGo，或者使用 MasterGo 客户端，一般情况下，一个设计文件对应一个 MasterGo 链接，如果经常要打开，可以把这个文件链接进行收藏，方便下次找到。

如果只需要预览设计图，不需要查看设计图标注和导出切图，不用登录 MasterGo，按住 Ctrl+鼠标滚轮 可以缩放网页，按住空格可以拖拽画布。

02 查看标注

MasterGo 支持查看标注，但必须要登录且有查看权限才行。

开发人员收到文件链接并登录后，会进入到此文件的标注模式，如下图所示，点击设计图上的一个按钮，介绍一下图上各的区域功能。

1、页面

一个 MasterGo 文件中可以创建多个页面，开发者可以点击不同的页面来查看页面内的内容。

如果开发者要查看的内容分布在多个页面，设计师一般会提前跟开发沟通好需要查看哪个页面。 如果开发人员要查看的内容均在一个页面内，设计师只需要分享这个页面链接，开发者打开文件后看到的就是这个页面内的内容。

2、图层栏

这里是图层树，开发人员在查看设计稿时，可以通过左侧的图层树查找图层并快速定位到某一个元素。

如何搜索&筛选图层？

左侧图层栏提供「搜索和筛选图层」功能，点击「搜索」图标旁的下拉菜单，即可在此筛选想要搜索的图层类型，选择好图层类型后，可以在搜索框中属性图层名即可搜索指定元素图层。

如何在画布中快速定位到图层位置？

MasterGo 提供两种在画布中快速定位到指定图层的方式，第一种是在左侧图层栏中选中该图层，双击该图层的图标，画布即可快速定位到这一图层的位置。

第二种方式，选中图层然后按快捷键 shift + 2 或者 Cmd + 2，即可在画布中快速定位该图层。

3、鼠标选中图层

在查看设计稿时，你是否遇到这样的问题，鼠标点击某一个元素的时，总是会点击到最底层的元素，但我想选中他的上一级的图层？

这是因为仅有查看权限的标注模式种，点击图层具有穿透效果，可以点击到最底层的元素图层，如果不想点击到最底层的元素，可以使用 Cmd/Ctrl 键忽略穿透效果，点击到最外层的图层。

4、测量间距

选中图层后，鼠标光标移至其他图层处，会自动测量出选中图层与其他图层的距离。

5、查看标注&复制代码

当设计师完成设计图后，「MasterGo」能够自动识别设计图样式参数，工程师可以在「标注模式」下查阅并复制标注信息。

查看标注：你需要进入到「标注模式」，点击设计图，在右侧展示标注面板，可以查看该设计图元素大小、描边、颜色、投影、圆角、字体、交互等信息，当图层引用了样式，或者本身为一个组件/实例，同样能在标注模块中快速识别。

配置标注：MasterGo 支持选择不同的开发平台，可以满足你在 iOS / Android /Web 场景的开发需求；

除了支持选择开发平台外，你还可以配置颜色模式。点击「颜色」右侧的下拉菜单，支持“16 进制、RGB、RGBA。”

复制标注代码：MasterGo 支持所有标注区域的属性均可通过点击实现一键复制，可以有效提高开发工程师获取图层属性的效率。

为了更好的提高工作效率，你可以直接复制自动识别的标注信息，粘贴至代码编辑器。 点击「代码」右侧的复制图标，单击后，你会看到“已复制”的提示。

另外，标注区域支持切换多种色彩模式。

想了解更多标注详情，请前往帮助中心 https://mastergo.com/help/collaboration/mark-mode

03 导出切图

切图工具可以圈出画布中的任何区域，工程师可以通过设置倍率、前缀和后缀的方式生成和导出 PNG、JPG、WEBP和PDF等不同类型的设计图。

MasterGo 提供两种导出切图的方式，分别为：批量导出图标/切图、单独导出图标/切图

1、批量导出图标/切图

当需要交付给研发多张切图时，设计师使用切图工具切好图后，研发进入到设计文件可通过 3 种方式在切图列表中，批量导出文件内的“所有切图”。

操作方式 -可以在左侧菜单栏，点击「文件」图标并选择「导出所有切图」。

-切换到标注模式下，右侧栏点击【导出所有切图】按钮，可以弹出导出框，在导出框内勾选需要导出的切图，点击弹框内右上角【导出】按钮即可。

-使用快捷键Shift + Command + E（Win: Shift + Ctrl + E）打开切图列表，选中并双击切图即可定位其位置。在切图列表中勾选需要导出的切图点击导出，即可批量导出你需要的切图。 Tips：

1.只有设置了导出项的切图会导出，没有设置导出项的切图不会被导出。

2.导出图标的话，建议使用 SVG格式保证图标缩放不会模糊，如果需要用PNG格式，可以导出 x3 三倍图的尺寸然后缩放至对应的大小，以确保图标清晰。

2、设计图内单独导出图标/切图

除了在切图列表中批量导出也能单独导出设计图上的任何元素，比如，导出图标。

按住 cmd 忽略穿透效果的快捷键，即可完整的选中这个图标，然后在右侧属性面板中选择导出设置项，点击导出即可导出单个图标/切图。

3、导出整个界面

当我们需要导出这一整个界面时，只需要选中整个界面，然后在右侧栏中点击「导出」并设置导出的倍数、格式后，即可完整的导出所选的界面。

04 文件管理

当同时在做好几个项目的设计开发，那是不是要同时收藏好多个链接呢？

答案是不需要，MasterGo 工作台中的主页会按照最近打开顺序保存文件，点击即可查看文件内容，不用每个设计文件链接都收藏了。

另外，如果已加入到团队中，也可以进入团队的文件类型寻找并查看对应的文件。