风起

Figma画布协议揭秘：AutoLayout

本文介绍我们如何将 Figma 的 AutoLayout（自动布局）协议映射到CSS属性。如果你熟悉 CSS Flexbox，理解起来会非常轻松。

Figma中的AutoLayout效果

核心概念：容器与子项

在 Figma 的世界里，布局主要由两个部分组成：

1. 容器 (Frame): 决定内部元素怎么排（横着排、竖着排、间距多少）。
2. 子项 (Children): 决定自己怎么适应容器（固定大小、跟随拉伸、还是绝对定位）。

---

1. 容器属性

这就好比 CSS 中的 display: flex 容器。

布局方向 (stackMode)

决定子元素是水平排列还是垂直排列。

• HORIZONTAL: 水平排列 (CSS: flex-direction: row)
• VERTICAL: 垂直排列 (CSS: flex-direction: column)
• NONE: 普通 Frame，不启用自动布局 (CSS: display: block / position: relative)

间距与边距

• 间距 (stackSpacing): 元素之间的距离 (CSS: gap)。
• 内边距 (padding): 容器边缘到内容的距离 (CSS: padding)。
  • 协议中包含 Left, Right, Top, Bottom 四个方向。

对齐方式 (AlignItems)

决定子元素在容器里靠左、居中还是靠右。

• 主轴对齐 (stackPrimaryAlignItems): 顺着排列方向怎么对齐 (CSS: justify-content)。
  • 例如：MIN (起点), CENTER (居中), MAX (终点), SPACE_BETWEEN (两端对齐)。
• 交叉轴对齐 (stackCounterAlignItems): 垂直于排列方向怎么对齐 (CSS: align-items)。

尺寸策略 (Sizing)

决定容器自身的宽或高怎么算。

• FIXED: 固定宽高，写死多少就是多少 (CSS: width: 100px)。
• HUG_CONTENTS: 包裹内容，内容多大我就多大 (CSS: width: max-content)。
• RESIZE_TO_FIT...: 充满父容器 (CSS: width: 100% 或 flex: 1)。

换行 (stackWrap)

• NO_WRAP: 不换行，一行排不下就溢出 (CSS: flex-wrap: nowrap)。
• WRAP: 自动换行 (CSS: flex-wrap: wrap)。

---

2. 子项属性

子项决定了自己在容器里的“个别行为”。

定位方式 (stackPositioning)

• AUTO: 听话的流式元素，跟着大家排队 (CSS: position: static)。
• ABSOLUTE: 绝对定位，不占位，自由飞翔 (CSS: position: absolute)。

流式子项：如何适应空间

当 stackPositioning = AUTO 时：

• 填充 (stackChildPrimaryGrow):
  • 如果是 1，代表“充满剩余空间” (CSS: flex-grow: 1)。
  • 如果是 0，代表“保持原样” (CSS: flex-grow: 0)。
• 自身对齐 (stackChildAlignSelf):
  • 可以覆盖父容器的对齐设置。例如大家都居中，唯独我要靠底 (CSS: align-self)。

绝对定位子项：约束 (Constraints)

当 stackPositioning = ABSOLUTE 时，我们需要知道它怎么“钉”在父容器上。

• 水平约束 (horizontalConstraint):
  • MIN: 钉在左边 (Left)。
  • MAX: 钉在右边 (Right)。
  • STRETCH: 左右拉伸 (Left & Right)。
  • CENTER: 居中 (Center)。
  • SCALE: 按比例缩放 (Scale)。
• 垂直约束 (verticalConstraint): 同理，对应 Top, Bottom, Center, Scale。

---

3. 速查表：Figma vs CSS

协议字段 (Figma)	CSS 概念	通俗解释
stackMode	flex-direction	横排还是竖排
stackSpacing	gap	元素中间的缝隙
stackPrimaryAlignItems	justify-content	主轴方向靠哪边
stackCounterAlignItems	align-items	侧轴方向靠哪边
stackPrimarySizing	width/height	容器尺寸怎么算
stackWrap	flex-wrap	满了换不换行
stackChildPrimaryGrow	flex-grow	子元素要不要撑满空地
stackPositioning: ABSOLUTE	position: absolute	绝对定位，不占位
Constraints	top/left/right/bottom	绝对定位时钉在哪里

总结

这套协议本质上就是 Flexbox 的子集 + 绝对定位系统。

• 容器协议 描述了“排队规则”。
• 子项协议 描述了“插队规则”和“占位规则”。

理解了这一点，你就能明白为什么我们在引擎里使用 Yoga Layout（一个实现了 Flexbox 的布局引擎）来还原 Figma 的设计了。