Figma:Auto Layout 三个关键参数(间距、填充、对齐)

为什么 Auto Layout 是必学

它让组件可伸缩、可复用、可适配。尤其在做设计系统或多端适配时,Auto Layout 能显著减少返工。

参数1:Padding(内边距)

Padding 决定内容到容器边缘的距离。按钮、卡片、标签都依赖 padding 保持视觉一致。建议用 8 的倍数建立习惯,便于跨组件对齐。

参数2:Spacing(间距)

Spacing 决定子元素之间的距离。列表项、图文卡片、表单行都常用。可以配合“Auto spacing”让间距随容器变化,但要注意可读性下限。

参数3:Alignment(对齐)

对齐会影响视觉重心。常见:左对齐适合文本密集型;居中适合按钮与徽标;两端对齐常用于导航条。对齐并不是美观问题,而是信息层级问题。

一个实用示例:带图标按钮

容器设 Auto Layout 横向;padding 12/16;spacing 8;对齐垂直居中。文本设为 Hug contents,图标固定 16。这样按钮随文案变长也不会错位。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功