使用自动布局创建动态设计 #

关于自动布局 #

自动布局是一个你可以添加到框架和组件的属性。它可以让你创建的设计适应其内容的变化。当你需要添加新的图层、容纳较长的文本字符串，或者在设计过程希望时刻保持对齐时，自动布局会非常好用。

这里有很多方法可以使用自动布局。

创建按钮，当你编辑文本标签时，按钮会随着文本变大或变小。
建立列表，随着项目的增加、删除或隐藏而调整。
结合自动布局框架来建立完整的界面。

自动布局是一个强大的功能，有许多用途。在这篇文章中，我们将向你展示如何将自动布局添加到一个框架中，以及它的每个属性如何工作。

添加自动布局 #

你可以为一个框架或选择的对象添加自动布局。这包括

新的或空的框架
已有内容的框架
单个或多个组件
组或多选图层

提示

自动布局只支持在框架上进行。如果您选择不在框架内的对象，Figma 将在它们周围创建一个自动布局框架。

你可以从几个地方为一个选定的框架、单个或多个组件添加自动布局。

使用键盘快捷键 Shift A。
在右边的侧边栏里，在选中框架的情况下点击自动布局旁边的 +。
在框架或对象上点击右键，选择添加自动布局。

自动布局属性 #

自动布局的框架与普通框架有不同的属性。当你应用自动布局时，你会在右侧边栏看到一些变化。

你不能对自动布局的框架做以下事情。

🚫 为该框架添加布局网格
🚫 对自动布局框架内的任何对象应用约束条件
🚫 在框架内的任何对象上使用智能排列

方向 #

方向描述了自动布局框架的流动方式。

选择 垂直（vertical） 可以沿着 Y 轴添加、移除和重新排列对象。例如：列表中的对象，或时间线中的帖子。
选择 水平（horizontal） 来添加、移除和重新排列 X 轴上的对象。例如：一排按钮，或移动导航菜单中的图标。

Figma 目前一次只支持一个方向，即水平或垂直。要建立使用两个方向的设计，您需要结合或嵌套自动布局框架。

在下面的例子中，我们将一个水平的自动布局框架嵌套在一个垂直的自动布局框架中，以创建一个带有标题、描述和时间的卡片。

项目之间的间距 #

你可以控制自动布局框架中项目之间的间距。

与智能排列不同，没有办法在画布上调整间距。取而代之的是，使用右侧边栏的自动布局部分中的间距字段。

在字段中输入一个数字，使用箭头键微调值，或使用光标拖动图标。

内边距（Padding） #

内边距（Padding）控制自动布局框架的子对象和边界之间的空白空间。你可以统一设置内边距（Padding），或者为顶部、右侧、底部和左侧的内边距（Padding）设置不同的值。

在带有方形图标输入框中输入一个单一的值来设置所有边上的相等内边距（Padding），或者使用 CSS 方法设置单个值。例如，输入1,2,3,4可以设置为：顶部 - 1，右边 - 2，下面 - 3，和左边 - 4。或者输入1,2将值设置为顶部和底部 - 1，左边和右边 - 2。
要手动设置每一边的单独内边距（Padding），请点击打开对齐和分布设置，单独调整每个值。

提示

内边距（Padding）不支持负数。

提示

按 tab 键在顶部、右侧、底部和左侧的输入框之间导航。

对齐 #

选择如何在一个自动布局框架内对齐子对象。自动布局框架的方向和分布将决定你有哪些对齐选项。

与普通框架中的对象不同，你不能单独控制对象的排列。由于这个原因，你要在父自动布局框架上设置子对象的对齐方式。

使用交互式网格为框架中的子对象选择九个布局选项。

如果你的分布设置为 Space between ，你在自动自动布局方向不同的框架上各有三个选项。

纵向自动布局：左、中、右
水平的自动布局：顶部、中心、底部

如果你的分布设置为 Packed，你在每个方向上都有相同的九个选项。

左上角
顶部中间
右上
左边
中间
右边
左下角
底部中间
右下角

提示

当一个或多个调整属性（resizing）被设置为适应内容（hug contents）时，适应内容（hug contents）会删除子对象周围的任何额外空间。

分布 #

一旦你为一个框架中的子对象设置了对齐规则，就可以选择这些对象在该框架中的分布方式。

在对齐方式面板中，点击箭头选择。

