自动布局可以应用于框架，使设计能够根据内容变化动态响应，节省你的时间，并让设计具有响应性和适应性。

自动布局框架中的元素会根据方向、间距、内边距、对齐方式以及其他自动布局属性自动排列。当内容发生变化或元素被添加、移除或调整大小时，布局会自动调整，无需手动重新定位。

使用自动布局创建响应式设计，例如：

按钮会随着文本标签的编辑而增大或缩小

列表会根据项目的添加、移除或隐藏进行适应

便当盒和仪表盘

适应不同屏幕尺寸的网页

添加自动布局

要开始在设计中使用自动布局，选择一个或多个图层，然后按 ⇧ Shift A 或点击右侧边栏的“添加自动布局”。Figma 会尝试确定哪些 自动布局 —垂直、水平或网格——你可以选择使用。你可以随时切换到不同的流程。

了解更多关于在设计中切换自动布局的信息。

选择自动布局流程

一旦在框架上使用自动布局，您可以选择三种选项来决定框架中对象的流动和排列方式：

• 垂直

• 水平

• 网格

水平和垂直

“垂直”选项会将对象沿着 y 轴放置在你的画框中。你添加、移除或重新排序的任何对象都会遵循 y 轴。例如：待办事项列表中的多个列表项，或新闻推送或时间线中的帖子。

“水平”选项会将对象沿着 x 轴放置在你的画框中。你添加、移除或重新排序的任何对象都会沿着 x 轴排列。例如：一排按钮，或移动导航菜单中的图标。

当你选择水平时，换行功能就会可用。换行会将任何溢出的对象推到框架的下一行。