Design Handoff 聚焦设计到开发的交接流程,核心是一份 Handoff Checklist,明确开发者需要与不需要的内容。
用途:规范设计交付,减少沟通成本,让设计稿能顺利落地为代码。
主要能力:
- 交接清单:要求所有状态设计完整(默认、悬停、聚焦、禁用、加载、错误、空状态);指定响应式行为(移动、平板、桌面);间距使用 token 而非任意像素;排版规格(字体、字号、字重、行高、颜色);颜色优先用 token 名称而非十六进制;动画规格(时长、缓动、属性);边界情况(长文本、无数据、大量条目、错误恢复);无障碍说明(焦点顺序、ARIA 标签、键盘行为)。
- 明确开发者不需要的内容:每个状态组合的像素级完美稿、详细标注线(现代工具已提供检查)、无人阅读的 50 页规格文档。
- 协作模型:尽早引入开发者,在设计阶段做可行性检查;复杂交互结对完成;在浏览器中做设计评审,最终 QA 在实际实现而非 Figma 中;使用设计系统 token 名称作为共同语言;小 PR、快速设计评审、快速迭代。
使用方式:按清单逐项检查设计交付物,与开发者结对处理复杂交互,在真实实现中验收。
适用场景:设计系统团队、产品设计到前端开发的交接、跨职能协作。
限制:资料未提供具体工具集成、安装命令、收费或平台信息。