Packed：一个框架中的对象将被分组在一起。使用这个选项可以使一个框架中的对象尽可能地靠近并排列在一起。
Space between ：框架中的物体之间的空间沿着为框架设置的方向和对齐方式平均分布。使用这个选项，可以在一个框架中拉伸物体。

调整（Resizing） #

自动布局最强大的功能之一是它能够控制自动布局框架中的对象的尺寸。

为父自动布局框架设置调整大小的行为，以适应对其子对象所做的任何改变。可以使用下拉菜单和尺寸调整面板对 X 轴和 Y 轴上的对象单独进行尺寸调整设置。

提示

文本层也有自己的大小调整属性。在一个自动布局框架内，这可能会产生一些有用的结果。

如果你希望你的自动布局框架是完全流动的，我们建议不要使用固定大小的文本框。固定大小的文本层不会调整大小以适应你的文本，这可能会导致自动布局框架中各层之间的重叠。

固定宽度或高度（Fixed） #

当一个自动布局框架被设置为**固定宽度或高度（Fixed）**时，无论框架内的内容如何，框架本身的尺寸值都会保持不变。

适应内容（Hug content） #

将自动布局框架设置为拥抱内容（Hug content），根据其子对象调整自己的大小。该框架将保持尽可能小的尺寸来包围其中的对象，同时尊重padding值。

提示

如果自动布局框架内的任何子对象被设置为填充容器，父框架将不再拥抱内容并成为轴的固定。

填充容器（Fill container） #

设置为**填充容器（Fill container）**的自动布局框架中的对象会拉伸到其父框架的宽度或高度。

约束和调整大小 #

你不能对自动布局框架内的子对象应用约束。相反，你可以使用调整大小的属性来定义对象在框架或框架中的对象被调整大小时的反应。

如果一个自动布局框架被嵌套在一个正常框架内，你仍然可以对它应用约束。你会看到一个约束和大小调整部分，它允许你设置自动布局框架的约束和其中任何对象的大小调整行为。

例如：如果你使用自动布局创建了一个导航栏，你可能希望它能适应不同的屏幕尺寸。你可以使用约束条件来确保导航条在其父框架被调整大小时能正确响应，并使用调整大小来控制导航条内的对象如何响应这些变化。

添加、编辑和删除对象 #

在自动布局框架中添加对象 #

你可以将任何图层或对象添加到自动布局框架中。

点击并拖动一个对象到一个自动布局框架上。
使用蓝色指示器来选择放置对象的位置。

提示

对象的尺寸决定了它是否可以被添加到自动布局框架中。如果对象的任何尺寸都大于父框架，您就不会看到将其添加到自动布局的选项。

使用修改键可以绕过 Figma 的默认行为，将较大的对象添加到自动布局中。或者，将对象添加到一个嵌套的自动布局中。

Mac: ⌘ Windows: Ctrl

嵌套自动布局框架 #

你可以将一个自动布局框架嵌套在另一个自动布局框架中。这允许你结合水平和垂直布局来创建复杂的界面。

当你嵌套一个自动布局框架时，嵌套的框架会有父和子的属性。

在我们下面的例子中，有四个层次的自动布局。

按钮：每个按钮都是一个水平的自动布局。这允许按钮在我们改变标签文本时增长和缩小。
按钮组：然后我们将两个按钮添加到另一个水平自动布局中。这允许对象在我们对一个兄弟姐妹的内容进行任何改变时做出反应。
帖子：然后我们把按钮和帖子中的其他对象一起添加到一个垂直的自动布局中。这包括描述、图片和用户的资料。
时间线：我们在一个垂直的自动布局中添加了三个，以创建我们的时间线。自动布局框架是位于画布上的顶层框架。

你可以通过以下几种方式嵌套自动布局框架。

将一个自动布局框架拖入一个现有的自动布局框架中。
在选定的自动布局框架（和其他对象）周围创建一个新的自动布局框架。

选择自动布局框架，以及你想包括的其他层。
使用键盘快捷键 Shift + A 来添加自动布局。
Figma 将在您的选择对象周围创建一个框架，并添加自动布局。

提示

您可以绕过 Figma 的默认为选择对象创建框架的行为。按住下面的修饰键，可以将对象保持在当前框架内，或防止 Figma 嵌套它。

Mac： ⌘ Windows: Ctrl

创建副本 #

