Figma 学习笔记 – Constraints 约束

用途

Constraints 用于 responsive design, 子元素和父元素建立约束关系后, 当父元素 dimension 变换的时候, 子元素会做出相应的变化 (移动位置或 resize dimension)

例子

约束有份左右和上下, 概念是一样的，只是方向不同而已, 所以这里我指说其中一边.

默认的约束时 Left, Top

Left

当约束 Left 时, 意味着子元素的 Left 始终保持和父元素的距离.

所以当拉动父元素左边时, 子元素也一起移动了.

而当拉动父元素右边时, 子元素则没有任何反应 (因为右边没有被约束)

Right

和 Left 相反, 右边被固定了

Left and Right

当 2 边都被约束以后, 子元素的 width 就会被强行改变, 以确保左右始终和父元素保持固定的距离

Center

center 约束的是中心点, 所以当拉动父元素左边或右边时, 子元素都会移动, 因为它要确保中心点失踪一致.

Scale

Scale 和 Left and Right 的区别

上方是 left and right, 下方是 scale

虽然 2 方的子元素都被 resize 了, 但是结果还是差很多的,

left and right 的关键是约束左右的距离

而 scale 是和父元素对等比例一起长大.