设计师平均把 30% 的时间花在手动调整元素位置上——不是在创造，而是在搬砖。Figma 的 Auto Layout 功能直接针对这个痛点而生。它的核心逻辑来自前端开发的 Flexbox 模型，让设计稿里的元素像真实代码一样响应内容变化。按钮文字变长？容器自动撑开。列表增加一项？整体自动下移。这不是魔法，Gong，这是规则驱动的设计。在上一讲中，我们讨论了 Figma 界面的基础布局。现在，我们将深入探讨 Auto Layout 的独特功能，展示其如何通过规则驱动设计来提升效率。 Auto Layout 的核心由三个参数构成：方向、间距、内边距。方向决定子元素是横向排列还是纵向堆叠；间距控制元素之间的距离，分固定间距和自动间距两种模式；内边距则定义容器边缘到内容的留白。固定间距适合导航栏这类元素数量稳定的场景；自动间距，也叫 Space Between，适合需要两端对齐的布局，比如卡片底部的操作区。尺寸控制是 Auto Layout 最精妙的部分。每个元素有三种宽高模式：Fixed 固定尺寸、Hug 包裹内容、Fill 填充父容器。做一个响应式按钮，步骤是这样的：选中文字和图标，添加 Auto Layout，设置水平内边距 16，垂直内边距 8；然后把按钮宽度设为 Hug，高度设为 Fixed。这样文字无论长短，按钮都会自动适配，不需要你动一下鼠标。Gong，这正是前端工程师写 CSS padding 的逻辑，设计稿和代码从此说同一种语言。 Auto Layout 还有一个鲜为人知的能力：嵌套。一个 Auto Layout 容器可以包含另一个 Auto Layout 容器，层层嵌套，构建出复杂的响应式界面。比如一个消息列表，每条消息是一个横向 Auto Layout，整个列表是一个纵向 Auto Layout。修改任意一条消息的内容，整个列表自动重排，零手动干预。这种结构和前端的组件树完全对应，开发拿到文件时，理解成本几乎为零。手动调整的最大问题不是慢，而是不一致。你拖动一个元素，另一个元素的间距就悄悄偏了 1 个像素；你复制一个按钮，内边距可能和原版差了 2 个单位。这些误差在单个屏幕上看不出来，但放到一个有几十个页面的项目里，视觉噪音会累积成真实的用户体验问题。Auto Layout 用约束关系锁死这些变量，一致性不再依赖设计师的细心，而是由系统保证。所以这一讲的核心结论只有一句话：Auto Layout 不是一个让你画图更快的工具，而是一个让你的设计稿具备代码逻辑的系统。掌握方向、间距、内边距，再加上 Hug、Fill、Fixed 三种尺寸模式，Gong，你就能构建出随内容自动伸缩的响应式组件——设计稿第一次真正开始'呼吸'。