Figma:Auto Layout 的“Fill/Hug”怎么配(不再乱跳)

先记住一句话

Hug 让元素跟着内容走,Fill 让元素跟着容器走。布局乱跳通常是“谁该 Hug 谁该 Fill”没想清。

场景1:按钮随文案变宽

按钮容器 Hug,文本 Hug,图标 Fixed。这样文案变长按钮变宽,但高度、内边距与对齐不变。

场景2:输入框撑满一行

输入框容器 Fill,内部文本区域 Fill,左右图标 Fixed。这样父级变宽时输入框会自动撑满。

场景3:卡片列表等宽对齐

卡片容器 Fill,标题/描述文本通常 Fill(让换行更自然),右侧操作区 Fixed。列表滚动时视觉更齐。

常见坑

父级不是 Auto Layout 时 Fill 不生效;文本设为 Fixed 宽会导致截断;同时用 Constraints 和 Auto Layout 容易冲突。

小结

先决定“组件是随内容还是随容器”,再逐层分配 Hug/Fill,图标等不可压缩元素用 Fixed。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功