在上一章中，你已经开始了从 lo-fi 到 hi-fi 的过渡，而这也标志着我们的旅行规划应用正式进入实际的视觉设计阶段。到了这个阶段，保持专注、精确和有意识地设计就变得非常重要，因为你的高保真界面稿将直接成为开发人员后续实现的基础，而清晰性和一致性正是其中的关键。要在细节和灵活性之间找到合适的平衡，可能确实需要一点时间——这完全正常。好在，Figma 提供了一整套工具，能够帮助你减少错误、组织内容，并更快地完成迭代。
在这些工具中，最强大的之一就是 Auto layout。它可以帮助你构建响应式和自适应的 UI 结构，让设计在扩展性和效率上都大幅提升。
这个主题一开始可能会让人觉得有点进阶，所以我们会先从核心理论讲起，再逐步进入实际应用。非常建议你在书中示例之外，也继续多做尝试和练习，尤其是对于那些你目前还觉得陌生的功能。你越多把学到的东西真正用起来，就会越快建立信心。所以，打开你的 Figma 文件，我们开始吧！
你将要学习的内容包括：
- 认识 Auto layout
- 通过调整尺寸与约束实现响应式
- 将 Auto layout 应用到我们的界面中
在本章结束时，你将会对 Figma 中的 Auto layout、resizing（尺寸调整） 和 constraints（约束） 有扎实理解，并能够运用它们创建响应式视图。
认识 Auto layout
让我们从 Figma 最强大的功能之一开始：Auto layout。这个工具几乎贯穿了设计流程的各个方面，从优化界面的整体结构，到提升工作流的效率与速度。乍一看，Auto layout 似乎和你在上一章中使用过的网格有点相似——当时我们用网格定义了旅行规划应用的视觉系统。这两者确实都能帮助你在设计中保持精确性和对齐一致，但它们之间有一个关键区别：网格是静态的。
网格能够为一致性打下坚实基础，但当内容本身发生变化时，它并不会自动适应。如果你曾经遇到过这样的情况——某个文本标签变长了，或者你需要把一个新元素塞进已有设计中，于是你不得不手动重新调整间距——那你一定已经体会过，布局到底有多容易“崩掉”。
而 Auto layout 则是动态的。一旦你设置好规则，剩下的事情就交给 Figma：它会根据需要自动调整元素的位置与间距，而这也正是它真正“神奇”的地方。
你可以这样理解：有了 Auto layout，你做的就不再只是“画出一个看起来不错的界面”，而是在构建一个能响应变化、行为可预测、并且能帮你避免那些细小却致命错误的灵活结构——而这些错误，往往直到为时已晚才会被发现。
在更深入地解释 Auto layout 是如何工作的之前，不妨先回顾一下你到目前为止的进展。现在，你应该已经意识到：构建一个扎实的界面，远不只是把按钮和文字摆到屏幕上那么简单。在第 4 章《使用矢量形状，以移动优先方式进行线框设计》中，你用简单形状和结构搭出了第一版线框图，关注的是信息层级与流程，而不是视觉表现。而在第 5 章《使用网格、颜色与排版进行一致性设计》中，你又通过字体、颜色和间距系统，把清晰度和个性真正引入了界面。
而现在，终于到了把这两层内容真正连接起来的时候了：去构建出真实的、可扩展的、可响应的布局。接下来，我们就更仔细地看看 Auto layout 是如何工作的，以及它将如何让你的界面真正“活起来”。
什么是 Auto layout？
Auto layout 是 Figma 中最强大、也最核心的功能之一。一旦它被应用到某个 frame 上，这个 frame 就会被转化成一个动态容器——它会根据自身内容自动增大或缩小尺寸。
这种行为使得 Auto layout 特别适合用于创建那些需要随着内容变化而平滑适应的结构，比如列表、菜单，以及各种组件。每当你在其中添加一个新元素，frame 都会自动重新计算自己的尺寸和间距，以保持布局的一致性。
图 6.1 – Auto layout 根据新增列表元素自动适应
从很多角度看，Figma 里的 Auto layout 都是受现代网页布局系统 CSS Flexbox 启发而来的。在网页开发中，Flexbox 是一种根据方向、对齐、分布和间距等规则，在一个容器内部排列元素的系统。开发者不需要手动去摆放每个元素，而只需定义容器应该如何表现，浏览器就会自动按照这些规则完成布局。
Figma 把同样的逻辑，以可视化方式呈现了出来。当你开启 Auto layout 时，本质上就是在创建一个类似于 CSS 中 Flexbox 父容器的灵活容器。你可以定义：元素应该是水平堆叠还是垂直堆叠；它们如何对齐；元素之间保留多少间距；以及当内容变多或变少时，它们应该如何响应。
例如，你可以让一个按钮在文字标签变长时自动变宽；你也可以让一个卡片组件在标题、图片和描述文字长度各不相同时，依然维持稳定而一致的内部间距。
这种与 Flexbox 的关联，并不仅仅是“有点像”而已。它意味着，当设计进入开发阶段时，开发者几乎可以直接把你的布局行为翻译成代码。Figma 中一个使用了 Auto layout 的 frame，和一个设置了 display: flex 的 div 十分接近——你在 Figma 中做出的每一个布局决定，通常都能对应到一个真实的 CSS 规则，比如 justify-content、align-items 或 gap。
以这种方式去思考，你就不只是做出一个视觉上整洁的界面，而是在设计一个结构上已经为开发准备好的系统。这会训练你同时像设计师和工程师那样去思考。
虽然一开始看起来可能有点复杂，但真正学会如何高效使用 Auto layout，往往会对设计的质量和精确度带来巨大影响。在下一节中，你会更深入地了解其中每个功能；不过现在，先从整体概览开始。
所有与 Auto layout 相关的设置，都位于右侧边栏中。和其他上下文工具一样，只有当你选中了一个已经启用 Auto layout 的元素时，这些选项才会显示出来。
你可以把 Auto layout 应用到：
- 空的 frame
- 已经有内容的 frame
- 多个已选中的图层
- group 和 component（组件将在第 7 章《在协作工作区中构建组件与变体》中介绍）
如果你选中的是一个 group，并对它应用 Auto layout，Figma 会自动把这个 group 转换成 frame。原因很简单：Auto layout 是一个基于 frame 的功能。
一旦通过边栏按钮或快捷键 ⇧ + A 启用 Auto layout，右侧边栏中就会出现一个专门的 Auto layout 区域，其中包含完整的一组设置项，用来定义元素该如何排列和对齐。
图 6.2 – Auto layout 面板
接下来，我们就来逐项看看这个 Auto layout 区域中的设置到底分别意味着什么。
Direction（方向）
这个设置定义了 frame 内部元素沿着哪一个主轴进行排列。当你为某个 frame 启用 Auto layout 之后，这个 frame 就会变成一个容器，而放在其中的每一个项目，都会成为这个容器的子元素。Direction 控制项决定了这些子元素会沿着哪条主轴流动，从而塑造出整个布局的基本结构。
图 6.3 – Auto layout 的方向选项
下面分别看看每个 Direction 选项代表什么：
A – Freeform / Remove auto layout
这个选项会把选中 frame 上的 Auto layout 结构移除，让它恢复成手动定位状态。如果你想从头重新组织某个布局，这会很有用。
B – Vertical direction
元素会沿着垂直轴（y 轴） 进行堆叠，从上到下排列。这个模式非常适合用来构建列表、垂直菜单，或者信息流这类每个项目都顺次往下排的界面。
C – Horizontal direction
元素会沿着水平轴（x 轴） 排列，从左到右展开。它常用于按钮行、标签页或横向菜单。
D – Grid layout
这种布局会把内容组织成行列结构。和 Wrap 那种会根据空间限制自动换行的方式不同，Grid 让你能够精确控制列宽、行高、间距以及单元格跨越方式。它特别适合用于仪表盘、图库，或者像 bento box 那样结构清晰的布局。
E – Wrap items
这个开关只会在 Horizontal direction 激活时出现。开启后，超出可用宽度的元素会自动流入下一行，从而形成多行排列，而不需要滚动或溢出处理。它尤其适合标签系统、按钮组，或者响应式工具栏。
选择正确的方向，不仅会决定内容在视觉上的流动方式，也会进一步影响后续有哪些布局行为和尺寸调整选项可以使用。接下来你会看到：不同方向会各自带来不同的逻辑与可能性，从而帮助你构建真正灵活、自适应的 UI。
Gap（间距）
当一个启用了 Auto layout 的 frame 中包含多个元素时——无论它们是纵向堆叠还是横向排列——Figma 都会自动在它们之间加入相等的间距。这个间距就叫作 Gap。你可以随时在右侧面板中自定义这个 Gap 的数值，只需输入一个数字，就能精确地决定元素之间应该相隔多远。
这样，你就可以在不需要手动拖动图层的前提下，维持布局中的节奏感与结构一致性。
图 6.4 – 对象之间的水平 Gap 设置
在水平流或垂直流布局中，你还可以把 Gap 的值设置为 Auto。这样，Figma 就会把可用空间平均分配给各个元素。这在响应式布局中特别有用，因为空间不再是固定的，而是需要被动态管理。
Gap 的数值，会直接影响你的界面看起来是更紧凑还是更宽松。它和 Direction、Padding 一起，共同决定了布局的视觉密度和层级关系。
Padding（内边距）
这个属性定义的是：frame 内部内容与 frame 边缘之间的空间。它决定了元素在容器内部有多少“呼吸空间”，因此会直接影响到界面的清晰度和平衡感。
在 Figma 中，padding 是一种内部间距，它会把内容向内推离 frame 边缘。比如，一个按钮如果四周都设置了 16 px padding，那么无论按钮文字的长度怎么变化，文本都会始终与按钮边缘保持整齐、舒适的距离。
你可以统一设置所有边的 padding，也可以分别设置横向和纵向 padding，甚至进一步精确到四个边各自不同的值。这种控制粒度，可以帮助你非常精确地定义组件的内部结构。
这里要特别注意：Padding、Margin 和 Gap 是三个不同概念，不要混淆。
- Padding：内容与 frame 边缘之间的内部间距
- Margin：某个 frame 与外部周围元素之间的外部间距
- Gap：同一个 Auto layout frame 内部，多个子元素彼此之间的间距
如果你在设计一个列表、一排图标，或者一组卡片，那么元素彼此之间坐多远，决定于 Gap；而卡片内容和卡片边框之间的距离，则由 Padding 决定；至于整个卡片和外部其他模块之间的距离，则是 Margin。
如果你还在逐渐熟悉布局原则，一个简单的记忆方式是：
- Padding 定义内部间距
- Gap 定义兄弟元素之间的间距
- Margin 定义外部间距
图 6.5 – Padding、Margin 与 Gap 的区别
当你之后开始嵌套多个 Auto layout frame 时，会更频繁地接触到 margin 和 gap 的管理。但现在，先真正掌握 padding，是创建结构清晰、可读性强、且可自适应 UI 模块的关键。
Alignment（对齐）
在启用了 Auto layout 之后，对齐就不再是在单个元素层面上进行的了。取而代之的是：所有子对象会作为一个整体，在父 frame 内部根据你设定的规则共同对齐。
这意味着一种思维方式的转变：你不再是“手动把元素一个个拖到合适位置”，而是在定义一套适用于整个群组的对齐逻辑。
在右侧面板中，你会看到一个 9 宫格对齐控件，它包含 9 个选项——四个角、四条边和中心位置——用来决定整组元素位于父 frame 的哪个位置。这些控件依然非常直观：你只需要点击，就可以决定这组元素在 frame 内的对齐方式。
图 6.6 – 固定尺寸 frame 中的不同对齐方式
一旦启用了 Auto layout，单个元素就失去了各自独立对齐的自由。它们会作为一个整体，遵循你定义好的布局逻辑。这意味着：Direction、Padding 和 Gap 的数值，都会共同影响 Alignment 的实际表现。
例如：
- 在水平布局中，对齐选项决定的是元素群组在垂直方向上的位置（顶部、居中、底部）
- 在垂直布局中，对齐选项则决定它们在水平方向上的位置（左、中、右）
在大多数情况下，一个 frame 内部的元素会根据设定的 Gap 紧密地排列在一起。但如果你把 Gap between items 设置为 Auto，Figma 就会自动把可用空间平均分配到各个元素之间。这对于需要在容器中按比例分布项目的场景特别有用，比如菜单项或图标组。
你还可以通过一个快捷操作来切换这种自动分布模式：直接双击对齐 9 宫格即可开关。
图 6.7 – 水平与垂直方向的自动分布间距
需要注意的是，对齐和分布选项的具体表现，会随着 Auto layout 的方向以及 frame 本身尺寸的不同而变化。如果父 frame 是一个“紧贴内容（hug contents）”的尺寸，那么你在对齐上的改动，可能看起来几乎没什么效果。要更清楚地看到对齐差异，前提是父 frame 的尺寸必须大于内部元素总尺寸。
如果这里一时还不够直观，也不用担心——下一节我们深入讲 resizing 和 constraints 时，这些行为会变得更容易理解。
添加、移除与重新排列元素
一旦某个 frame 应用了 Auto layout，你就不能再像在普通 group 或普通 frame 中那样，随意把内部元素拖来拖去了。取而代之的是，所有子对象都会遵循 Auto layout 所定义的堆叠逻辑。
一开始这可能会让你觉得“受限制”，但实际上，这恰恰是它的价值所在：它会给布局带来更强的结构性和灵活性，确保对齐、间距和行为都始终一致。即使你的设计不断变复杂，它依然能帮你维持秩序。
如果你想往一个 Auto layout frame 里添加新元素，只需要把元素拖进去即可。当你把它移动到已有堆叠内容上方时，Figma 会显示一条蓝色指示线，告诉你这个新对象会被插入到哪里。这样，你就能把元素精确地放在开头、结尾，或中间任意位置。
图 6.8 – 蓝色指示线显示新元素将被插入的位置
如果你想快速复制某个 Auto layout frame 内的元素，只需选中它，然后按：
- ⌘ + D（macOS）
- Ctrl + D（Windows）
新元素会按照当前布局方向，直接被放置在原元素旁边。
如果你想删除某个元素，只需选中它并按 Backspace。
如果你并不是想彻底删除它，而只是想把它从这个布局中移出去，也可以直接把它拖出 Auto layout frame。此时，原来的堆叠结构会自动调整，把空出来的位置补齐。
重新排序元素也同样顺畅。你可以通过鼠标拖拽，把任意项目在堆叠中向上、向下（或左右，取决于方向）移动。你也可以使用键盘方向键来改变某个选中元素在群组中的位置。布局会实时更新，并保持稳定的间距与对齐。
嵌套 Auto layout
嵌套（nesting） 是界面设计中的一个基础概念。它指的是：把元素，甚至整个布局结构，放到另一个布局结构内部，形成分层、有组织的系统。你可以把它想象成一层层叠放的盒子：每个盒子里又可以装着更小的盒子，而每一个盒子都可以拥有自己独立的布局逻辑。
在 Figma 中，这个概念在 Auto layout 场景下会变得特别强大。通过把一个 Auto layout frame 放进另一个 Auto layout frame，你就可以构建出更复杂、同时也更清晰可扩展的组件结构。
拿卡片布局举例。你可能会有一个垂直方向的 Auto layout 卡片，内部依次放置图片、文本和一组按钮。而按钮本身，则又可以位于一个单独的水平方向 Auto layout frame 中。
于是，外层卡片遵循垂直布局规则，而内层按钮区域遵循水平布局规则。这样，它们虽然各自有不同的逻辑，但又可以作为一个整体稳定协同工作。
图 6.9 – 一个垂直 Auto layout frame 内部嵌套了一个水平 Auto layout frame
使用嵌套的 Auto layout frame 来设计，会让你在后续做结构调整时拥有极大的灵活性，而不会轻易破坏原有布局。这也是为什么 Figma 会被认为是一款非常强大、非常专业的设计工具。
当然，使用 Auto layout，尤其是复杂的嵌套结构，一开始确实会有点反直觉。不管你是刚开始学习，还是从不支持这类能力的设计工具迁移过来，都需要通过练习来逐渐掌握它。但你用得越多，操作起来就会越自然、越高效。
稍后在本章中，你就会开始真正把目前学到的内容应用起来。不过在那之前，我们先来看另外两个至关重要的概念——它们正是 Auto layout 真正具备“响应性”的关键：resizing（尺寸调整） 和 constraints（约束） 。
通过尺寸调整与约束实现响应式
在今天这种多设备环境中，响应式设计早就不再是“可选项”，而已经是必须具备的能力。屏幕尺寸、分辨率和方向都可能差异极大，只为单一固定布局而设计，通常是远远不够的。
你可能从一个纵向移动屏幕开始设计，但你的设计最终同样需要在平板、桌面，或者用户横竖屏切换时，也能表现良好。
像 Figma 这样的现代工具，为应对这种挑战提供了非常强大的功能，而 Auto layout 只是其中之一。若想让设计真正具备跨设备扩展能力，你还必须理解 resizing（尺寸行为） 和 constraints（约束） 的逻辑。关于多屏适配的更系统内容，你会在本书后面进一步学习；现在，我们先专注于搭建一种能优雅响应和适配变化的布局结构。
Hug、Fill 与 Fixed
当你把 Auto layout 应用到一个 frame 上时，这个 frame 会变得内容感知型：它会根据内部元素的尺寸自动调整自身大小。但这还只是开始。
借助右侧面板中的 Resizing（尺寸调整） 区域，你还可以进一步定义：一个 frame 或元素，分别在不同轴向上应该如何表现。
图 6.10 – 尺寸调整选项
默认设置是 Hug contents（包裹内容） ，也就是说，frame 会紧紧包住它的子元素，并随着子元素大小变化而自动变化。你可以分别独立地为宽度和高度设置 Hug 行为，这就带来了很大灵活性。
例如，一个容器可以在垂直方向上 hug its content，而在水平方向上保持固定宽度。
对于启用了 Auto layout 的 frame 来说，padding 始终会被计算进尺寸之中。随着内容增减，padding 会帮助它保持稳定结构和平衡感。
如果你手动拖动某个 frame 的宽度或高度，或者直接输入一个具体数值，Figma 就会自动把该轴的尺寸模式切换成 Fixed（固定） 。这对于那些你希望无论内容怎么变化，都始终保持固定尺寸的元素来说，会很有帮助。
下面的图示展示了 Hug 和 Fixed 行为的区别：
图 6.11 – Hug contents 与固定轴
还有第三种非常有用的选项：Fill container（填满容器） 。这个设置是给 Auto layout frame 内部的子元素使用的，它会让这些子元素自动拉伸，占满可用空间。在响应式设计里，它尤其有价值，因为可用空间往往需要在多个元素之间灵活分配。
下一张图展示了在水平流和垂直流中，子元素使用 Fill container 与 Hug contents 时的区别：
图 6.12 – 子元素使用 Hug 与 Fill 的对比
通过在嵌套 frame 中灵活组合这些尺寸行为，你就能构建出高度可适应、可响应的布局。例如，一个元素可以 hug 自己的内容，而它旁边另一个元素则可以填满剩余空间。
正是这种逻辑，让你能够对容器在增大或缩小时，各个元素的行为方式进行细粒度控制。
在目前你接触到的所有功能中，Auto layout 是最强大的之一，但同时也是最需要练习的之一。真正理解 resizing 与布局规则如何彼此作用，唯一的方法就是：多做实验。
试着创建嵌套的 Auto layout frame，并给其中不同层级分别应用不同的 resizing 组合。测试当内容尺寸改变、或者父级 frame 尺寸发生变化时，它们会如何表现。你把现在学到的东西组合得越多，你在构建真正响应式、可扩展界面时，就会越有信心，也越高效。
设置约束
到目前为止，你已经看到：Auto layout 允许父级 frame 根据内容动态调整大小。但如果你希望反过来，让内部元素在外层 frame 尺寸变化时作出响应呢？
答案是：可以，而这正是 constraints（约束） 存在的意义。
为了更直观地理解 constraints 是怎么工作的，我们先从一个简单例子开始。创建一个普通 frame（不用 Auto layout），然后在它里面放入任意一个对象。当你选中这个内部对象时，右侧边栏中的 Position 属性区域会出现一个 Constraints 小节。
图 6.13 – Constraints 区域
通过设置 constraint，你可以把某个对象锚定到特定边缘上，比如右边和底边。这样一来，无论外层 frame 如何被缩放，该对象都会始终与这些边缘保持固定距离。
这会让你可以设计出一种布局：即便在不同屏幕尺寸或容器变化下，关键元素依然能在视觉上保持稳定对齐。
图 6.14 – 设置右侧和底部约束后，调整 frame 大小的效果
你可以把元素锁定到任意边缘组合上，也可以让它在水平方向或垂直方向上居中。如果你通过 Shift-click 的方式取消所有激活中的约束边，那么该元素就会切换到 Scale 模式，也就是说，它会随着外层 frame 的变化按比例拉伸。
Constraints 可以与 Auto layout 和 resizing 行为无缝配合。既然你已经了解了这些系统，现在就可以开始真正以完全灵活的方式组织应用界面了。下一节中你就会开始实践这些原则，而到了第 8 章《平板、桌面端与 Web 的用户界面设计》中，你还会进一步把设计扩展到平板、桌面和 Web 场景。
将 Auto layout 应用到我们的界面中
现在，是时候把你学到的一切真正用起来了。在本章这一部分中，你将通过一种结构化、逐步推进的方式，把 Auto layout 应用到我们高保真设计中的几个页面里。
你所做的每一步操作，都会帮助你更深入地理解：布局逻辑到底是如何工作的，以及它为什么重要。
请按照步骤认真操作，但不要只是机械执行——更重要的是，留意每一个变化究竟如何影响了你的布局。正是通过这样的观察，你才会逐渐建立起设计直觉，并在处理响应式组件时越来越有信心。
塑造一个按钮
你现在的 Hi-Fi 页面里，包含了 4 个线框稿视图。它们很快就会演变成打磨完整、可以投入生产的布局，而这些也将成为开发人员真正用来构建产品的依据。所以，这个阶段尤其要求你在设计时保持精确与有序。
在真正进入完整页面布局之前，我们先从更小的构建单元开始。目标是：一步步把线框中的占位元素替换为更精细、更真实的 UI 元素，并把你目前学到的 Auto layout、resizing 和结构逻辑都真正用进去。
与其自上而下地做，我们这次会采用一种由内向外的方法，从简单、自洽的小元素开始。这种模块化思路，会让你的设计更容易扩展，也会为下一章开始学习组件打下更好的基础。
现在，我们先从 Login 页面开始，创建第一个真正的 UI 元素：一个 Login 按钮。按照下面步骤来做：
- 进入 Hi-Fi 文件页。选中 Login frame 里的所有元素，并把它们整体移到左侧。这样你就清空了 Login frame，但依然保留了原本线框作为旁边的视觉参考。
图 6.15 – 在 Hi-Fi 页面中准备一个空白 frame
如果你想让视图更干净一点，可以用 ⇧ + G 先把 layout grid 隐藏起来。只是记得需要的时候再打开。养成在网格下工作的习惯，对做精确布局非常重要。
- 选中 Login frame。在右侧面板的 Fill 区域中，点击 Style 图标，选择你之前创建好的 Background color 样式。
当样式以网格视图显示时，你可以把鼠标悬停在某个样式上来查看它的名称；也可以点击样式对话框标题旁边的图标，把它切换成列表视图。 - 在 Login frame 内单击一次，创建一个文本图层，并输入 Login。
- 选中这个文本图层，进入 Typography 区域，点击 Style 图标，并应用你之前创建好的 Title / Medium 样式。
- 在 Fill 区域中，再给它应用 Pure Light 颜色样式。
这时你可能会觉得文字看不太清——白色文字放在浅背景上确实不容易看见，但别担心，我们马上就会解决这个问题。
图 6.16 – 已经套上样式的按钮标签
现在，轮到真正创建按钮了。和你在低保真线框图中做法不同，这一次我们不会在文字后面再画一个矩形，而是采用一种更高效的方法，让设计结构更干净，也更容易管理。
具体步骤如下：
- 右键点击 Login 这层文字，选择 Frame selection。这会把这段文字包裹进一个新的 frame 中。
- 把这个新 frame 图层重命名为 Button / Primary / Default。关于这种命名规范，你会在第 7 章《在协作工作区中构建组件与变体》中进一步学习。
图 6.17 – 重命名 frame
- 选中 Button / Primary / Default 这个 frame，在右侧边栏中的 Layout properties 区域，点击 Use auto layout 图标，启用 Auto layout。
- 给这个按钮加上可见的填充样式。既然它是页面上的主要操作按钮，就使用之前定义好的 Accent color 样式。
- 添加 padding，让文字能在按钮内部居中。把 Horizontal padding 和 Vertical padding 都设为 16。这也与我们之前引入的 8-point grid system 保持一致。
- 确保 Alignment 九宫格被设置为 Center，让文字在按钮 frame 中始终保持完美居中。
图 6.18 – 设置 padding 与 alignment
实际上，与其先给文字套一个 frame，再去手动开启 Auto layout，你也可以从一开始就直接使用 ⇧ + A 这个快捷键。它相当于把 Frame selection 和 Use auto layout 这两个动作合并为一步。虽然看起来只是个小快捷方式，但一旦用习惯了，它会明显提升你的效率。
到这里为止，这部分其实并不难。稍微练习一下之后，它会变得更加轻松。现在，你已经有了一个完整的 Login 按钮。接下来，我们再往前一步，创建一个次级操作按钮：Sign Up。
这一次，我们不从头重复所有步骤，而是换一种更快、更简单的方式：
- 选中你刚刚做好的按钮 frame。
- 按 ⇧ + A，快速把它再包裹进一个新的 Auto layout frame 中。
- 在 Layers 面板中，把这个最外层的新 frame 命名为 Button Group。你也可以用快捷键 ⌘ + R（macOS）或 Ctrl + R（Windows）来重命名。
- 把这个 Button Group 的布局方向设置为 Vertical，然后将 Vertical Gap between objects 设为 16。
- 选中内部的 Button / Primary / Default，按 ⌘ + D（macOS）或 Ctrl + D（Windows）进行复制。
- 选中这两个按钮 frame，并确认它们的 Width resizing 选项都是 Hug contents；如果不是，就手动改成这个值。
最终效果应该如下图所示：
图 6.19 – 使用 Auto layout 复制元素
正如你看到的，借助 Auto layout，你可以在几乎不费力的情况下快速完成这些操作。接下来只剩下几个小步骤，Button Group 就会完整了：
- 选中下面那个按钮，把它重命名为 Button / Secondary / Default。
- 然后，把按钮里的文字改成 Sign Up。注意观察：外层包裹 frame 会随着你输入的内容自动调整大小。这正是 Hug contents 发挥作用的地方，也是 Auto layout 最“神奇”的体现之一。
- 选中这个次级按钮，进入 Fill 区域，打开颜色样式列表。由于它是次要操作，所以把它的颜色切换为 Secondary color 样式。
图 6.20 – 被设置为次级操作样式的 Sign Up 按钮
已经看起来不错了，对吧？不过，我们还可以再多做几步，让布局更精致一些：
- 选中 Button Group frame，手动调整它的宽度，使它与外层 Login frame 的宽度一致。
- 在 Button Group 的 Auto layout 设置中，把 Horizontal padding 设置为 16。这样内容就会对齐到 layout grid 上，与整个界面的其他间距体系保持一致。
- 接着点击 Alignment 盒子，并把对齐方式设置为 Center。这样一来，这组按钮就会被完美居中到整个视图中。
图 6.21 – 将元素居中对齐
- 选中 Button / Primary / Default 和 Button / Secondary / Default 这两个按钮，把它们的 Horizontal resizing 改成 Fill container。这样它们就会自动拉伸，填满 Button Group frame 的可用宽度。最终你应该会得到下面的效果：
图 6.22 – 对子元素应用 Fill container
- 选中 Button / Secondary / Default frame，然后按 ⇧ + X。这个快捷键会交换填充色和描边色，让次级按钮在视觉上更轻、更弱，从而与主按钮形成更明确的层级关系。
- 再选中这个按钮内部的文字图层，把文字颜色样式从 Pure Light 改为 Secondary Color。因为之前那种白色文字样式更适合深色背景，而切换为 Secondary color 后，在较浅按钮背景上的对比度和可读性都会更好。
图 6.23 – 主按钮与次按钮
很好！现在，这组按钮看起来已经好多了。仅仅借助少量 Auto layout 功能，你就已经在很短时间里构建出了一个干净、精确的界面区块。
更棒的是：你刚刚做出来的，其实是一个完全模块化的块状结构，这意味着你之后随时都可以添加、移除或重排其中的元素，而不会破坏间距、对齐或尺寸逻辑。
不过，到目前为止，还有一个关键功能你还没真正试过：constraints（约束） 。为了理解它们什么时候有用、为什么重要，现在请先做一个小实验：选中 Login screen frame，然后手动把它的宽度拉大。你会看到类似这样的结果：
图 6.24 – 将 Login screen frame 横向拉伸
这大概率不是你预期中的效果，至少不是你真正想要的布局行为。这就已经涉及到响应式设计的问题了——而这个主题，你会在本书后面学得更系统。但现在，我们可以先用 constraints 把这个问题修正掉。
在继续之前，先按 ⌘ + Z（macOS）或 Ctrl + Z（Windows），撤销刚刚对 frame 所做的手动拉伸，让它回到原始状态。这样你就能正确地进行修复了。
接下来：
- 选中 Button Group frame。
- 在 Constraints 区域中，把 Horizontal 设置改成 Left and right。
这会告诉 Figma：这个 frame 不再只锚定到单一的一侧，而是同时锚定到左右两侧。这样，当整个屏幕宽度发生变化时，它就能够按比例地进行自适应拉伸。
图 6.25 – 按钮组现在会随着 frame 一起缩放
现在，你的设计不仅能够在水平方向上正确伸缩，整体看起来也更干净，并且还能完美贴合你之前建立好的 layout grid 结构。
当然，现在没有必要一直把 frame 拉大——关于真正的响应式适配，我们会在第 8 章《平板、桌面端与 Web 的用户界面设计》中系统展开。所以，在继续之前，请把 Login screen frame 的宽度重新设回 393 px。
完成这个视图
你的应用第一屏现在已经开始有完整的样子了。接下来，就该把 lo-fi 版本里的那些文本框和标签，替换成真正的 UI 元素。接下来的步骤会让你感觉很熟悉，因为它们遵循的逻辑与你刚才已经使用过的完全一致。
现在，让我们进入这个页面最后一部分的界面构建：
- 在 Login frame 内任意位置创建一个新的 Text layer，输入 Your Name。
- 给这段文字应用 Neutral Light 颜色样式，以及 Body / Regular 文本样式。
- 按 ⇧ + A，把这段文字包裹进一个 Auto layout frame 中，并将这个新 frame 命名为 Text Field。
- 保持宽度为 Hug contents，但在右侧边栏中把高度手动设为 50 px。
- 在 Alignment controls 中，把内容对齐方式设置为 Left-center。
图 6.26 – 创建一个文本输入框
- 给 Text Field frame 应用 Pure Light 作为填充颜色。
- 再添加一个描边，使用 Neutral Light 颜色样式，厚度设为 1 px。然后，打开描边对齐设置，只保留 Bottom 边。
图 6.27 – 创建一个文本输入框
现在，这个输入框的主体已经完成了。接下来，我们要为它补上标签。标签的作用，是告诉用户这个输入框期待他们填写什么类型的信息，它是几乎所有表单中的基础组成部分。
接下来，你将像连接其他界面元素一样，用 Auto layout 把标签和输入框组合起来：
- 在 Text Field frame 上方创建一个新的 Text layer，输入 Username。
- 给这段文字应用 Secondary Color 颜色样式，以及 Title / Small 文本样式。
- 同时选中这段标签文字和下面的文本框，然后按 ⇧ + A，把它们一起包裹进一个新的 Auto layout。
- 这时会生成一个新的 frame，默认左对齐，内部包含了这两个元素。把它命名为 Form Element。
- 在 Auto layout 设置中，把 Vertical gap between objects 设为 8。
图 6.28 – 添加标签
接下来，再把这个 Form Element frame 外面再包一层 Auto layout frame，方法依旧是按 ⇧ + A。
- 把这个新外层 frame 命名为 Form，因为它将作为整个表单元素的主要容器。
- 选中这个 Form frame，把它对齐到 Login frame 的左边缘，并把宽度设置为 393 px。
- 在 Auto layout 设置中，把 Horizontal padding 设置为 16，让它对齐到你的 layout grid。
图 6.29 – 组织表单元素结构
- 最后，把 Text Field 和 Form Element 这两个 frame 的 Width resizing 都设置为 Fill container，以确保它们都能稳定地拉伸，填满可用宽度。
图 6.30 – 对子元素应用 Fill container
这样，第一个文本输入框就完成了。接下来，我们要再做一个第二输入框——而借助 Auto layout，这一步会非常快：
- 选中 Form Element frame，然后按 ⌘ + D（macOS）或 Ctrl + D（Windows）进行复制。
- 双击复制出来的字段中的 Username 标签，把它改成 Password。
- 再把输入框中的占位文字从 Your Name 改成 ************ 。
- 选中 Form frame，把 Vertical gap between objects 增加到 24，让两个字段之间有足够的垂直间距。
- 再把整个 Form frame 向上移动，避免和下面的 Button Group 重叠。
图 6.31 – 最终形成的 Login 视图
你还可以通过 Scrubbing（擦洗调值） 来快速修改数值属性，例如 Position、Dimension、Rotation 等等。方式是：在数值输入框上按住 ⌥（macOS）或 Alt（Windows），然后点击并拖动鼠标。
别忘了，还要给 Form 图层加上一个 L + R constraint（左右约束） ，这样它在外层 frame 宽度发生变化时，也能自动适配。
感觉怎么样？其实已经挺轻松了吧。虽然这还远远不是 Figma 的全部能力，但你已经能感受到：Auto layout 到底有多强大、能节省多少时间。
即便它并不是强制的功能，但真的非常值得使用。因为一旦用了，你的布局会变得更干净、更容易编辑，也更容易扩展。
现在，让我们用最后一个小元素把 Login screen 补完整：那一行 Forgot your password? 文本。它看起来似乎很简单，但如果你要把它在左对齐结构中正确放置成右对齐内容，就会接触到几个新的 Auto layout 技巧。
具体步骤如下：
- 选中第二个表单元素中的 Password 标签，按 ⌘ + D（macOS）或 Ctrl + D（Windows）复制它。
- 用方向键向下，或者直接拖拽，把这个复制出来的图层移动到输入框下方。
- 把文字改成 Forgot your password? ，并给它应用 Body / Caption 文本样式。
- 按 ⇧ + A，把这层文字包裹进一个 Auto layout frame 中，并把这个 frame 的 Width resizing 设置为 Fill container。
同时，不要忘了把这个新 frame 重命名为 Recovery。 - 把 Padding 设置为 0，然后把 Alignment 改成 Right。这样一来，这段文字就会与输入框的右边缘对齐。
图 6.32 – 将密码找回链接右对齐
嵌套 Auto layout frame 一开始确实有些绕，但它能够让你以极高的精度，在远比想象中更短的时间里，构建出复杂而可扩展的布局。
现在，这个视图已经几乎完成了。为了让它看起来更精致一些，你还可以做一些最后的微调：比如在页面顶部加上一个 logo，或者继续微调不同区域之间的垂直间距。别小看这些小动作，它们往往能显著提升整体设计的专业感和平衡感。
而且，你现在也已经准备好接受一个小挑战了：试着用和 Login 屏幕相同的方法，把 Sign Up 页面也从 lo-fi 转成 hi-fi。它会是一次非常好的练习，也能帮助你把本章学到的所有内容再真正巩固一遍。
你的最终结果大致应该会像这样：
图 6.33 – Login 与 Sign Up 视图
就这样，你的设计已经开始真正成形：它现在具备了良好的扩展性、清晰的结构，并且已经为后面的工作做好了准备。
如果你想查看完整示例，那么包含全部内容的工作文件已经发布在 Figma Community，链接如下：
https://packt.link/mInlI
你可以随意复制它，并研究其中各部分是如何彼此连接起来的。
总结
这一章介绍了 Figma 中一些最进阶、也最重要的功能，包括 Auto layout、resizing 和 constraints。这并不是最轻松的主题，但你已经顺利走过来了。现在，你已经知道如何构建出一种不仅精确、可扩展，而且还能响应变化、并且更容易维护的布局。
通过实际完成 Login 和 Sign Up 视图，你已经亲眼看到了这些工具是如何互相配合，最终生成出一致且灵活的 UI 模块的。一旦真正掌握它们，你就能够在不破坏结构和间距的前提下，快速完成复杂设计修改。
当然，在接下来的章节中，Auto layout 还会不断出现，因为你会继续用它来完成应用的其余部分。你越多地使用它，它就会变得越自然——尤其是当你愿意自己花时间多试不同布局组合的时候。
仅仅使用 Auto layout、resizing 和 constraints，就已经能让你拥有一个非常强大的工作流了。但如果还有一种方式，能让你的界面变得更模块化、更可复用、更高效呢？
这正是 components（组件） 的意义所在。而在下一章中，你就会学到：如何像专业人士一样使用它们。
