应用约束以定义图层如何调整大小

约束告诉 Figma 在调整图层框架大小时图层应该如何响应。这有助于你控制设计在不同屏幕尺寸和设备上的外观。

您可以查看下方的视频，或继续阅读以了解更多信息。

水平与垂直约束#

您可以在 x（水平）和 y（垂直）轴上应用约束。

我们默认将层的约束设置为顶部和左侧 。

水平#

水平约束定义了在沿 x 轴调整框架大小时，图层的行为方式。

• 左保持图层相对于框架左侧的位置。

• 右维持图层相对于框架右侧的位置。

• 左和右保持图层相对于框架两侧的大小和位置。这可能导致图层在调整大小时沿 x 轴增长或缩小。

• 居中保持图层相对于框架水平中心的位置。

• 缩放将定义图层的大小和位置为框架尺寸的百分比。然后，当你调整大小时，它会保持这些比例。

  例如：框架的宽度是 100px，图层的宽度是 70px，因此图层占其父框架的 70%。如果我们将框架调整为 200px 宽，Figma 将调整图层宽度为 140px，即 200px 的 70%。

垂直#

垂直约束定义了在沿 y 轴调整框架大小时，图层的行为方式。

• 顶部保持图层相对于框架顶部的位置。
• 底部保持图层相对于框架底部的位置。
• 顶部和底部保持图层相对于框架顶部和底部的大小和位置。这可能会导致图层在调整大小时沿 y 轴增长或缩小。
• 居中保持图层相对于框架垂直中心的位置。
• 缩放将定义图层的大小和位置为框架尺寸的百分比。然后，在调整大小时，它将保持这些比例。

注意： 根据图层的位置，可能需要多个约束才能达到相同的效果。

将约束应用于图层#

可以将约束应用于框架内的任何图层。无法将约束应用于框架外的图层，或内的图层。

• 您还可以将约束应用于嵌套在其他框架内的框架。
• 您可以对图层应用 水平 和 垂直 约束。
• 不能将约束应用于组。组会从其包含的图层继承边界。它们不被视为具有边界的单个图层。

注意： 如果你对组应用约束，Figma 会对单个图层应用约束。

要为图层设置约束：

1. 在框架内选择图层或父级。画布上的蓝色虚线显示了当前应用的约束。
2. 从右侧边栏的位置部分点击[图标] 约束 。
3. 调整垂直和水平约束。
   • 使用下拉菜单设置图层的约束。
   • 或者，点击交互式图中的线条来选择约束。

提示！ 按住 Shift 键可以同时选择或应用多个约束。例如：左右约束。

忽略约束#

有时你可能希望在不使用应用于其上的约束的情况下调整框架或图层的大小。你可以通过按住修饰键来暂时忽略应用于图层上的任何约束。

• Mac: 调整大小时按住 Command
• Windows: 调整大小时按住 Ctrl

约束和布局指南

约束为你在框架内定位图层提供了一个基本框架。对于更复杂的设计，我们需要更精确的控制和灵活性。这确保了我们的设计在调整大小时表现正常。

那就是引导线发挥作用的地方。当你在框架中使用引导线时，Figma 会将框架内的任何图层与该引导线对齐。学习如何**使用约束和布局引导线→ **