MasterGo

MasterGo 是什么 ?

面向团队的专业 UI/UX 设计工具，支持多人在线协作，设计组件跨团队成员复用
交付研发无需第三方工具，无系统限制。真正实现产研协同 All in one
谁在使用它

UI 设计软件的发展近代史

ps[文件格式 .psd 双击打开一个文件发现不是想看的再送掉]

→ Sketch [原来可以把所有的东西放在一个页面，很多人认为 sketch 是一个划时代的东西，就好像美图秀秀之于ps, 全世界范围内火起来的第一款，15 16年行业内认为他就是未来，其实也不是。没有摆脱安装包的魔咒，新的版本文件在老版本上打不开。

→ Figma 云平台基于网页的，不用担心版本，协同，跨平台面向团队的专业 UI/UX 设计工具，支持多人在线协作，设计组件跨团队成员复用 mastergo

sketch 之于 ps 就好像是 Fireworks 之于IE。而取而代之的成为第一的是模仿 Fireworks 并对 Fireworks 进行了半步迭代的 Chrome

MG能帮我们做什么

对于产品经理而言，支持在线绘制原型，快速还原产品真实体验，实时查看最新设计稿，一键生成高保真原型。
对设计师而言，文件云端存储实时更新，多人协作。
1. 设计系统，保证设计一致性：
  
  可复用样式：文字、颜色、特效可设置为样式一键复用。修改样式，全局同步。
  
  灵活的组件：快速编辑并设置覆盖，配合样式，实现“改一处，改所有”。
  
  同步给团队：只需点击几下，所有组件样式都可共享给整个团队使用。
对于研发而言，随时随地查看设计图，自动获取标注代码，下载多种格式切图。
团队协作只需一个链接，文件任何一处修改都能实时更新、同步，文件全在云端，所有人只需通过链接就可以随时随地查看最新稿件。
社区：MasterGo 资源广场，MasterGo 插件广场

如何在 MasterGo 上开展一个新项目

创建团队 ➡️ 搭建项目组件库 ➡️ 应用设计规范至项目中 ➡️ 做好设计资产管理

创建一个团队并邀请成员加入团队。以往与团队成员协作时，你是否遇到过这样的情况：不同版本文件传来传去，稍不注意就会搞错版本；搭建了一套完善的组件库却很少有团队成员使用；设计师间无法相互学习；创建团队后，团队成员可以随时随地访问团队内文件，同时也方便团队管理者统一管理成员权限，无需每个文件单独设置。

做好项目设计资产管理。比如，设置文件封面，清晰展现设计信息；设置文件分组，精细化管理设计资产

开始使用

界面组成结构，按照是否需要团队协作的维度进行划分，分为个人+团队两大类。

- 草稿箱 = 个人文件夹
- 团队区
	- 项目
		- 文件

资源社区和 Figma 一样，先添加常用插件降低使用心智负担
文件页 设计 原型 标注 原型可以拖跳转标注可以看代码设计可以做设计切图各种格式的图

画布与图层

画布可以向任意方向无限延伸，如果你想在画布中设置一个固定的画框，你只需新建一个容器。

操作如下：

放大/缩小： command + 双指滑动
测量：按住 option 键，会显示选中图层和鼠标悬浮图层的距离; 标注模式下也可以。可以通过方向键微调
修改文件名称：双击图层栏中的图层；选中图层 command+R
选择工具：V
创建容器：F，或者在选中元素后按 shift+A
长方形 reactangle: R
圆形 oval : O
直线 line: L
文本 text: T，同时按住 control + command + 空格键，就会出现表情符号选择器。
连接线：X
移动视图：空格+拖动
隐藏/显示操作界面：command+\
使用资源库：选中页面中的元素，点击图片资源即可向元素中置入图片或文字
设置文件封面：MasterGo 文件封面尺寸为 16:9，1选中容器，右键单击，从选项中选择【设为封面】。
布局网格：同一个容器的属性中，布局网格和自动布局不能同时存在。布局网格有三种类型，分别是：网格、栅格列、栅格行。容器内部元素的约束将会作用在最近的栅格行或栅格列上。
描边与填充：每个图层都可以有多个边框，你可以用纯色、渐变或图片来填充边框，给边框设定不同的粗细、形状、颜色和混合模式，支持四边描边、单边描边和自定义描边，也可以设置边框的位置和虚线。
阴影与模糊
对齐分布，右侧属性栏的顶部，可以看到对齐分布的选项。
智能排列：快速轻松地调整画布上对象的间距和排列，非常适合快速调整复杂布局。智能排列适合：调整多个图像之间的垂直或水平间距。将选择的图像排列为均匀和非均匀网格。将图像重新排列或排序。
自动布局：• 单击属性面板的自动布局项中的「+」• 右键单击该项目并在菜单中找到添加自动布局• 使用 ⇧ Shift + A 键盘快捷键。
1. 调间距：右侧属性栏，拖动手柄，单击手柄并在输入框中输入
2. 调边距：右侧属性栏，option+手柄调双边，shift+option+手柄调四边，单击手柄并在输入框中输入
3. 调整设置：适应，固定，充满
4. 自动布局分布式：右侧属性栏
样式: 可以将圆角，「自动布局」中的间距、边距，文字，颜色，描边，特效和布局网格创建为样式。方便复用，做设计系统时尤其方便。