Figma 学习笔记 – Auto Layout

用途

Auto Layout 有点像 CSS 的 Flex, 它还带有 responsive 的概念.使用它以后可以替代掉不少 constraints 的写法.

 

用法

一个 parent 抱着多个 children

设置横向或纵向 (只能一个方向)

 设置 children 之间的 gap 

设置 parent 的 padding

 

设置 children 的 alignment

 

父元素的 Resizing

父元素的 dimension 有 2 个选择, 

Hug contents 表示依据子元素的内容决定 dimension 

Fixed Width/Height 表示固定一个 dimension.

 

子元素的 Resizing

子元素的 dimension 也有 2 个选择

Fill Container 就是尽可能和父元素一样大 

Fixed Width/Height 就是固定一个 dimension 

 

当 Parent Hug Contents 遇上 Child Fill Container

显然这是一个不太逻辑的设置, Figma 会自动替换来规避这种不逻辑的操作

但是有一种情况是被允许的

这里有 3 个 Layer, ancestor, parent, child

ancestor hug contents 

parent fill container

child fixed width

这种情况下, 虽然 ancestor 的 hug contents 和 parent 的 fill container 本来是冲突的, 但有了 child 就成立了.

它就会形成上面这种效果了.

有 1 个点需要注意 : parent 必须也设置成 Auto Layout 哦