自动布局基础

2025 年 5 月网格功能更新后，自动布局面板与本视频展示有所差异。同时，官方术语已从自动布局方向调整为自动布局流向。你可以查看更新后的自动布局设置详情。

本章我们将借助自动布局制作自适应按钮：按钮文字改变时，尺寸会自动拉伸 / 收缩。随后把按钮转为主组件，实现全局复用。

（配图：带文字标签的自适应按钮，展示自动布局的动态缩放效果）

我们先看目标按钮。常规做法是：矩形做背景、文字做标签、外层套一个画板。虽然视觉没问题，但后续修改按钮文字时，完全无法自适应。

正确做法：给文字图层创建自动布局画板，并添加填充色作为按钮底色。

自动布局核心要点

自动布局能帮你整理、排列、均分设计元素。修改内容时元素自动适配，省时高效，同时让设计具备自适应、可复用性。

按下快捷键 Shift + A，可对画板或选中图层一键开启自动布局。选中图层会归入带自动布局的父画板，你再定义父子图层的排布规则即可。

子图层排布流向可选：垂直排列、水平排列、自动换行。

（配图：粉 / 黄 / 绿三个圆形，分别演示垂直、水平、换行三种排布）

你可以调整上下左右内边距，拉开子图层与父画板的间距。

（配图：开启自动布局的博客卡片，标注批量改内边距快捷键，演示拖动控点调整内边距）

还能设置子图层间的间隙（间距 / Gap）、子图层在父画板中的对齐方式，以及元素尺寸变化时的缩放规则。

（配图：博客卡片内的标签组开启换行自动布局，修改间隙为「自动」后，标签横向铺满容器）

父画板尺寸规则：

子图层尺寸规则：

（配图：选中图层，高亮右侧尺寸设置面板）

组合尺寸规则，适配不同场景。比如 APP 通知栏：宽度设为固定、高度设为贴合内容，就能保证宽度不变、长文字自动撑高。

这些属性让你的设计在迭代中更灵活。了解更多自动布局属性。

尝试实操！通过下方交互式沙盒体验自动布局。

提示：该沙盒不完全复刻 Figma 原生功能，仅用于入门学习。