# 1.0 - Auto Layout是个啥

1.1-导语

    随着国内的设计交付平台对Figma的支持，许多公司已经把项目文件进行对Figma的转移，本文主要对Auto layout 自动布局进行0-1讲解，文章最后附带着两个案例并且对案例进行拆分讲解，希望这边文章能够在实际工作中帮助到大家。

1.2-Auto layout自动布局简介

    自动布局，通俗地说就是让一个Frame（类似sketch里的画布）添加Auto Layout自动布局后根据内容自动调整尺寸，这点很与sketch里创建组件的布局（单层，非嵌套式组件）类似，该自动布局的内容样式会随着覆盖层的修改而自动调整尺寸，不同的是当工作中遇到多层级控件进行调整的时候Figma会方便许多尤其是对顺序调整和图层组内部操作，而sketch大部分需要借助Anima的配合来进行自动布局调整，有时bug比较多且容易强退，最重要的是效率上Figma更胜一筹。

    在Figma中我们可以通过过合并多个自动布局，创建出适配不同设备尺寸的完整页面，大大减轻了一稿适配多端的压力，如果有css的经验，可以把自动布局想像成一块盒子状的Div，这样能在学习自动布局的理解中减轻很多的负担。

# 2.0 - 基础功能简介

2.1-基本功能讲解&常见问题

一：创建一个Auto layout

创建方法：

一：

选中一个Frame/图层，点击右侧属性面板上 Auto Layout 这一栏上面的 + 加号 .

二：

如果所选的单位不是Frame，而是图层字符串一类，需要按快捷键 ⇧A (win用户：Shift +A) 来进行建立Autolayout布局(假如说是字符串一类，所建立的自适应布局图层是包括行高的)    步骤二约等于以下两步 ：1.选中图层后comd+option+G普通层转换为Frame层 2.右边功能区添加自适应布局（建议使用第二种方法的第一条）    

刚接触时的常见问题：

问：
为什么我创建完之后只功能区只有auto layout层，没有Resizing层？
答：
父层级（此处配图）只可以更改子元素的上下布局，左右间距同样，一层嵌套子元素可以更改自适应布局和自适应宽度，内部元素未创建的  autolayout层的只可以更改自适应宽度。

问：
在创建的时候为什么左拉右拉不管用？
答：
莫要着急，下面会讲....

问：
为什么我的线不按自动布局移动或者出错？
答：
Figma官方文档建议线用宽度大小为1px的阴影替代

问：
我添加了个自动布局怎么进行删除
答：
您不能使用“添加自动布局”键盘快捷键来删除自动布局。如果这样做，将会继续为让着你选中自动布局的图层上继续添加父级自动布局，删除的方法是鼠标找到Auto layout栏，点击 - 就会把当前层级的自动布局给删除了

问：
内部子元素不好选择？
答：
可以按住comd键或者双击该自动布局图层，会自动进入下一级选择。

2.2-Auto Layout与Resizing内部功能简介与应用

2.2.1-自动布局内容区 功能介绍：

上方是基本内容区，当在Frame层下可以进行添加，我们可以把这五个功能分为三个区域来介绍，其中独立内边距重点介绍：

左侧区域 — 布局方向控制区：

当在同一组自动布局下，子层级大于1的时候生效，理解起来很简单，左右图标意思分别对应着，朝下方排列与朝右排列

中间区域 — 内部层级间隔区：

当满足上方左侧区域的条件后，当给多个元素一起设定自动布局 的时候，水平或垂直保持设定数值间距对齐它们，与默认间距调节不同的是，当子自动布局有更改的时候，会根据你图层的大小进行实时调节。

右侧区域 — 内部边距区-智能边距：

和 CSS 里面的padding概念一样，只输入一个数的时候默认为四周边距，可以用英文逗号间隔符来一次性输入上，右，下，左四个边的内边距数值来调节（配合案例实用），四周调节的数值可在独立内边距查看

独立内边距按钮区 — 布局方向控制区：

Packed 统一边距：

可以在内部可视化的控制四周边距，并且可以对内部元素进行四周九种方向对齐，详细看案例展，子元素四周边距为统一数值

Space独立调整边距：

可单独对子元素进行某一边距的距离调整

要注意的是：

在本次更新里，新增内部子元素可以单独设定距离，这对侧边菜单选项支持更加友好了，请看下方列案例演示将一个或多个调整大小属性设置为拥抱内容时，某些选择不会在画布上产生视觉上不同的布局。

2.2.2 — resizing功能简介

解释：

简称缩放选项，可以设定一个对象的父元素或是子元素尺寸发生宽度或者高度的变化时，内部元素会跟着法身什么样式的变化。

Fixed width/height：

字面意思，固定列宽/高，不跟着父级元素或者子元素的变化而变化（下方案例）

Hug contents：

通俗的来说就是根据内容的长度/高度来改变元素大小，让一个父级元素来适应子元素（下方案例）

Fill container：

就是填充效果，让一个元素拉伸来填充满自己所能达到的最大宽度，与Hug contents不同的是，当进行父层级拉伸时可以自适应匹配，当有列表本身水平方向动态宽度可变，而其中每一项又可以自动折行扩展高度来适应更长的文本内容。

2.3 — 常见问题

问：
为什么有时改变父层级后失效？
答：
当父层级缩放样式改了以后，子层级会相应的进行变化与父层级相应，但子层级的子层级不会更改，可以理解为，亲代遗传，不隔代遗传（放一个解释的图片）

问：
为什么我外层设置完Fill后拉伸失效？
答：
注意这个缩放效果只能用在自动布局的Frame的子元素上（下方案例配合一波），要同时检查内部子元素是否都已经Fill

