# Designer Figma 绑定漂移反馈单

> **Status**: 2026-05-19 plan owner 从 `audit:component-attributes` baseline 抽取
> **Owner**: 设计师（user = Nancy）
> **作用**: 列出 code selector 名字与 Figma 当前绑定**语义不齐**的位置——code 已用正确 selector（如 `.select-wrap--error`、`.dropdown-item__check--checked`），但 Figma 在对应 component variant 内**没把状态色绑过来**。属于设计师在 Figma 真源端漏标 / 漂移。

---

## 1. 为什么这些 finding 不在 code 端 fix

[`audit:component-attributes`](../../figma-sync/audit-component-attributes.mjs) 跑出 462 条 non-equivalent。plan owner 做了轴级 cleavage 分析（见 2026-05-19 session）后发现两个 (selector, property) group 命中**Figma 漂移**模式：

- code selector 名字明确表达状态（`--error` / `--checked`）
- code 引用了对应的 status token（`--red` / `--brand` / `--brand-match`）
- **但 Figma 在对应 variant 实际绑的是普通 grey** —— 跟 selector 含义不一致

这种情况下 code 端是对的（按设计意图 selector 含义引用 status token）；Figma 端的绑定是 designer 当时漏点 status variable 导致的漂移。**修法是设计师在 Figma 端重绑**，不是 code 改 selector / 改 token。

---

## 2. 两个 drift 位置

### Drift 1 — `.select-wrap--error .select-trigger` border-color（28 条 finding）

| Component | code 当前 | Figma 当前绑 | 应该绑 |
|---|---|---|---|
| select box/filled · error 变体 | `border-color: var(--red)` | `--color-grey-8` (dark) / `--color-grey-5` (light) | `--red` (dark/light Figma `Red/Default` 对应 token) |
| select box/line · error 变体 | 同上 | 同上 | 同上 |

**情况**：select box 有 status=error 变体。Figma 内 status=error variant 的 trigger（输入框边框）应该用红色（错误状态视觉提示），但当前 variant 绑的是 grey-5/grey-8（跟普通 default 状态一样）。

**人工验证**：打开 Figma `select box/filled` 和 `select box/line` 的 `status=error` variant，看 trigger border 颜色 picker：
- 如果设计意图就是普通 grey（即 status=error 只改图标 / 文案，不改 border）→ **接受 drift**，code 应改成 `var(--color-grey-X)` 配合
- 如果设计意图就是该红色（status 名字暗示）→ **改 Figma**：把 trigger border 改用 `UX/Red/Default` 绑定

预期：是设计师漏标，应该红。

### Drift 2 — `.dropdown-item__check--checked` border-color（28 条 finding）

| Component | code 当前 | Figma 当前绑 | 应该绑 |
|---|---|---|---|
| Drop down List/Item · checked 变体（border 部分）| `border-color: var(--brand)` | `--color-grey-8` (dark) / `--color-grey-5` (light) | `--brand-match` 或 `--brand` |

**情况**：dropdown item 的 checked indicator（多选时打勾的方框边框）。当前 Figma 绑普通 grey；code 用 brand（突显选中状态）。

注：plan owner 同时发现 `.dropdown-item__check--checked` background 应改为 `--brand-match`（44 条，独立 P2.2 prompt 处理）。这里说的是 **border**（28 条），跟 background 是不同 finding group。

**人工验证**：打开 Figma `Drop down List/Item` 的 `Checked=Yes` variant，看 check indicator 的 border 颜色 picker：
- 如果是 grey（说明 Figma 设计 checked 状态用 grey border + brand-match background 组合的弱化视觉）→ **接受 drift**，code 改成 grey
- 如果应该是 brand（强调 selected）→ **改 Figma**：绑 `UX/Brand/Brand` 或 `UX/Brand/Match,Hover`

预期：设计师当时给 indicator background 绑了 brand-match 但忘了同步 border。

---

## 3. 设计师 review 步骤

每个 drift 请按下面 3 步处理：

1. **打开对应 Figma component variant**（链接见下表，nodeId 可从 `figma-data/normalized/components-tokenized/*.json` 查）
2. **对照右侧 Color picker**：drift 1 看 trigger border 当前绑的 Variable；drift 2 看 check indicator border 当前绑的 Variable
3. **拍板**：
   - **改 Figma** → 把 Variable 改成对应的 status token (`UX/Red/Default` 或 `UX/Brand/*`)，运行 `pnpm sync:figma-library`，audit 该 group 自动消化
   - **接受 drift** → 在 `src/design-system/translation/divergences-decisions.json` 加一条决议登记，audit allowlist 跳过

| Drift | Figma component | 推荐 |
|---|---|---|
| 1 (28 条) | select box/filled + select box/line 的 status=error variants | 改 Figma：trigger border → `UX/Red/Default` |
| 2 (28 条) | Drop down List/Item 的 Checked=Yes variants | 改 Figma：check indicator border → `UX/Brand/Brand` 或 `Match,Hover` |

## 4. 完成后

如果选了"改 Figma"路径：
1. 跑 `pnpm sync:figma-library` 拉新 figma-data
2. 跑 `pnpm audit:component-attributes` 验证两 drift group 消化
3. 在 `docs/internal/retrospection/<date>-figma-drift-fix.md` 写一笔（drift 来源 + 设计师拍板 + 实证）

如果选了"接受 drift"路径：
1. 在 `divergences-decisions.json` 加 entry，type 设为 `component-internal-override`
2. plan owner 把 code 改成跟 Figma 当前 binding 对齐（这一步是 executor 工作，单独 prompt）
3. audit 重跑确认 allowlisted

---

**这份 doc 不进 prepublishOnly gate**——它是设计师 review 列表，纯人工拍板。完成后用户在仓库 commit message 记一笔即可（drift 1/2 closed via Figma rebind / divergence-decision）。