emengweb
带有示例的介绍，以便您最终了解自动布局在 Figma 中的工作原理，以及如何使用它来自动调整您的设计。
自动布局是 Figma 中最重要的功能之一，其多功能性使其与其他设计工具中的功能区分开来。简而言之，它允许您以一种可以自动增长的方式构建组件和框架，使容器适应其内容的大小，或者相反。
作为一个如此灵活的功能，它也有其复杂性和局限性。可能有点难以理解它是如何工作的，尤其是在开始时。最初也很难在没有如此多的尝试和反复试验的情况下获得可预测的结果。
在本文中，我们将介绍使用自动布局可以实现的目标。我们将从它最基本的特征开始一步一步地了解它实现更复杂的设计布局的潜力。即使这只是一个介绍，我希望本指南足够完整，让您比以往任何时候都更有信心开始使用此功能。
获取基础知识
让我们从简单的事情开始。您可以将自动布局应用于框架（即使是空的）和组件。但是，您将通过至少两层开始了解它是如何工作的。
典型的例子是一个按钮：一个带有文本的框架，尽可能简单。通过应用自动布局，您已经可以看到一些正在发生的事情，我们将一一看到以了解它们，并使它们适应我们的需要。
方向
首先，我们有方向。这意味着组件在拥有更多或更少内容后将如何增长。这可以是垂直的（向下的箭头）或水平的（向右的箭头）。在我们的第一个示例中，我们将其设置为水平的。这意味着如果文本较长，则组件将水平拉伸以为内容腾出空间。
方向也可以是垂直的。Figma 根据组件的结构默认应用一个或另一个，从它的理解来看，这对每种情况都更有意义。无论如何，这是您可以随时更改的内容。
填充
如果您以前使用过 CSS，这对您来说可能听起来很熟悉。如果您还没有，那么您可以将填充理解为组件的内部边距。当您应用 Auto Layout 时，Figma 将根据元素之前与容器框架的间隔自动为每一边添加填充。如果您单击填充选项，您将能够看到应用的值：Figma 已计算出它们的上下、左右相同。即便如此，您也可以修改它们，因此所有值都彼此不同。
当所有填充都不相同时，您将看到文本Mixed。如果您更愿意同时对所有边应用相同的值，您只需输入所需的数字，填充将被同等应用。
因此，所有这一切意味着，当内容更改时，组件将考虑这些值以保留该区域，就像它们是空白页边距一样。
分离
到目前为止，我们在框架内只有一个层，但是如果我们有另一个层会发生什么？通过添加一个额外的元素，比如一个图标，你会看到图标和文本之间存在分离。这个距离和我们之前设置的padding没有关系；它是一个独立配置的值。所有元素之间的距离都相同。这意味着如果您在右侧添加另一个元素，它将自动保持相同的距离：组件内的所有图层均等分隔。
当我们有一个包含多个层且彼此之间必须保持相同距离的组件时，分离是非常有用的，因此如果添加或删除元素，布局不会中断。一个明显的例子是列表中的项目。通过这种分离，无论我们有多少元素，它们之间的距离总是相同的。当我们添加（或删除）一个层时，它会尊重这些值。
现在我们在组件中有更多的元素，我们已经可以看到层列表中发生了什么。Figma 默认使用与我们在屏幕上看到的相反的排列顺序。这意味着最上层将是画布底部的元素，反之亦然。
这与我的个人喜好相反（哎呀！）。您必须记住，如果您从图层列表中更改图层的顺序，这也会影响画布上的元素。因此，图层的顺序比以往任何时候都更加重要，并且在使用自动布局时必须注意一些事项。
分配
在上一节中，我们看到了如何按照预定义的常量值分离元素。在填充选项中，这显示为Packed。但这并不是使用自动布局在框架内分离或分布元素的唯一方法。此外，还有设置之间的空间。
应用此选项会将容器框架的高度或宽度更改为固定值，并将使用每个元素之间的空间将其分成相等的部分。如果这些元素中的任何一个的尺寸发生变化，它们仍然具有相同的分隔。这是一种保持可变分离的方法，但无论哪种方式都是规则的。
结盟
当我们使用自动布局时，您必须忘记迄今为止学到的一切。嗯，不是所有的东西，而是特别的东西：元素不是单独对齐的，只有一种配置会同时影响所有元素。这是从填充选项所在的同一部分完成的。
在同一个框中，您将找到可能的对齐方式，这将决定元素如何在具有自动布局的组件内排列。对齐用这个……淡蓝色来表示？图标。
在我们的下一个示例中，我们应用了垂直自动布局。这意味着我们只能将元素水平居中，因为我们应用了Hug 内容设置。这是我们稍后会在讨论Resizing时看到的，但它基本上意味着主容器将调整其内容的大小。
因为最长的元素是两个中心元素，它们决定了宽度，并且似乎不会移动。其他的，因为它们较小，将受到对齐的影响。
当我们有一个高度和宽度被手动修改为特定大小（意味着固定）的容器时，那么内部元素将有更多的空间和自由移动。因此，对齐选项对于在空间中水平和垂直排列这些元素将变得更加有用。
调整大小
所以，既然我们已经掌握了所有基础知识，让我们转到调整大小选项。当其中任何一个更改其宽度或高度时，此配置将影响容器框架及其子层将如何缩放或拉伸。这些选项有点复杂，因为容器框架和内部框架都可以有自己的调整大小设置，并且它们是相互影响的。
让我们使用以下示例逐步了解它是如何工作的： 我们有一张卡片，其中包含一个图像、一个文本和一个按钮。有一个 24px 的统一填充，元素之间的间隔为 16px。正如您在图像上看到的，并非所有元素都具有相同的宽度，并且它们水平居中。
拥抱内容
我们将讨论的第一个选项是Hug contents。这基本上意味着容器框架将根据其内容调整其大小。这是可以应用于宽度和高度的东西，这是我们目前在其他示例中看到的。
如果我们添加更多文本，那么容器仍将尽可能靠近（或拥抱）其内容，并保持先前定义的相同填充。这意味着内容将决定容器的大小。
如果图像不存在，也会发生同样的情况。通过隐藏这一层，我们可以看到容器如何适应，将其大小减小到可见元素所需的大小。
固定的
现在，如果我们手动更改容器的宽度和高度，那么它将不再被配置为Hug contents，而是被固定。或者换句话说，由总设计师决定的固定高度。所以，现在由容器本身决定它有多高，子层需要根据每个层应用的调整大小选项来安排自己。
例如，如果除此之外我们还隐藏按钮，那么整个容器将保持不受影响，并保持其固定高度。这可以通过转到之前的Hug 内容设置轻松更改，因此它会再次适应其内容。
填充容器
容器内的内部层或子层也可以具有填充容器选项，这意味着“请扩展自己以使用所有可用空间”。在前面的示例中，按钮的宽度不是它本来可以拥有的全部宽度，而是其内容所需的最小宽度。
这是一种可以在同一组件内逐层应用的配置。另一方面，图像、文本和按钮可以有各自不同的行为，这取决于我们的决定（总结：我们可以让它们使用所有可用空间或固定大小。）
一个可以派上用场的例子是当我们有两个固定高度的容器时，一个彼此相邻。通过使文本使用所有可能的可用空间（该层将具有填充容器设置），我们可以使按钮始终在底部对齐。文本层正在推动按钮（没有双关语），并使用它可以使用的所有高度。
从这里开始，我们可以开始玩不同的组合。也许最重要的是在决定整个组件的宽度和高度时决定谁是老板：容器，或其内容。
约束
的约束选项通常以FIGMA用于确定一个对象将具有同时它所属的容器的大小，改变位置。所以我们可以问自己这样的问题：它应该保持居中，还是始终与一侧保持相同的距离？在自动布局的上下文中，这些选项还将定义组件或框架在其内容更改时将以何种方式增长。
这些选项可以从我们之前看到的约束和调整大小部分中选择，以您想要的方式选择线条。您也可以从下拉菜单中选择它们，这可能更容易理解。使用此菜单时，请记住您必须分别选择垂直和水平定位，而在线象限中您可以一次完成所有操作。
在我们已经看到的一些示例中，已经应用了一些约束选项。在下面的示例中，我们说组件在隐藏其中一层时会进行调整。还发生了什么，它在空间中保持垂直居中，这是因为垂直约束设置为Center。
另一方面，如果我们选择顶部选项，则组件将在增加或减小其大小时保持与顶部边距相同的间隔。
同样的事情也可能发生在应用了水平自动布局的组件或框架上。我们可以决定是希望它们居中，还是在它们沿容器改变宽度时更靠近从右到左。
嵌套布局
到目前为止，我们当时只对一帧应用了自动布局，即使我们也更改了子图层的设置。当我们也将自动布局应用于内部框架时，事情开始变得复杂（或者我应该说有趣吗？）。
这称为嵌套行为：当我们将自动布局应用于框架时，然后它也应用于其子项。这为我们提供了更多的可能性来获得更复杂的安排，其中每个元素在其成长和适应方式上都具有一定的独立性。让我们按部分来。
您将在上图中看到的第一件事是每个项目都有垂直布局。当隐藏文本层之一时，内容会自动居中。但这只是关于文本，它们被分组在同一框架中，只有它们。在同一个组件中，我们可以对整个Item组件应用水平自动布局，这样如果我们想隐藏所有头像，文本将使用所有可能的宽度。
包含所有这些的主框架也应用了垂直自动布局，因此我们可以隐藏和显示一些项目，并且整个块将在任何给定时刻垂直适应它所拥有的内容。
快速回顾一下我们到目前为止所拥有的内容：文本以垂直布局分组，并且它们位于具有水平布局设置的项目内。同时，所有这些都在一个巨大的容器中，容器采用垂直布局以适应其拥有的物品数量。还要别的吗？是的。如果您还没有注意到，带有头像的项目之间的间距小于带有主块上其余元素的间距。
为了实现这一点，我在一个额外的布局中分组（只是项目），这样它就会具有与主容器相同的垂直布局 - 不同之处在于这些元素的间隔更小。这也是使用嵌套自动布局的一个正当理由：保留一个主容器，但将一些具有不同距离的内部项目分组。
保持学习
就这样！我希望在阅读本文并看到一些示例后，您对 Figma 中的自动布局是如何工作的有一个更好的了解。与所有事情一样，需要大量练习才能开始获得更可预测和可控的结果。即便如此，在达到预期结果之前，总会有相当多的反复试验。
我最推荐的事情是进行实验，尝试直到你对你正在做出的设计决定感到更舒服为止。如果你想继续学习，我会在下面留下几个可能有用的链接。感谢您的阅读，特别感谢您的阅读！