什么是Figma的布局约束
布局约束（Constraints）是 Figma 中用于控制元素在父级框架（Frame）内如何响应布局变化（如父级框架的大小调整）的功能。它类似于网页设计中的 CSS 布局规则，帮助设计师创建灵活且响应式的界面设计。
「约束」是框架（Frame)的专属功能，组（Group)、部分（Section)以及其他的基础图层都不具有约束功能。
布局约束的主要目的是让设计元素在父级框架调整大小时，能够自动适应新的布局，从而减少手动调整的工作量，提升设计效率，并确保设计在不同设备和屏幕尺寸上的一致性和可用性。适合以下设计场景：
- 响应式设计：当设计需要适配多种屏幕尺寸（如手机、平板、桌面）时，布局约束可以自动调整元素的位置和大小。
- 动态内容：当元素的数量或内容可能变化时（如列表项、文本长度变化），布局约束可以确保整体布局的稳定性。
- 交互设计：在设计交互原型时，布局约束可以帮助元素在用户操作（如窗口缩放、滚动）下保持合理的布局。
约束类型
根据约束的方向不同，可以分为水平约束和垂直约束。
我们可以沿着X轴（水平）或Y轴（垂直）应用约束。应用水平约束时，约束设置默认为左侧；应用垂直约束时，约束设置默认为顶部。
框架内的对象同时受到水平约束和垂直约束的限制。
水平约束
水平约束定义了图层应对框架在X轴（水平）方向调整大小时的响应方式。
水平约束提供了以下五种行为方式：
- 左对齐(Left)：元素固定在父级框架内部的左侧，当父级框架的宽度发生变化时，始终与父级框架的左侧距离保持不变。
- 右对齐(Right)：元素固定在父级框架内部的右侧，当父级框架的宽度发生变化时，始终与父级框架的右侧距离保持不变。
- 左右对齐(Left and Right）：元素的宽度会随着父级框架宽度动态调整，始终与父级框架的左右两侧距离保持不变。
- 居中(Center）：元素在父级框架水平方向上居中对齐，即父级框架的宽度发生变化时，元素水平方向上的中心点与父级框架水平方向的中心点的距离固定不变，与左侧两侧距离动态调整。
- 缩放(Scale）：元素的宽度会随着父级框架的宽度变化而自动等比例调整，与左右两侧距离也保持等比例动态调整。
例如：框架宽度为 100 px，图层宽度为 70 px，即图层占框架宽度的 70%。若将框架宽度调整为 200 px，Figma 会自动将图层宽度设为 140 px，仍为 200 px 的 70%。
垂直约束
垂直约束定义了图层应对框架在Y轴（垂直）方向调整大小时的响应方式。
垂直约束提供了以下五种行为方式：
- 顶部对齐(Top)：元素元素固定在父级框架内部的上方，当父级框架的高度发生变化时，始终与父级框架的顶部距离保持不变。
- 底部对齐(Bottom)：元素固定在父级框架内部的下方，当父级框架的高度发生变化时，始终与父级框架的底部距离保持不变。
- 顶部与底部对齐(Top and Bottom)：元素的高度会随着父级框架高度动态调整，始终与父级框架的上下两侧距离保持不变。
- 居中(Center）：元素在父级框架垂直方向上居中对齐，即父级框架的高度发生变化时，元素垂直方向上的中心点与父级框架垂直方向的中心点的距离固定不变，与上下两侧距离动态调整。
- 缩放(Scale）：元素的高度会随着父级框架的高度变化而自动等比例调整，与上下两侧距离也保持等比例动态调整。
根据图层所处位置，多种约束方式可能产生相同效果。
应用约束
适用对象：约束适用于框架内的单个图层或嵌套的框架。
不适用对象：约束不适用于框架外的对象，自动布局框架中的图层以及组。
如果对组使用约束，Figma将对组中的单个图层应用约束。组是没有明确边界的特殊元素。
添加约束：
- 选择框架中的图层或嵌套框架。画布上的蓝色虚线显示当前应用了哪些约束。
- 点击右侧边栏位置面板中的约束图标。
- 调整水平和垂直约束。点击下拉菜单选择约束行为，或点击交互图表中的线条选择约束行为。
提示：按住Shift键可同时使用多个约束行为，例如同时使用左、右约束。
忽略约束
有时，我们可能需要调整框架大小时，框架内的图层不受约束行为的控制。我们可以在拖拽调整框架大小时按住Command键（Mac)或Ctrl键(Windows），暂时忽略约束。
知识浩瀚如海，我愿做你的引航标。聚焦用户体验与原型设计，专业干货持续输出。速来关注，在设计领域飞速成长，下一个设计大神就是你！