如何在Figma中使用约束来建立布局依赖？

一、约束

约束 = 子元素“粘”在父 Frame 的哪条边/怎么缩放。
父 Frame（画板/普通 Frame）尺寸变 → 子元素按约束自动调整位置和大小 → 形成父子布局依赖。

前提：约束只对 Frame 里的图层生效；Auto Layout 内部不能用约束。

---

二、约束的 5 种水平 + 5 种垂直

水平（Horizontal）

• Left：固定距左边（默认）
• Right：固定距右边
• Left & Right：左右都固定 → 宽度拉伸（最常用）
• Center：水平居中
• Scale：按比例缩放（百分比）

垂直（Vertical）

• Top：固定距顶部（默认）
• Bottom：固定距底部
• Top & Bottom：上下都固定 → 高度拉伸
• Center：垂直居中
• Scale：按比例缩放

---

三、建立布局依赖：标准流程（4步）

1. 必须先有父 Frame

• 新建画板 / 新建 Frame（不能是 Group）
• 所有要加约束的元素，必须嵌套在这个 Frame 里

2. 选中子图层 → 打开约束面板

• 选中元素（在 Frame 内）
• 右侧面板 → Constraints（位置下面）
• 看到蓝色虚线，就是当前约束锚点

3. 设置水平 + 垂直约束（关键）

• 直接点示意图的边，或下拉选择
• 常用组合直接背：
  • 全屏宽度：Left & Right + Top
  • 右上角按钮：Right + Top
  • 居中弹窗：Center + Center
  • 通栏卡片：Left & Right + Top & Bottom

4. 验证依赖：拖动父 Frame 边缘

• 拉宽/拉高父 Frame
• 子元素自动按约束变化 → 依赖建立成功

---

四、最常用约束组合（直接抄）

1. 通栏组件（Header / 卡片）

• 水平：Left & Right
• 垂直：Top
  效果：宽度随屏幕拉伸，高度不变，左右边距固定。

2. 右上角固定按钮（关闭/分享）

• 水平：Right
• 垂直：Top
  效果：永远粘在右上角，父怎么变都不跑。

3. 底部导航栏

• 水平：Left & Right
• 垂直：Bottom
  效果：贴底、通宽，高度固定。

4. 居中弹窗/提示

• 水平：Center
• 垂直：Center
  效果：永远居中，不贴边。

5. 响应式图片（保持比例）

• 水平：Scale
• 垂直：Scale
  效果：随父等比缩放，不变形。

---

五、依赖链：多层嵌套怎么玩

约束只作用于直接父 Frame，不跨级。

例子：

• 画板（Frame A）
  • 卡片（Frame B，约束：Left & Right + Top）
    • 标题（文本，约束：Left + Top）
    • 图片（约束：Left & Right + Scale）

依赖链：

• B → A（宽度拉伸）
• 标题 → B（左上固定）
• 图片 → B（宽拉伸、等比）

改 A 宽度 → B 拉伸 → 图片拉伸、标题不动 → 层层依赖、局部更新。

---

六、常见坑（依赖失效）

1. ❌ 元素不在 Frame 里 → 约束面板不出现
2. ❌ 用了 Group 而不是 Frame → 约束无效
3. ❌ 在 Auto Layout 内部加约束 → 冲突、错乱
4. ❌ 只设单边（如仅 Left）→ 大屏不拉伸
5. ❌ 子元素设 Fixed 但父拉伸 → 错位

---

七、实操小案例（1分钟做完）

1. 新建画板 375×667（Mobile）
2. 画矩形 335×120，命名 Card，放入画板
3. 选中 Card → 约束：Left & Right + Top
4. 拖动画板宽度到 1440 → Card 自动变宽，左右各留20边距 ✅

---