设计交付给开发者
消除“代码里看起来不一样”漂移的规格、令牌与评审闭环。
设计系统进阶
为什么
设计到代码的交付是 80% 视觉 bug 的源头：缺规格、间距模糊、未文档化状态（hover、focus、error）。结构化交付含令牌、红线规格和评审闭环，将实现轮次从 5 降到 2。
根据 2024 Spark 设计系统调查，78% 拥有设计系统的组织报告产品交付更快。JavaScript is used by 62% of developers per the Stack Overflow 2024 survey，与设计令牌对齐的组件库将交接时间缩短 60%。
何时使用
当设计与工程是不同人（或团队）时形式化交付。独立开发-设计师可跳过规格，但 2+ 人团队受益于定义的交付物。
如何做
1. 用 Figma Dev Mode — 检查面板显示 CSS、间距、令牌；无需手动红线
2. 定义状态 — 每个可交互组件的 default、hover、focus、active、disabled、error
3. 附着令牌 — Figma 变量通过 Tokens Studio 插件绑定到代码令牌
4. 导出资源 — 图标用 SVG（内联），照片用 WebP，栅格用 @2x/@3x
5. 写规格文档 — 组件名、解剖、状态、属性、宜/忌、用法示例
6. 评审闭环 — 开发实现，设计在 PR 或 staging 评审，带截图评论
7. 签收 — 设计在 Figma 评论线程批准，从 PR 链接
示例
# Button 规格 — 交付文档（Markdown）
## 解剖
[图标?] 标签 [徽章?]
## 状态（必须全部实现）
| 状态 | 背景 | 边框 | 阴影 |
|---------|--------------------|-----------|-----------------|
| default | --color-action-pri | 无 | --shadow-sm |
| hover | --color-action-hov | 无 | --shadow-md |
| focus | --color-action-pri | 2px 环 | 无 |
| disabled| --color-surface-3 | 无 | 无，opacity .5 |
## 属性
- variant: "primary" | "secondary" | "ghost"（默认 "primary"）
- size: "sm" | "md" | "lg"（默认 "md"）
- icon: ReactNode（可选，置于标签前）
- loading: boolean（显示 spinner，禁用点击）
## 宜
- 每视图最重要操作用 primary
- 图标 + 标签提升识别（如 [+] 添加）
## 忌
- primary 操作用 ghost — 读起来像不可交互
- 堆叠 3+ 个 primary — 视觉层级崩塌
## Figma
画板："Button v2.3" → https://figma.com/file/abc?node=42
常见问题
- ⚠忽视 Dev Mode — 开发从截图目测间距，12px 与 16px 搞错
- ⚠缺状态 — 设计只规格 default + hover，忘 focus-visible，a11y bug 上线
- ⚠资源格式错 — 图标用 PNG（无法重着色），照片用 JPG（无透明、更大）
- ⚠无评审闭环 — 设计在生产看到实现，太晚便宜修复
最佳实践
- ✓Dev Mode 作为唯一真源 — 无独立红线文档与 Figma 漂移
- ✓可交互组件规格全部 6 状态 — default/hover/focus/active/disabled/error
- ✓PR 描述中链接 Figma 画板 URL — 评审者一键打开精确规格
- ✓设计在 staging 评审，非生产 — 客户看到前发现
常见问题解答
Figma Dev Mode 和红线文档哪个更好？
Dev Mode——直接从设计显示实时 CSS、间距、令牌，规格不漂移。红线文档是独立产物，一周就过期。
可交互组件必须规格哪些状态？
全部六种：default、hover、focus、active、disabled、error。多数交付只规格 default + hover，focus-visible 和 disabled 作为 a11y bug 上线。
设计到代码评审闭环怎么做？
设计在 staging（非生产）评审实现，带截图评论，在 PR 链接的 Figma 评论线程签收。
交付图标用 SVG 还是 PNG？
SVG——可通过 currentColor 重着色、无损缩放、更小。PNG 是栅格、无法重着色、需 @2x/@3x 变体。仅照片用 PNG。
如何停止“代码里看起来不一样”漂移？
通过 Tokens Studio 将 Figma 变量绑定到代码令牌，Dev Mode 作唯一真源。无独立规格文档——几天就与 Figma 漂移。