Figma

先分清四个概念

Figma 里最贵的错误是把所有东西都画成碎片再靠对齐硬凑。上手前先认清这几层：

Frame 和普通矩形最大的区别是：Frame 有独立画布，可以在里面锁定滚动、独立裁切。这是做多状态界面的基础。

画布操作

属性栏右边的布局下拉决定子元素的排列方式：自由定位、水平、垂直、网格。选自动布局后可以调 Gap（间距）、Padding（内边距）、Primary axis align、Counter axis align。能自动布局就别用绝对定位——布局一变，约束再好也要逐个微调。

Auto layout 与Constraints 的分工

两者常被搞混，但用途完全不同：

• Auto layout 管容器内部的子元素排列，父容器尺寸变了它自己会重排。
• Constraints（属性栏最下方那排 Left / Center / Right / Scale）管子元素在父容器里怎么跟随变化，父容器变了它按左右、上下或等比缩放贴边。

一套可维护的规则：选「哪个框会先改变尺寸」，让它的子元素用自动布局；其余层级的对齐关系用约束补齐。两者混用且父子都有约束，是布局「跳一下才对」的典型原因。

组件与变体

把一个 Frame 转成组件：选中 → 属性栏左上角 Combine as variants（一组变体）或 Create component（单个）。变体适合「同一个组件的多种状态或尺寸」，比如按钮的 default / hover / disabled，属性栏里用属性图标切换实例的属性。

改主组件，所有实例跟着变；只改一个实例，会自动 Detach 出一份独立副本。Detach 是设计系统的裂缝——detach 过的实例此后不再跟随主组件更新，交付前应当搜一遍有没有意外的 detach。

原型与交付

在顶部的 Prototype 标签里设置连线：从一个 Frame 拉一条线到另一个，选触发方式 On click / On hover / While pressing，动作多为 Navigate to / Open overlay。演示时点右上角 Present。

交付前的检查清单：

• 用 Ctrl + Alt + G 之类？没有这条命令，实际是点属性栏的 Export 选 Local file 导出 .fig，或 Publish 到团队项目。
• 设 File → Save local copy 保留一份本地可编辑副本，不依赖云端。
• 交付前跑一次 Design check（Shift + D）看有没有间距、字号不一致的硬伤。