emengweb
翻译自https://help.figma.com/hc/en-us/articles/360040451373#Add_and_remove_objects
自动布局允许您创建响应其内容的动态框架。
有很多方法你可以使用自动布局:
1、创建可以在编辑文本标签时增大或缩小的按钮；
2、快速建立适应新项目的列表；
3、结合自动布局框架构建完整的界面；
4、向现有组件添加自动布局；
注意:我们使用术语父和子来表示框架和对象
添加自动布局
您可以添加自动布局到一个框架或对象的选择。这包括:
1、新或空的框架；
2、包含现有内容的框架；
3、组件；
4、组或其他对象或图层；
注意:
我们只支持框架添加自动布局。如果你选择一个框架之外的对象，Figma会在它们周围创建一个框架并添加自动布局。
删除自动布局
当您删除自动布局时，您将有权访问框架的常规属性。
有两种方法来移除自动布局:
1、右键单击框架并选择移除自动布局；
2、在属性面板中，单击自动布局旁边的减号图标；
注意:
您不能使用“添加自动布局”键盘快捷键来删除自动布局。如果您这样做，您将在当前选择的周围创建一个新的自动布局框架。
你可以在几个地方添加自动布局:
1、右侧边栏:点击旁边的自动布局；
2、右键单击框架并选择添加自动布局；
3、使用键盘快捷键:Shift +A；
调整框架的填充，边框，效果和角半径属性!了解更多在我们的框架在Figma文章。
https://help.figma.com/hc/en-us/articles/360041539473
自动布局属性
自动布局的框架与常规框架有不同的属性。当您应用自动布局时，您将在右边栏(属性面板)看到一些变化。
当你框架添加了自动布局，你将不能:
🚫向该框架添加布局网格；
🚫对自动布局框架中的任何对象应用约束；
🚫在框架内使用智能选择；
有自动布局父(框架)和自动布局子(对象)的属性。我们已经分组自动布局属性基于你选择的对象:
1、父自动布局(框架)；
2、子自动布局(对象或框架)
注意:
由于可以嵌套自动布局，一个框架可以同时扮演自动布局父元素和自动布局子元素的角色。这意味着你可用这两组属性。
父自动布局
以下属性在属性面板的自动布局部分中。
1. 方向
方向允许你选择自动布局框架将流动的方式。你可以在垂直和水平之间选择。
垂直允许您沿着y轴添加、移除和重新排序对象。例如:列表中的对象，或新闻提要或时间轴中的文章。
水平允许您沿着x轴添加、移除和重新排序对象。例如:移动导航菜单中的一排按钮或图标。
Figma目前一次只支持一个方向(例如水平或垂直)。要建立两个方向的设计，合并或嵌套自动布局框架。
注意:
Figma会根据你如何在画布上安排物体来设置方向。您可以在属性面板的自动布局部分更改方向。
2. 填充
填充控制着自动布局中对象周围的空白或“呼吸空间”。
您可以独立设置水平和垂直填充。不能单独控制每条边的填充或设置负值。
您可以在自动布局框架之间复制和粘贴属性；
提示!Figma将使用你的大轻推值作为默认填充值。您可以在首选项菜单中调整轻推设置。
3.对象之间的间距
可以在自动布局中控制对象之间的间距。这就像智能选择中对象之间的间距一样。
在水平自动布局中，它指的是对象之间的水平空间。在垂直自动布局中，对象之间的垂直空间。
与智能选择不同，没有办法调整画布上的间距。相反，你可以在属性面板的自动布局部分使用间距字段:
1、在字段中输入一个数字
2、集中在领域和使用箭头键调整
3、单击并拖动以擦除字段并增加或减少值
提示!您可以在自动布局框架之间复制和粘贴属性。
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C和Ctrl + Alt + V
4、调整大小
“调整大小”属性控制是否可以调整框架本身的大小。你只能控制沿一个轴的大小，方向相反的轴。
水平自动布局:在自动高度和固定高度之间进行选择。
垂直自动布局:选择自动宽度或固定宽度。
当调整大小是自动的，Figma将决定尺寸的自动布局框架的内容。当你调整框架的内容时，框架会变大或缩小。
使用自动调整大小，它不可能调整框架本身的宽度或高度。为了清楚地说明这一点，我们将属性面板中的宽度和高度字段设置为灰色。
如果调整大小是固定的，那么框架在该特定轴上的尺寸将不会响应任何更改。这允许你调整框架的大小，也允许对象扩展到框架的边界之外。
通过固定大小调整，您可以设置框架的宽度(垂直自动布局)或高度(水平自动布局)。这允许您使用属性面板中的宽度和高度字段来调整该维度。
在属性面板中切换调整自动和固定大小:
调整画布中自动布局框架的尺寸。如果你调整自动布局框架的大小，我们将改变大小设置为固定。如果您想切换回自动，请在属性面板中更改大小设置。
子自动布局
当你在自动布局框架中选择一个对象时，你会在属性面板中看到一些变化。这些主要与对齐和定位控件有关。
位置
在自动布局中，任何子对象的X和Y坐标都被设置为Auto。您将无法更改或覆盖这些。
你可以在自动布局中改变对象的顺序。
使用属性面板顶部的箭头按钮——或下面的键盘快捷键——移动项目。
在垂直自动布局：
向上移动↑
向下移动↓
在水平自动布局中
向左移动←
向右移动→
在自动布局中改变对象的顺序也会更新图层面板中的顺序。与常规的框架不同，图层会以相反的顺序出现。
提示!使用键盘快捷键来提出( ⌘ Command [ or Send Back ⌘ Command ] )一个对象。
对齐
在自动布局框架中，您有有限的对齐选项。只能让对象沿一个轴对齐。
在水平自动布局框架中:
顶部对齐
垂直居中对齐
底部对齐
向上向下伸缩
在垂直自动布局框架中:
左对齐
水平居中对齐
右对齐
向左向右伸缩
注意:
无法在自动布局中复制以下对齐或约束选项：
🚫Tidy的选择对象
🚫使用智能选择
🚫分配垂直间距
🚫分配水平间距
🚫缩放
添加和删除对象
添加对象到自动布局框架
你可以添加任何图层或对象到一个自动布局框架。
当你拖一个对象到一个自动布局框架,在您可以添加对象的任何地方，Figma将向您展示一个蓝线。
Figma将允许你放置一个对象到任何自动布局框架。它将使用对象的大小来确定适合的位置。
您可以使用快捷键CTRL来t调整默认位置，添加一个对象在任何你喜欢的地方:
macOS: ⌘ Command Windows: Ctrl
自动布局框架嵌套到其它自动布局框架
您可以在另一个自动布局框架内嵌套一个自动布局框架。这允许您结合水平和垂直布局来创建复杂的界面。
当嵌套一个自动布局框架时，嵌套的框架将同时具有父属性和子属性。
在我们下面的例子中，有四个层次的自动布局:
1、按钮:每个按钮是一个水平自动布局。这允许按钮在我们更改标签文本时变大或缩小。
2、按钮行:然后我们将两个按钮添加到另一个水平自动布局。这允许对象做出反应,当我们自动布局框架的内容进行任何更改。
3、Post:然后我们将按钮添加到一个垂直的自动布局中，其他对象也在Post中。这包括描述、图像和用户的配置文件。
4、时间线:我们在垂直的自动布局中添加了3条时间线。自动布局框架是位于画布上的顶级框架。
你可以嵌套自动布局框架在两种方式:
1、拖动自动布局框架到现有的自动布局框架中；
2、对选择的自动布局框架(和其他对象)外围在创建一个新的自动布局框架：
1、选择自动布局框架和对象；
2、使用键盘快捷键Shift + A
3、Figma会在框架和对象外围创建一个框架
提示!你可以不用Figma默认的创建方式。按住快捷键以保持一个对象在当前框架内，或防止Figma嵌套它。
- Mac: ⌘ Command
- Windows: Ctrl
了解更多关于父、子和同级的关系。https://help.figma.com/hc/en-us/articles/360039959014
在自动布局中复制对象
可以复制现有对象，将其添加到自动布局中。Figma会在右边(水平)或下面(垂直)添加副本。
1、在自动布局框架中选择一个子对象。
2、使用快捷键复制它
- MacOS: ⌘ Command D
- Windows: Ctrl + D
从自动布局中删除对象
你可以从自动布局中移除任何对象:
将对象拖到自动布局框架的外面。
选择对象并按Delete或Backspace键
自动布局提示
如果您已经做到了这一点，那么感谢您的光临！自动布局建立了一些新的规则和行为，这些规则和行为的工作方式与Figma中的其他功能不同。
我们整理了一些提示和技巧，以帮助您浏览这些规则和行为。
框架属性
您可以将“边框”，“效果”和“圆角半径”属性添加到框架。 这包括添加了自动布局的框架。
以前，您可以在选择框架时添加或更改子对象的属性。 现在，这会将这些属性应用于框架。
这意味着您可以从文本层创建按钮，而不必绘制背景。这可能需要操作上的改变。
是否有带有矩形背景的组件或对象？ Figma将把矩形的属性应用于“自动布局”框架。 整齐！
自动布局的原型设计
在创建带有自动布局的原型时，有几件事需要注意。
1、智能动画过渡不考虑背景的框架。
如果您想使用一个幻灯片或移动过渡与智能动画，您将需要添加一个背景。您可以在一个常规框架内创建一个矩形，并在其中放置您的自动布局框架。
在我们的智能动画文章的幻灯片和移动过渡部分了解更多关于这一点。
https://help.figma.com/hc/en-us/articles/360039818874#slide
2、要将滚动溢出应用到框架，您需要将内容扩展到框架的边界之外。
https://help.figma.com/hc/en-us/articles/360039818734
因为自动布局父元素的尺寸是内容驱动的，所以它会调整大小以适应对象。为了复制滚动溢出，你需要将自动布局放在一个规则的框架内。
注意:演示视图默认支持长帧滚动。您只需要在想要剪辑内容时使用此解决方案。
切换可见性
切换图层或对象的可见性会将其从自动布局中移除。这可能会在创建布局或原型时产生不希望看到的效果。
如果你想在布局中创建一个空白，你可以调整对象的不透明度。
在属性面板，更新图层设置为0%。双击00将其设置为0%。
组件使用自动布局
由于组件是框架，您可以为组件添加自动布局。您需要为每个组件单独添加自动布局。
目前还没有办法批量添加自动布局。
主组件
✅调整垂直和水平左右填充；
✅调整对象之间的间距
✅重新排序的对象在一个组件
✅添加新对象
组件实例
✅调整垂直和水平填充
✅调整对象之间的间距
🚫重新排序组件中的对象
🚫添加新对象
技巧：想要向实例添加图标吗？ 我们建议将不透明度为0％的占位符图标添加到主组件。 然后，您可以将图标替换为库中另一个组件。
文字属性
文本对象也可以有自己的大小调整属性。在自动布局中，这可能会产生一些有趣的结果。
在属性面板的文本部分调整文本大小属性。有三个文本大小调整选项:
- 自动宽度:如果在文本框中输入较长的单词，文本不会换行换行。相反，自动布局父框架的宽度将容纳较长的文本。
- 自动高度:如果你输入的文本超出了文本对象的宽度，文本将换行到新行。
- 固定大小:如果你输入的文本超出了层的边界，文本框将不会调整大小。相反，文本将溢出到文本层的边界之外。
注意：建议不要在自动布局中使用固定大小的文本框。 固定大小将阻止调整文本层的大小以适应您的文本。 这可能会导致文本和“自动布局”框架中的其他对象重叠。
固定大小是自动宽度或自动高度。最适合上下文的；
约束Constraints
注意:在自动布局中，你可以创建子对象来适应你调整父框架的大小。您可以在属性面板顶部的对齐部分使用伸缩左、右或伸缩顶、底选项，而不是使用约束。
我们在上面提到，不可能在自动布局框架中对对象应用约束。
只要您将其嵌套在一个常规框架中，您仍然可以对自动布局框架本身应用约束。
✅向左或向右
✅顶部或底部
✅中心
🚫左和右
🚫顶部和底部
🚫缩放
翻译文档：