Figma 自动布局进阶的核心，不是把所有图层都设成同一种尺寸，而是让父容器、内容和例外元素各自承担明确的职责。下面用“拾光阅读”移动端课程卡片作为练习：标题长度会变化，收藏按钮固定在右上角，讲师头像需要重叠显示，卡片仍应在列表中稳定排列。
如果还不熟悉方向、间距和内边距，先阅读Figma 自动布局入门。
1. 先拆清父容器和内容层级
在 Figma 中新建 390px 宽的“课程列表”Frame，再建立一张 342px 宽的“课程卡片”。卡片使用垂直 Auto layout，内边距设为 16px，项目间距设为 12px；封面、标题区、标签行和底部信息分别是独立的子 Frame。这样修改标题或标签时，变化只会沿着正确的层级传递。
- 选中课程卡片及其子图层，按 Shift + A 添加 Auto layout。
- 在右侧设置 Vertical、间距 12、左右上下内边距 16。
- 标题文本选择适合内容的宽度，描述文本设为 Fill container，让长文案在卡片内换行。
2. 用 Hug、Fill、Fixed 分配尺寸责任
Hug contents适合按钮、标签和卡片高度：内容变长时容器随之增长。Fill container适合正文或需要占满剩余空间的区域。Fixed适合封面比例、图标和列表宽度等不应因兄弟元素变化的对象。一个常见组合是：卡片宽度 Fixed，卡片高度 Hug；正文宽度 Fill；收藏图标宽高 Fixed。
排错时先看当前选中对象属于父级还是子级。Fill 只能用于 Auto layout 的子对象；如果父级同时包含 Fill 子对象，父级在该轴上可能不再 Hug，而会表现为 Fixed。将标题改成两行、再把描述改成三行，分别观察卡片高度和底部操作区是否被推开。
3. 用 Ignore auto layout 放置收藏角标
收藏按钮需要贴在封面右上角，却不应把标题向下推。把按钮拖入封面所在的 Auto layout Frame，选中它并启用 Ignore auto layout（旧界面称 Absolute position），再用 Constraints 设定右、上边距。它仍属于封面容器，但不参与普通排列。
自查三个状态：改变卡片宽度时角标是否仍贴右上角；把按钮文字从图标改成“已收藏”时是否有足够宽度；隐藏封面时是否需要把角标一起隐藏。若角标漂移，通常是选错了父级或约束没有相对封面设置。
4. 用负间距做头像堆叠
将讲师头像放进横向 Auto layout Frame，设置头像为 32px 固定尺寸，再把间距设为 -8px。负间距会让相邻头像部分重叠；通过层级顺序决定谁显示在上方。头像数量变化时，外层宽度可以 Hug，底部文字则保持 Fill。
不要用负边距代替整个布局。先确认头像都有相同尺寸和圆形裁剪，再逐步从 -4px 调到 -8px；如果头像主体被遮住，减小重叠量或调整图层顺序。需要“+3”提示时，把提示放在队列最后并设为 Fixed。
5. 用三组内容测试组件
把卡片整理为组件前，至少测试短标题、长标题和无封面三种状态，并分别预览窄屏和宽屏。检查标题换行、按钮可点击区域、卡片高度、角标位置和头像队列。对于列表页，再复制三张卡片，确认一张变高不会覆盖下一张。
完成 Figma 练习后，可以将页面导入Pixso Figma 专题中介绍的工作台继续整理；在 Pixso 中可用中文面板复核同一组 Hug、Fill 和绝对定位关系。若想直接练习，可打开 Pixso建立课程卡片文件。迁移时先挑一张代表性卡片核对，再扩展到整个列表，能更快发现字体、间距或导入层级的差异。
出现“卡片不跟着文字变高”时，按顺序检查：正文是否仍是 Fixed、父级是否被固定高度锁住、子级是否误用了 Fill；出现“角标把标题挤开”时，检查 Ignore auto layout 是否应用在收藏按钮本身；出现“头像重叠方向反了”时，检查横向队列的图层顺序。把这三类问题记录成组件旁的说明，下一位协作者就能按同一套规则维护。
练习文件可以保留一个“参数说明”区域，写下卡片宽度、内边距、头像尺寸和负间距。后续换成真实课程数据时，只需替换内容并复核三种状态，不必重新猜测每个数字的来源。
参考：Figma Auto layout 指南。
