Figma自动布局要分别设置排列方向、宽度和高度。Hug contents让容器在选定轴上包住内容，Fill container让子项在选定轴上使用父容器可分配的空间，Fixed保持指定尺寸。它们不会替你决定手机断点，也不会因为画板变窄就自动把横排改成竖排。
下面用一张摄影课程卡片完成练习：封面、课程名、时间、价格、名额标签和“查看详情”按钮。若团队还要在墨刀设计中复用这组界面，可以沿用内容与尺寸规则；不同工具的属性需分别配置，不能默认文件迁移后完全相同。
先准备内容和层级，再开启自动布局
用“摄影入门”和“周末摄影入门：从取景到夜景的完整练习”作为短、长两种标题；时间写“周六14:00—17:00”，价格写“199元”，状态准备“还有3个名额”和“本期已满”。这些是设计练习数据。不要先把短标题调得很整齐，再临时塞入真实内容。
- 先把课程名和说明放在文字组中，把时间与价格放在信息行中；相关元素先分组，避免一次选中整页。
- 选中一组图层，使用添加Auto Layout的操作（快捷键Shift+A），检查生成的容器和图层顺序。工具推断的方向不符合阅读顺序时手动调整。
- 把封面、文字组、信息行、状态与按钮放进卡片容器，方向设为垂直。再把多张卡片放入列表容器。
- 用“课程列表／课程卡／标题组／信息行／操作按钮”命名图层，让排错时能找到负责尺寸的父层。
可以先用卡片宽320、内边距16、纵向间距12作为练习起点；这些是本例取值，不是通用规范。设置完成后，内容区宽度是288，标题应在这一范围内换行。
宽度与高度分开配置
| 对象 | 宽度 | 高度 | 理由 |
|---|---|---|---|
| 桌面课程卡 | Fixed 320 | Hug contents | 先稳定列宽，内容变多时向下增长 |
| 标题组容器 | Fill container | Hug contents | 占卡片可用宽度，包住多行文字 |
| 标题文字 | Fill或受限宽度 | 文字自动高度 | 有宽度约束才会换行，高度需允许增加 |
| 信息行 | Fill container | Hug contents | 时间和价格在同一行分配空间 |
| 标签、按钮容器 | Hug contents | Hug contents | 文字外保留内边距，必要时设最小高度 |
文字层的自动高度与外层Auto Layout容器的Hug不是同一个设置。标题如果保持自动宽度，长文案会把行撑长；外层再Hug宽度，就容易一路撑出卡片。先让标题宽度受卡片约束，再让文字高度随换行增长。
在同一轴上，若把子项设为Fill container，Figma会将父容器该轴的Hug contents改为Fixed。因此，想让卡片高度包住内容时，文字组应随内容增高，不要把它设为Fill高度；先检查父层实际的尺寸模式，再确认哪一层提供尺寸。可对照Figma Auto Layout官方说明核对嵌套与尺寸行为。
让长标题暴露问题，而不是缩小字号
把标题替换成长版本，预期是标题变成多行、文字组变高、卡片随之增高，下一张内容向下移动。按钮会跟随上方内容移动，不会自动与其他卡片的按钮底边对齐。如果业务要求同一行等高卡片，需要另外设置一致的卡片高度或合适的父层拉伸策略，并为中间内容安排空间；不能一边要求卡片Hug自然增高，一边假设按钮总在统一底线。
| 出现的问题 | 从哪里查 | 修正后应看到什么 |
|---|---|---|
| 标题一直向右撑 | 文字自动宽度、标题组宽度Hug | 宽度受限后换行，高度增加 |
| 第二行被裁掉 | 文字高度或父层高度固定 | 文字完整，父层随内容增长 |
| 价格被挤到卡片外 | 同一行多个固定宽度或过多Fill | 价格保持可读，时间允许合理换行 |
| 隐藏说明后留下大空洞 | 固定高度占位或额外空白层 | 说明移除后间距仍符合规则 |
再换成“本期已满”。标签宽度可以随文字增长，但按钮是否改成候补、是否仍允许看详情，是业务状态，需另外调整组件内容或变体；Auto Layout只处理排列和尺寸。
列表换行与手机改方向是两件事
第一种练法是保持卡片固定宽320，把列表设为水平排列并启用Wrap。列表内容区宽1008、卡片间距24时，可放三张卡片；继续收窄，放不下的卡片才换到下一行。不要把父容器也设为一直向宽度Hug，否则没有可用宽度限制触发换行。
第二种练法是单独做手机画板。例如画板宽390、左右各16，内容区宽358；把该版本的列表明确改为垂直方向，课程卡宽度改为Fill，高度仍由内容决定。这个设置由设计者完成；缩窄桌面画板本身不会自动触发方向切换或替你选手机组件变体。
若手机还要将封面挪到标题左侧，需要调整内部结构或做对应变体，再连接原型；Wrap只改变项目排到哪一行，不能重排卡片内部的信息。响应式断点与栅格的完整规划可继续看响应式UI设计入门。
把练习结果整理成可修改的组件
保留短标题、长标题、已满、无说明四个实例，逐一修改内容和容器宽度。确认长文字完整、价格不丢失、按钮仍属于正确课程，再把稳定的结构整理为组件。重复出现的问题应回到主组件的尺寸责任修正，不要在每个实例中靠手动挪位置救场。
最后在画板旁留下四行约定：卡片宽度由列表控制；标题受限宽度并自动增高；桌面换行使用Wrap；手机竖排使用单独配置。评审者能据此修改一条课程文案并解释布局变化，才说明这套结构可维护。原型预览验证的是设计表达，实际网页的断点、浏览器缩放和键盘行为仍需在实现中验证。
