Figma#6：Auto Layout自动布局

参考视频：【Figma教程】保姆级教程，全网最简单易学的Figma教程08-Auto Layout 自动布局 弹性布局_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1cZ4y1F7YxFigma 超级功能：Auto Layout 3.0 教学已就绪 大家随我冲！！！_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Uv411r7iD/?spm_id_from=333.788.recommend_more_video.3

目录

1 创建Auto Layout

2 自动填充frame 

3 ☆创建有内容的自动布局

4 对齐与间距

5 边距 

5.1 数值设置

5.2 内轮廓

5.1.1 Space Between

6 Resizing

---

1 创建Auto Layout

选中想要规划进某个Frame的图形，并摁住shift + A，就绘制了一个Auto Layout版的Frame。

在常规的Frame里点击Auto Layout的选项也可以转换成Auto Layout的模式。

2 自动填充frame 

如果背景形状的大小不能包裹住组件的话，创建Auto layout时会出现一些小问题。

对的

 错的 

 实际上，我们并不用像上面那样单独绘制一个矩形来作为frame。

1. 选中目标的组件群。
2. shift+A创建自动布局
3.  直接在Fill进行一个填充
4. 再调节一下padding，一个妥帖的frame就自动创建好了！

3 ☆创建有内容的自动布局

例如说，我们想将上图这样的按钮放进同一个自动布局中。于是我们将它们框起来然后摁shift+A，但是接下来发生的事情有些强差人意。

变成了这样！

实际上，我们Auto Layout的创建是以组件为基础的。也就是说，如果只是单纯选中这些组件来创建Auto layout的话，由于文字和矩形都处于一个平行的图层级别上，所以自动布局会把这些组件全部都拎出来同层排列。

观察图层。虽然在图层上他们有上下之分，但实际上他们都是同一级别的图层。不太严谨地用CSS的说法来说，他们彼此之间没有父子级的关系。也就是说他们都是儿子

如果我们想创建一个包含着内容、例如说内嵌着文字的按钮们的Auto Layout，就等同于我们要创建一个只有字体的小Auto layout，并且进行背景的填充，然后再对按钮们创建一个大的Auto layout。 

1. 将文字auto layout
2. 为auto layout的frame填充颜色
3.   对所有的frame进行一个auto layout

观察图层，此时就已经达成了我们想要的效果。

4 对齐与间距

其中，Auto Layout有几种功能按钮。

• 竖向对齐
• 横向对齐
• 间距
• 内边距（我趣 是padding！） 

5 边距 

5.1 数值设置

在数值输入框里：

1. 输入一个数值时，所有padding都被应用上同样的间距。
2. 输入多个数值时，按照CSS的规矩（上右下左、上下/左右）来应用间距，以空格或英文逗号作为分隔符。 

5.2 内轮廓

 在Auto Layout的内轮廓控制区的按钮里，可以选择Frame内想要被激活的间距部分。

 图中深色部分位置指上左间距被激活，浅色部分的位置指哪个部分的都不被激活。

这张图中的浅色部分指下右间距被激活。以此类推。

框内的数字按照顺时针分别为上、右、下，左间距。通过按TAB键可以进行顺时针的输入框切换。

5.1.1 Space Between

如图，在内轮廓控制区中调成Space between，会把组件最左端和最右端的部分的相应间距固定了，把中间设置为弹性部分，以居中的形式随着Frame扩缩而扩缩。

每一个Frame管理到的都是自己的子级。

6 Resizing

Resizing中，上图的两个红框起的都是同样的作用。用左不用右，用右不用左。

在这里我们就用右吧。

 

1. Fixed width：固定宽度
2. Hug contents：自适应
3. Fill container：拉伸 

在Frame一级中才有自适应，在组件内才有拉伸。

一组分别应用了不同resizing样式的按钮

不好意思把fixed打错了 请无视

然而，Resizing不止有一个维度。宽度和高度都是能用上Resizing的，对宽度和高度进行不同的Resizing组合也会有不同的效果。

以及，填充的时候边距是会被考虑在内的。

到底为什么CSDN的编辑又出BUG了下面这个灰条删不掉小编也很惊讶

 边距为0的情况 

边距为10的情况 

不好意思又把fixed打错了 请无视