Figma进阶干货！从零开始构建自适应组件指南

2020 年 11 月份，Figma 发布了全新的自动布局功能，这个超级棒的功能大大提升了设计效率，特别是对于一些重复性的组件，尤其有用。团队最近正好在着手 AI Design 的更新，本文主要分享我们平时在项目中使用自动布局的一些经验和方法，从 0-1 结合案例，详细讲解我们是如何使用 Figma 自动布局搭建自适应组件，希望这篇文章能够在实际工作中帮助到大家。

以下分五个章节来叙述：

• 自动布局是什么
• 自动布局的应用技巧
• 组件实战
• 页面实战
• 开发协作

自动布局是什么

1. 关于自动布局

讲解之前我们先回顾下，自动布局是一种可以添加到框架和组件的属性，通过自动布局，你可以创建响应其内容的动态框架。以前搭建或修改一个组件需要不断的调整尺寸，现在通过自动布局即可完成操作。

2. 创建自动布局

我们可以将自动版式添加到框架或对象中。包括：新框架或空框架、已有内容的框架、组件和组件集、图层/或组

我们拿按钮举个例子。

第一步：创建按钮框架

创建一个按钮框架，在框架中输入按钮的内容

第二步：创建自动布局

选择按钮框架，单击属性面板的“自动布局”部分中的“+”。或者使用键盘快捷键“SHIFT+A”

第三步：调整按钮大小

调整自动布局属性控制按钮大小

第四步：调整按钮样式

调整按钮颜色、描边、填充等属性

3. 自动布局的属性

具有自动布局的框架具有与常规框架不同的属性。应用自动布局时，我们可以在右侧栏中看到一些可以更改的属性，接下来我们看看这些属性具体代表什么。

注：可新标签页打开后查看大图。

方向

方向描述了自动布局框架的流动方式，选择向下箭头，表示垂直沿 y 轴添加，移除和重新排列对象。选择向右箭头，表示水平沿 x 轴添加，删除和重新排列对象。

顺序

选择框架内的对象，使用键盘上的方向键调整对象的顺序。

间距

调整项目与项目之间的间距

方式一：拖动属性图标以调整项目之间的间距。

方式二：在输入框输入数值，使用键盘上下键微调值。

填充

填充控制子对象与自动布局框架的边界之间的空白。我们可以统一设置填充，也可以为顶部、右侧、底部和左侧填充设置不同的值。

方法一：在输入框中输入数值，调整填充值。

方法二：为每一面单独设置填充，打开对齐和分布设置，并分别调整每个值。

对齐

选择如何在“自动布局”框架内对齐子对象。我们不能单独控制对象的对齐方式。但可以在父“自动布局”框架上设置子对象的对齐方式。

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

如果分布设置为间隔，那么每个方向都有三个选项：

• 垂直自动布局：左，中，右
• 水平自动布局：顶，中，下

如果分布设置为打包，则每个方向都有相同的九个选项：

• 左上
• 中上
• 右上
• 左中
• 中央
• 右中
• 左下
• 中下
• 右下

分布

为框架中的子对象设置对齐规则后，选择这些对象在框架中的分布方式。在下图对齐面板，单击底部下拉箭头进行选择：

• 打包：框架中的对象将被分组在一起。使用此选项可以使框架中的对象尽可能靠近并对齐。
• 等分：框架中的对象之间的空间沿框架的方向和对齐方式均匀分布。使用此选项可将对象拉伸到整个框架。

调整大小

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

设置父级自动布局框架的调整大小，以适应对其子级对象的更改。使用调整大小面板，可以将调整大小设置分别应用于 X 和 Y 轴上的对象。

• 固定的宽度或高度 （Fixed）

将“自动布局”框架设置为“固定宽度或高度”时，框架的大小不响应其中对象的变化，框架尺寸的值将保持不变。

• 拥抱内容 （Hug contents）

将“自动布局”框架设置为“拥抱”内容，框架根据其内容调整自身大小。

• 填充容器 （Fill container）

在“自动布局”框架设置为“填充”，框架中的内容将拉伸到其父框架的宽度和/或高度。