Figma:做表单对齐更快(用栅格+组件约束)

表单对齐的核心

不是把每个输入框拖到“看起来齐”,而是先定一条对齐规则:标签宽度、输入框起始线、行高与间距。

第1步:用 Layout Grid 定内容区

在表单容器上加列栅格,确定输入区域的统一起始线;移动端常用 4/8 列,桌面常用 12 列。

第2步:标签区做固定宽组件

标签组件固定宽(如 80/96),右对齐文字;输入区 Fill。这样不同字段名长度也能保持输入框起始线一致。

第3步:用 Auto Layout 管理行距

每一行用水平 Auto Layout,整体表单用垂直 Auto Layout。行距、分组间距一处改动即可全局生效。

第4步:错误提示与帮助文案的预留

在输入组件内部预留错误行(可折叠),避免出错时把布局撑乱。错误文本通常 Fill,图标 Fixed。

小结

栅格定大结构,组件定宽度规则,Auto Layout 管间距与自适应。表单从此不靠“手感”。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功