很多人用Figma排卡片列表时,复制粘贴越多越乱:间距不一致、文字换行后高度不同、容器宽度改了就对不齐。Auto Layout的目标就是把这些“手动对齐”变成可维护的规则。
先做一张卡片的内部:标题、描述、按钮(或图标)。建议把文字区域做成垂直堆叠,并预留内边距。此时不要急着对齐整页,先把单卡片做稳定。
选中卡片最外层Frame,按Shift+A。方向选Vertical(上下),设置Padding(如16/16/16/16)与Item Spacing(如8)。对齐方式通常选Left/Top,方便文字增长。
卡片宽度:常见做法是让卡片本体在父级里使用Fill container;内部按钮或图标可以Fixed。文字通常也用Fill,让换行自然发生。关键是:谁该跟随容器变化,谁就用Fill。
把多张卡片放进一个父级Frame,再Shift+A。方向如果是横向栅格,选Horizontal并开启Wrap(有的话);如果是竖向列表,就选Vertical。Item Spacing设置为你希望的卡片间距(如16)。
选中单卡片,Create component。后续添加新卡片时,用组件实例。需要不同按钮文案时,用组件属性或在实例里只替换文字,不要破坏结构。
1) 间距不对:检查父级与子级是否都开了Auto Layout,Item Spacing是否被覆盖。2) 高度跳动:文字层是否设置为Hug contents。3) 宽度不跟随:需要跟随的层改为Fill container。4) 对齐怪异:检查对齐锚点(Left/Center/Right)。
按这个流程搭完,你会发现卡片数量越多越省心:改一次间距、字体或按钮样式,整个列表都会同步更新。