Figma中的自动布局要怎么用？一篇文学会官方说明文件

静电说：Figma在最近的几次更新中，发表了全新的Auto Layout（自动布局）功能，要知道，在之前的自动布局功能中，我们只能使用很简单的布局效果（类似于Sketch中的自动布局），而本次Figma在更新后，自动布局更加的完善好用，可以做出非常多的响应式效果。

而Figma官方更是贴心的提供了Figma Auto Layout playground（Figma 自动布局游乐场），我们可以在此文件中根据指引来一步步的学习自动布局的使用。下面咱们就一步步的来跟着这个官方游乐场文件和文章学习自动布局吧（游乐场示范文件在本文下方）。

什么是自动布局？

首先看看Auto layout可以实现的简单效果，概括的说，就是在拖动框架或者随着文本的变化，设计内容会自适应进行拉伸或者缩小的操作。

创建自动布局

首选，创建一个按钮，包含边框及中间的文字，然后选中这两个图层，点击右侧属性检查器的Auto Layout选项，即可创建自动布局。

一旦创建了自动布局，Figma就会自动创建一个自动的分布功能，比如下方的内容，我们可以对这些元素进行分布属性的调整。

首先选择横向分布还是竖向分布，然后调整间距即可，如上图调整的位置。

在间距调整属性旁边，还有一个“回”字形图标，通过它我们可以调整内间距，也就是我们常说的Padding。同时，我们也可以定义这个Padding的位置，具体是居中进行调节，还是上下左右等九个维度以基准进行调节。

当然，我们也可以用输入数值的方式来分别设定上下左右Padding值，比如在数值框中填写“100,50,50,100”，记得逗号是小写。

在这里，最右侧的Alignment and Padding（对齐和均分）选项也可以进行如下的操作，辅助我们进行如底部菜单栏图标的均分。下图分别对均分选项使用了Packed和Space between。前者将容器中的内容当做整体处理，而后者将容器中的内容分别进行均分处理。

同时，此选项也可以辅助进行容器内子内容的对齐操作，一共有九个象限，分别调整，它们会做出不同的定位。

Resizing选项

使用Resizing功能可以实现如下图的效果，拖动父容器，根据设置不同，会实现不同的自适应效果。

接下来以第一次提到的这个演示为例，首先将内容做出来，并排布好

然后，从最内侧文本开始，选中文本图层，将Resizing中的横向布局改为Fill container（这是自动布局中最常用的选项，使用此项后内容会根据容器大小响应式的移动）。同时，文本字段请注意进行左对齐操作。

接下来，对下图所示的容器同样添加Auto Layout，并将Resizing中的横向设置改为Fill container。基本上，Fill container是我们最常用的布局属性了，这个要灵活使用。

将这些模块设置完成后，我们可以将其放到一个整体页面中看看效果。

自动布局（Resizing）的几个选项

拥抱内容（Hug contents）：它始终适合高度和/或定义的内容或宽度。也是之前传统的Figma自动布局选项。

固定（Fixed）：调整父级大小时，保持固定的宽度和/或高度。如果你不希望元素尺寸发生变化，请选这个。

填充容器（Fill container）：这是自适应布局中最常用的选项，容器中的内容会自动适应容器的变化，并作出调整。具体就不放图了，参考本文第一个图。

接下来看看几个官方Play ground中的效果

创建自动布局的原则

先从最内部的子框架开始，想清楚在外围框架变化的时候，内部元素的表现。然后再做上一级的框架效果，一层层的来。做自适应布局相对有难度，遵循这个原理，可以让你不至于陷入到混乱之中。

Figma自动布局游乐场文件

复制到浏览器，开始玩耍吧！

https://www.figma.com/community/file/784448220678228461

最后，静电建了一个Figma交流群

欢迎各位小伙伴加入讨论

扫下方二维码加静电的微信，回复Figma

我会拉你进群

——————————————————