界面概览

MasterGo 的界面设计直观且高效，帮助你快速上手并专注于创作。本章介绍编辑器的画布、工具栏、图层栏、属性栏等核心界面区域。

画布

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

缩放操作

操作	快捷键/方式
放大/缩小	按住 Command 并滚动鼠标滚轮，或使用 + / -
放大特定区域	Z
缩小	Option + Z
恢复默认比例	Command + 0

测量与对齐

• 按住 Option 键，画布上会显示选中图层和鼠标悬浮图层间的距离。
• 选中两个图层，将鼠标移到中间的竖线上，即可显示图层间的距离。
• 拖动图像移动到和另外两个图像相等距离时，画布上会显示具体数字。

像素预览模式

像素预览模式可以快速预览设计图在各种设备上的显示效果。

• 入口：汉堡菜单 -> 视图 -> 像素预览
• 快捷键：Shift + Command + P (Mac) / Ctrl + Shift + P (Windows)

顶部栏

编辑器的顶部栏提供文件管理和协作相关的功能入口。

• 文件菜单：点击文件名右侧下拉箭头可切换文件、查看历史版本
• 协作者头像：显示当前文件的在线成员，点击头像可跟随对方视角
• 分享：通过链接分享文件，可设置查看或编辑权限
• 视图控制：缩放比例、像素网格、多人光标等视图选项

工具栏

工具栏位于画布上方，包含设计时需要使用的各种工具。左侧为常驻工具，右侧为选中图层后激活的编辑工具。

选择与视图工具

工具	快捷键	说明
选择	V	默认激活，点选画布上的任意图层
等比缩放	K	按比例缩放选中的对象，支持选择缩放中心
平移画布	H	拖拽画布视图，按住空格键可激活相同效果

容器与区域工具

工具	快捷键	说明
容器	F	承载所有界面元素，可作为画板或可任意定义边界的组
区域	Q	给画板或图层分组，不是用来构建界面的设计元素
切图	S	框定切图范围，在标注模式会被识别为可直接导出的切图资源

绘制工具

工具	快捷键	说明
形状工具	-	矩形、圆形、多边形、星形等
钢笔	P	自由绘制矢量图形
铅笔	Shift + P	自由绘制
连接线	X	在元素之间添加逻辑说明连线
文字工具	T	创建文本图层

评论与协作工具

功能	说明
评论	使用评论、校对、圈话功能与团队成员互动
插件	使用第三方开发者提供的插件，扩展创作功能

创建与编辑工具

功能	快捷键	说明
创建组件	Option + Command + K / Alt + Ctrl + Y	创建带有继承属性的可复用资产
布尔运算	-	基于多个形状求并集、交集、差集等
编辑模式	Enter	双击或按回车键进入，可编辑矢量图层锚点
蒙版	Control + Command + M / Alt + Ctrl + M	创建剪裁遮罩效果
创建链接	Command + K	为文本图层添加可访问的链接
裁剪图片	-	选中带有图片填充的图层时激活

左侧栏

画布左侧区域包含两个面板，通过顶部标签切换。默认为图层栏。

图层

在图层栏中查看和管理当前页面的所有图层：

• 查看图层关系（锁定状态、蒙版、布尔运算、分组）
• 根据图层图标快速了解图层类型和状态
• 拖拽调整图层顺序和层级关系
• 重命名图层

页面列表：左侧栏顶部显示当前页面名称。一个文件可包含多个页面（相当于独立画布），点击 + 添加新页面，右键页面可添加颜色标签等操作。

锁定图层：选中图层后按 Command + Shift + L (Mac) / Ctrl + Shift + L (Windows)，锁定后不可移动但可在属性栏中修改属性。

资源

切换到资源面板后，可浏览和使用各类设计资源。快捷键 M 快速打开搜索。

• 组件：当前文件的本地组件，以及已订阅的团队库组件。拖入画布即可创建实例
• 图片：设计中使用的各种图像素材，可置入到元素或画布中
• 图标：通用符号和功能图标，拖拽置入画布
• 文本：预设的文本样式和格式，快速排版文字

组件命名时使用 / 可自动分组，如 按钮 / 主要 / 默认。选中多个组件后可创建组件集（变体组件）。

右侧栏（属性栏）

画布右侧为属性栏，上方有三个标签，切换不同模式：

• 设计（原型文件中显示为「属性」）：编辑图层的几何、填充、描边、特效等属性
• 原型（原型文件中显示为「交互」）：设置图层的交互事件和转场动画
• 标注：查看图层的代码标注，自动生成 CSS、iOS 和 Android 代码。仅在有文件查看权限时默认显示，编辑权限下需要手动切换

设计模式属性

选中图层时，属性栏显示以下属性：

