Figma、布局约束与代码映射

先理解这个概念

设计工具中的 Auto Layout 表达内容驱动的方向、间距与伸缩，组件与变体表达复用，变量表达共享值。开发交接需要解释布局规则和状态，不是只交一组像素坐标。设计工具结构越接近实现意图，沟通成本越低。

设计稿描述的是约束和关系，截图只是某个尺寸与内容下的结果。自动布局与 CSS 布局并非逐属性一一对应，开发需要理解哪些尺寸由内容决定、哪些受容器限制、哪些必须保持。照着坐标绝对定位通常只能复现一张图。

记住这三个原则

1. 01

   明确容器是 Hug、Fill 还是固定尺寸。

2. 02

   组件命名与代码角色尽量对应。

3. 03

   交接包含响应式规则、边界内容、状态与资源。

实际设计时，分三步做

1. STEP 01

   读结构而非量坐标：识别父子关系、排列方向、对齐、间距和尺寸来源，标记固定、填充与内容自适应。

2. STEP 02

   把设计角色映射到现有组件和 Token，核对变体名称、字体与图标资源，明确哪些是示例内容而非规则。

3. STEP 03

   用长文本、空值和窄窗口比较实现与意图，补齐设计稿未展示的状态，再回到设计与开发共同确认。

一个容易理解的例子

交接的是行为和结构，而不只是一个瞬间的截图。

适用边界与取舍

像素一致适合检查局部细节，但不能凌驾于可伸缩和正确行为。必要差异应解释原因，不能把所有偏差都归咎于“浏览器不同”。