单元格自适应宽度_Figma进阶干货，从零构建自适应组件

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

以下分五个章节来叙述：

• 自动布局是什么

• 自动布局的应用技巧

• 组件实战

• 页面实战

• 开发协作

自动布局是什么

一、关于自动布局

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

二、创建自动布局

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

我们拿按钮举个例子。

第一步：创建按钮框架

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

第二步：创建自动布局

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

第三步：调整按钮大小

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

第四步：调整按钮样式

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

三、自动布局的属性

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

方向

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

顺序

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

间距

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

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

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

填充

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

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

方法