属性类别	说明
对齐和分布	自动排列图层位置
位置、尺寸、圆角、旋转	图层的几何属性
填充	设置图层的填充颜色及填充模式
描边	设置描边粗细、类型和颜色
特效	外阴影、内阴影、高斯模糊以及背景模糊
导出	将图层导出为 PNG、JPG、PDF、WebP 或 SVG

未选中任何内容时，可查看文件封面预览、更改画布背景颜色或导出整个页面。

原型模式

在原型模式下，可为选中图层添加交互事件（点击、悬停、按下、拖拽、延时等），并设置目标页面和转场动画。

标注模式

标注模式可查看选中图层的样式属性和代码标注，自动生成 CSS、iOS 和 Android 代码，支持一键复制。

视图选项

点击百分比可显示和隐藏像素网格、多人光标。

缩放设置

首次打开文件时，默认缩放为 100%。可使用 + 和 - 图标调整缩放，或使用键盘快捷键。支持缩放到 50%、100%、200% 等。

触控板操作：

• 两根手指捏合以缩小
• 两根手指张开以放大

对齐像素网格

为了在放置和对齐时获得更高的准确性，可以打开对齐像素网格。

多人光标

当你与团队成员合作时，可以通过多人光标查看他们的操作。团队成员的名称和光标将显示在画布上。如果不想被影响，可以关闭多人光标。

标尺和参考线

标尺与参考线功能帮助设计师更直观、精准地定位及度量图层与元素，统一格式、高效对齐。

标尺

标尺与画布、图层的 X、Y 值相对应。

显示/隐藏标尺：

• 快捷键：Shift + R (Windows) / Shift + R (Mac)
• 菜单：左上角菜单栏 -> 视图 -> 显示标尺
• 视图百分比 -> 显示标尺

显示/隐藏标尺时，同时也会显示/隐藏参考线。

高亮标尺：选中图层后，标尺上会高亮显示图层在画布上投影的宽高和坐标。

画布标尺与容器标尺：

• 画布标尺：以整个画布为绝对坐标系
• 容器标尺：以根容器左上角作为 (0, 0) 的坐标系，选中容器或容器内元素时显示

参考线

参考线以浮动状态显示在图像上方，帮助精确地定位图像或对齐元素。

添加参考线：在标尺显示时，鼠标点击标尺区域，向画布或容器中拖拽出一条参考线。

• 在 X 轴上拖拽出的是竖向参考线
• 在 Y 轴上拖拽出的是横向参考线
• 未拖入容器时松手为画布参考线，拖入容器后松手为容器参考线

调整参考线：

• 拖拽修改参考线位置
• 按 Option 键查看参考线和选中图层的间距

微调参考线：

• 方向键调整距离为 1px
• Shift + 方向键调整距离为 10px

删除参考线： 将参考线从画布拖拽到标尺区域松手，或选中参考线按 Delete 键。

设置文件封面

仅适用于 MasterGo 设计文件，对文件具有可编辑权限的任何人都可以设置封面图。

封面设置

• MasterGo 文件封面尺寸为 16:9，建议尺寸 1600x900
• 默认情况下使用第一个页面作为封面展示
• 自定义封面：选中容器进行封面绘制后，右键选择"设为封面"
• 恢复默认封面：右键单击容器，选择"恢复默认封面"

布局网格

布局网格帮助我们对齐容器内的元素，保持设计在不同平台和设备上的逻辑性和一致性。只能将布局网格应用于容器。

添加布局网格

• 布局网格和自动布局不能同时存在于同一容器
• 选中容器后，在右侧属性面板中找到"布局网格"选项
• 点击加号创建默认网格，点击左侧图标可打开属性设置

布局网格的类型

1. 网格

适合需要精确控制尺寸的设计场景（如 icon），默认网格尺寸为 8。可添加多个网格，配合不同尺寸和颜色。

2. 栅格列、栅格行

适合网页、移动端设计中的响应式设计。可设置以下属性：

属性	说明
数量	栅格的数量，设为 0 或不输入则自动计算
颜色	栅格的颜色
布局方式	拉伸 / 左侧 / 居中 / 右侧 / 顶部 / 底部
列宽/行宽	每列或每行的宽度（拉伸模式下自动计算）
槽宽	栅格之间的间隙
偏移/边距	栅格开始位置或距离容器边缘的距离

控制布局网格的显示

• 全局控制：快捷键 Shift + G (Mac) / Shift + G (Windows)，或从视图设置菜单切换
• 单个控制：点击属性面板中布局网格后的眼睛图标
• 全局控制只对自己生效，不影响协同伙伴
• 布局网格不会随切图导出，也不会在原型播放时显示

布局网格样式

布局网格可以添加为样式进行复用，支持添加到团队库使用。

布局网格与约束

在设置了布局网格的容器中，容器内部元素的约束将会作用在最近的栅格行或栅格列上，可实现更精细的响应式设计。