如何在Figma中基于框架尺寸实现表单控件自适应布局？

Figma的约束（Constraints）和自动布局（Auto Layout）完全支持你所需的跨设备自适应布局，从20英寸桌面到3英寸手机的适配需求都能实现，以下分场景给出具体实现步骤：

单输入控件场景 #

要实现宽屏水平排列、小屏标签与输入框换行且输入框适配屏幕宽度：

1. 选中「First name:」标签和输入框，添加水平方向的自动布局，设置标签与输入框的固定间距
2. 给输入框设置约束：在右侧属性面板的「约束」中，将宽度设为「填充容器」，左右边距固定
3. 开启自动布局的「换行」选项——当画板宽度不足以容纳水平排列的标签+输入框时，输入框会自动换行到标签下方，且宽度自动填充可用空间

多输入控件场景 #

要实现宽屏双控件水平排列、中型屏控件换行调整顺序、小屏全垂直排列：

1. 先将每个输入项（标签+输入框）分别设置为独立的自动布局组（同单控件步骤，确保每个组内支持换行）
2. 将两个自动布局组放入一个外层容器，给外层容器添加水平方向的自动布局，开启「换行」，并设置组间间距
3. 调整布局优先级与对齐方式：
   • 宽屏：外层容器宽度充足，两个输入组水平排列
   • 中型屏：当容器宽度不足时，自动布局触发换行；若需「Last name」组先换行至上方，可给外层容器设置「右对齐」，或给「Last name」组设置更高的flex grow值，让它优先占据可用空间
   • 小屏：容器宽度进一步缩小，每个输入组内的自动布局会自动将标签与输入框垂直排列，输入框宽度填充容器

关键注意事项 #

• 标签需设置固定宽度或固定边距约束，避免被挤压变形
• 所有自动布局组必须开启「换行」，确保空间不足时自动调整排列
• 可通过拖动画板宽度实时预览自适应效果，或用「变体（Variants）」预设不同断点的布局状态

内容的提问来源于stack exchange，提问作者David Thielen