注意下方案例是新手在用Auto layout中常见的一个问题（这不是演习！这不是演习！）

以上是板块二的基础知识内容，如果还有疑问的话可以在评论区留言

#  3.0 - 落地案例实操拆分

   在日常工作中，我们难免会遇到各种各样的页面，但是拆分后我们发现，这些都是由一块一块的布局拼合而成的，那我们可不可以根据页面的板块来进行自动布局，然后再拼合起来，下面是总结了一些日常工作中常用的操作步骤以及问题总结：

1.当我们接到产品给的原型图时，第一步是先对原型板块进行板块的划分然后对板块内在进行行的划分
2.用自动布局嵌套讲究的是从上到下从内到外做，当所有板块全部完成的时候，进行统一的组合注意如果内部有提前需要的复用按钮做的时候要组件化。

下面是一个常用到的案例拆解（素材图片来自网络）

看完上述部分后，我们继续往下走

3.1 - 案例展示

3.1.1 - 案例中经常遇到的问题总结

第一个案例展示我们平常最常用的文章列表
其中的常见问题：
1.
在文章列表中，文章本身的高度与宽度是随着内容进行变换的，所以说我们要将文字区域部分定为宽度Fill，行高根据内容的高度而改变，所以说设定为Hug

2.
做完后添加独立内边距添加数值改为内缩而不是外扩了呢，这个时候我们如果要进行外部扩充的话要单独选中这一层，shift+a给外层进行自适应布局的建立，这时候在拖动内边距就可以增加外部范围了。

3.
对于自动布局中分层线怎么处理：目前官方给出的解释是单行虚线暂时不可以添加，单行实线添加的话把阴影模糊为0，控制x，y轴来进行操作，当定稿结束时上传平台后此处要进行单独标注。

4.
切图问题：当遇到需要切带阴影图的时候，添加切线框会导致布局破坏失衡，建议直接用Export导出切图

5
切图问题：当遇到需要切带阴影图的时候，添加切线框会导致布局破坏失衡，建议直接用Export导出切图

6
自适应布局中如果想让一个元素固定住方法有二：其一是让元素四周固定住，第二种方法是将该图层转换为Frame图层靠边固定

7.
元素重叠，用均分的方式控制定界框可以的让元素之间相互重叠，而用盒子布局进行重叠拖动定界框会让元素挤压出去（自定义数值不可以为负数）

8.如果当前垂直/水平布局已经设定好FIll填充后，在进行垂直/水平布局的转变也会让布局进行破坏

9.tab-bar使用布局均分做非常方便

10.嵌套层可以单独对下级内容进行调节

11.有时候分布布局比自带的栅格系统好用

12.当一个完整的自动布局拖入到另一个自动布局内会适应拖入到的自动布局关系

13.在画布上单击以创建文本层时，Figma默认使用自动宽度，如果单击并在画布中拖动，则Figma将使Fixed。如果在创建文本层后调整其大小，则Figma会将调整大小后的大小更新为Fixed，这点在做文章段落时候很重要，要随时进行调整

12.下方练习案例大家可以自己模拟一下

练习一：将返回title和status bar添加到头部并且能自适应拉伸

下图为案例展示效果：

下面我们对案例进行拆解

3.2-案例展示二

第二个案例我们来看一下功能性首页的布局展示
其中的常见问题：

1.确认好布局后，搜索框是要跟着界面拉伸来走的（搜索框是父级的Fill填充），所以要把父级改为Fill填充（当该自动布局有父级图层的时候才可以，并且内部间距要进行调整）

2.近期便帖部分为平均布局，可以单独对内部某个自动布局元素进行隐藏或者comd+d进行复制，剩余两个因为添加了Fill布局会自动进行拉伸从而适应，或者新添加的那个元素会进行布局四等分

3.可以将任何图层或对象添加到自动布局框架中，单击对象并将其拖到“自动布局”框架上，使用蓝色横条上放置对象的位置会自动适应当前自动布局的规则。

4.当内部有组件的时候，比如近期浏览里面的心，有两种状态，点亮和置灰，自动布局对组件嵌套是可以支持的，随时要保证界面的复用原则。

5.添加组件图标的时候建议Frame层不透明度调整为0%或者背景为底色相同的颜色

下面我们对案例进行拆解，因部分技巧与案例一方法类似就不再过多展示了

3.3.1- 扩展延伸 （关于响应式布局）

在我们日常工作中也会经常遇到一稿多配，或者响应式布局，以前的我们只能通过不断找到断点更改源文件来进行修改，其中最恶心的莫过于保持比例，现在我们有了自动布局能帮助我们省下很多时间。

1.Demo组件化，在最新的Ant Design组件库里，所有的Demo全部都做成了自动布局组件，这样让设计师调整距离高度的时候省下更多时间并且在对一些数值极限情况下更容易展示。

2. 自动布局会对隐藏的选项做覆盖，当某些控件隐藏/显示的时候，会对自动布局产生布局变化。

3.响应式布局的原理就是对不同屏幕尺寸的组件进行隐藏显示，就像手机端和ipad端还需要更改垂直与水平布局方向，因为在完全响应式布局的视图, 每一项混合了自动布局的嵌套和独立内边距等技巧。

最后说一下，关于对自动布局还是要多看多练才行，望大家早日升级为Figma大佬

最后推荐下适合小白入门的Figma手册的中文版：

https://figmachina.com/guide/

部分内容参考：

https://www.figma.com/exit?url=https%3A%2F%2Fhelp.figma.com%2Fhc%2Fen-us%2Farticles%2F360040451373

此次关于Auto Layout的使用技巧就先到这里，有问题请在下方评论区留言。