怎样用 Figma 组件与自动布局表达网页？

让设计部件随文字和空间调整，减少只适合一张截图的固定摆放。

自动布局是 Figma 按方向、间距、内边距和对齐规则安排内容的功能。它帮助设计稿适应文字或部件变化，比逐个固定位置更容易复用。

先记住这几件事

• 随内容增长 表示区域按内部内容调整； 填满容器 表示使用外层提供的空间。
• 嵌套 是一个布局中再放另一个布局，例如卡片中包含标题组与按钮组。
• 用组件属性开放必要变化，文字可以编辑，图标可以按规则替换，不必为每段文案建一个新版本。
• 用长文字、增减项目和不同宽度检查，观察结构是否按预期变化。

布局关系见 Figma 自动布局指南 ，可调整选项见 Figma 组件属性指南 。

从固定摆放到可调整结构

部件变化的示意

以下是假设服务卡片。

用一个例子走一遍

设计师把服务卡片分成文字组和操作组，设置它们之间的间距。换成长标题后，卡片随内容增长。再检查窄宽度与隐藏图标的情况，把可变行为记录下来，开发者据此实现网页并复查。

边界与常见误解

Figma 自动布局不是浏览器布局引擎。设计稿能伸缩，也不意味着代码里已经实现换行、断点或缩放。固定尺寸并非一律错误，但需要明确理由，并测试内容变化。