Figma自动布局(Auto Layout)一键做出等间距卡片:从0到可复用组件

你会遇到的典型问题

很多人用Figma排卡片列表时,复制粘贴越多越乱:间距不一致、文字换行后高度不同、容器宽度改了就对不齐。Auto Layout的目标就是把这些“手动对齐”变成可维护的规则。

第1步:搭一个单卡片的内容结构

先做一张卡片的内部:标题、描述、按钮(或图标)。建议把文字区域做成垂直堆叠,并预留内边距。此时不要急着对齐整页,先把单卡片做稳定。

第2步:给卡片加Auto Layout(Shift + A)

选中卡片最外层Frame,按Shift+A。方向选Vertical(上下),设置Padding(如16/16/16/16)与Item Spacing(如8)。对齐方式通常选Left/Top,方便文字增长。

第3步:设置“Fill container”与“Fixed”让它更聪明

卡片宽度:常见做法是让卡片本体在父级里使用Fill container;内部按钮或图标可以Fixed。文字通常也用Fill,让换行自然发生。关键是:谁该跟随容器变化,谁就用Fill。

第4步:做成列表/栅格的外层Auto Layout

把多张卡片放进一个父级Frame,再Shift+A。方向如果是横向栅格,选Horizontal并开启Wrap(有的话);如果是竖向列表,就选Vertical。Item Spacing设置为你希望的卡片间距(如16)。

第5步:把卡片做成组件,后续只改一次

选中单卡片,Create component。后续添加新卡片时,用组件实例。需要不同按钮文案时,用组件属性或在实例里只替换文字,不要破坏结构。

常见排查清单(改一次就稳定)

1) 间距不对:检查父级与子级是否都开了Auto Layout,Item Spacing是否被覆盖。2) 高度跳动:文字层是否设置为Hug contents。3) 宽度不跟随:需要跟随的层改为Fill container。4) 对齐怪异:检查对齐锚点(Left/Center/Right)。

按这个流程搭完,你会发现卡片数量越多越省心:改一次间距、字体或按钮样式,整个列表都会同步更新。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功