排版是设计师重要的工作内容之一，比如说，修改按钮文字要排版、调整顺序要排版、适配多种屏幕要排版，设计师们不是在排版就是在排版的路上。但设计师不应该花太多的时间在排版上，想让排版这件事变得更轻松，一定要试试 MasterGo 自动布局功能。

举个例子，以往设计师在设计一个按钮时，当文字长度发生变化，需要手动重新调整按钮的宽高尺寸。而通过 MasterGo 添加自动布局后，修改按钮内的文字时，按钮会自动跟随文字长短变化宽高。

或者说，B 端设计师会经常遇到表格设计需求，做好表格后，有时会需要增加或者删除某一行，或者调整某一行的顺序，以往只能手动挪动多行来变更层级顺序，增删之后还需要重新调整表格高度。通过 MasterGo 添加自动布局后，增加、删除某行时，表格会自动调整尺寸。想要改变表格中某行的顺序，只需按方向键上、下移动某行就搞定了。

以及，卡片作为设计中经常会遇到的组件，通常情况下，卡片内容需要随着卡片宽度的变化调整，这样才能更好地适配跨设备的不同屏幕。通过 MasterGo 添加自动布局后，不需要为不同屏幕尺寸设计不同的卡片样式，拉伸容器就能让它跟随你的心意变化。

自动布局虽然看起来很复杂，但如果明白了其中原理，用起来会非常简单高效。接下来小编就通过 4 个操作步骤，带领大家一起体验自动魔法的奥秘。

首先，在 MasterGo 设计模式下，选择一个容器或者多个图层后，设计师们有三种方式可以创建自动布局容器：点击右侧属性面板中自动布局的“ + ”，右键菜单列表中选择“添加自动布局”，或者使用快捷键Shift + A。

其次，设计师们可以在画布中或者自动布局面板中调整自动布局内图层间的距离（自动布局容器内，图层与图层之间的距离称为间距，图层与容器边框之间的距离称为边距）。

如果想要在右侧面板处修改间距或边距，设计师可以在右侧栏自动布局面板中手动修改或直接按住间距图标左右拖动调整【间距】【上下边距】【左右边距】的数值，让容器内所有小框按照你希望的间距排列。点击【展开】图标还可以逐一调整容器与内部元素的上、下、左、右边距，满足不同调整需求。

如果想在画布上修改间距或边距，设计师可以先选中一个自动布局，然后在画布中能够很直观地看到间距和边距的调节手柄，拖动手柄就可以快速调节间距和边距了。当然，也可以像在右侧属性面板上的操作一样，点击手柄即可输入数值来精确控制自动布局内图层之间的距离。值得注意的是，当间距为负数时，此时图层之间会形成堆叠效果。

当然，MasterGo 自动布局还提供了多种对齐的方式。设计师选中自动布局容器时，在对齐面板中选择对齐方式，自动布局内的所有子图层会按照所选方式进行对齐。

最后，建议设计师们熟记一些MasterGo 的快捷键，比如「增加」可以通过快捷键 Command + D 来复制子图层，「删除」通过 Delete 键来删除一个子图层，「调整顺序」通过方向键来快速调整图层的顺序。

以上就是 MasterGo 自动布局的一些基础操作，可以满足设计师们一些简单的响应式效果。但是，想要实现更复杂的整体界面自动响应的效果，还需要进一步掌握调整大小的组合技，嵌套容器大法等技巧，实现更高阶的自动魔法，设计师们可以通过 MasterGo 多尝试、多体验、多创造！

文章纠错