您可以创建子对象的副本，将其添加到自动布局中。Figma 会将复制的对象添加到原始对象的右侧（水平）或下方（垂直）。

在 Auto layout 框架中选择一个子对象。
使用键盘上的快捷键来复制它。
- Mac： ⌘ D
- Windows: Ctrl D

更改顺序 #

提示

你不能在一个实例中重新排列对象。你需要在主组件中改变对象的顺序，或者脱离实例来重新排列对象。

你可以改变对象在自动布局框架中出现的顺序。这只支持在主组件或组件外的自动布局框架中。

选择子对象。如果该层是嵌套的，你需要使用修改键来进行深层选择。
- Mac: ⌘
- Windows: Ctrl
有几种方法可以重新排列对象。
- 使用键盘上的方向键，把对象放到一个新的位置。
- 点击并拖动对象到一个新的位置。

移除对象 #

要从主组件或自动布局框架中删除一个对象。

将对象拖到自动布局框架之外。
点击来切换图层的可见性。
选择对象并点击 Delete 或 Backspace 键。

您不能从一个实例中删除一个图层或对象。如果您尝试，Figma 只会切换图层的可见性，而不会删除它。

提示

切换一个图层或对象的可见性会将其从自动布局框架中隐藏。如果你想在对象应该出现的地方创造一个空白区域，你可以在右边的侧边栏，将图层透明度改为 0%。

移除自动布局 #

当你移除自动布局时，你将可以访问一个框架的常规属性。

有几种方法可以删除自动布局。

在框架上点击右键，选择删除自动布局
在右边的侧边栏，点击自动布局旁边的

提示

你不能使用添加自动布局的键盘快捷键来删除自动布局属性。使用这个快捷键将在你当前的选择周围创建一个新的自动布局框架。

自动布局与原型 #

在用自动布局创建原型时，有几件事需要注意。

Smart Animate 的过渡并不考虑框架的背景。如果你想用智能动画使用滑入或移入过渡，你需要添加一个背景。你可以在一个普通的框架内创建一个矩形，并将你的自动布局框架放在其中。

要对一个框架应用滚动溢出，你需要有内容延伸到框架的边界之外。

由于自动布局父节点的尺寸是由内容驱动的，它将调整大小以适应对象。为了复制滚动溢出，你需要把自动布局放在一个普通的框架内。

在组件中使用自动布局 #

由于组件是框架，你可以给它们添加自动布局。你需要为每个组件单独添加自动布局，目前还没有一种方法可以批量添加自动布局。

主组件 #

✅ 调整垂直和水平的内边距（Padding）
✅ 调整对象之间的间距
✅ 在一个组件中重新排列对象
✅ 添加新的对象

实例 #

✅ 调整垂直和水平的Padding
✅ 调整对象之间的间距
🚫 在一个组件内重新排序对象
🚫 添加新对象

提示

想给实例添加图标？我们建议在主组件上添加一个不透明度为0的占位符图标。然后你可以把这个图标换成你库中的另一个组件。

更新自动布局 #

注意

以下是2020年11月发布的更新。

更新旧版自动布局框架的对齐方式 #

在以前的自动布局版本中，对齐方式是在子对象层面控制的。这意味着你可以为一个自动布局框架中的不同子对象设置不同的对齐方式。

我们发现这种行为在用户中并不常见，所以在2020年11月，我们将对齐控制转移到父框架，以简化自动布局的工作方式。在最新的更新中，所有的子对象都必须以相同的方式对齐。

如果你已经有了2020年11月之前创建的具有不同对齐方式的子框架的自动布局，你可能会看到以下情况。

为了对你的自动布局值进行调整，你首先需要更新框架，以便删除各个子项的排列。在更新你的框架之后。

Figma 将尽力在视觉上保持您的原始设计。在许多情况下，Figma 会添加中间框架，以允许不同的排列方式。这些框架将被命名为自动添加的框架。
您可以立即撤消这一更改，但是，如果您点击离开窗口或刷新页面，将来就无法撤消更新。
如果你已经更新了一个主要的组件，确认它的实例更新正确。

要创建一个具有不同对齐方式的子项目的设计。

选择你想以不同方式对齐的项目。
使用键盘快捷键Shift A为该项目添加自动布局。
将新创建的框架设置为在你希望对齐的轴上的填充容器。
根据需要设置对齐方式。

使用智能排列形状工具