设计
准备给开发者可上手的设计交接
可实现的设计包:行为清楚、资产可复用、无障碍要求明确,并有共同消解歧义的路径。
流程
按这个顺序做。
- 与产品和工程确认已批准的用户流、范围、响应状态、组件清单、内容和验收标准。
- 清理并结构化设计文件:命名画板、组件、变体、令牌、图层和状态标记,区分终稿与探索稿。
- 规定布局行为、断点、间距、字体、颜色令牌、交互状态以及加载、空、错误、成功和权限状态。
- 标注无障碍要求,包括语义意图、阅读与焦点顺序、键盘行为、标签、播报、对比度和减少动态效果。
- 提供优化素材、内容来源、原型、相关设计系统链接和已知技术约束;避免不必要地重绘系统组件。
- 与工程师走读交接,把问题和决定记入同一记录,支持实现核对,并将成品对照验收标准。
先准备
猫会向你要的输入。
- 已批准设计文件与用户流
- 设计系统或令牌来源
- 技术约束与目标平台
- 工程负责人与验收标准
路由器 + 一份 playbook
先路由。只选一份。
Cat Paw 每次任务只加载一份 playbook,不合并多份。先走这个路由器;其余路径是此 workflow 可检查的候选。
- 路由器:
design-pack skills/design/ui-skills/create-design-md/SKILL.mdskills/design/ui-skills/baseline-ui/SKILL.md
界限
界限跟着提示一起走。
- 不要把探索画板当作已批准的实现目标。
- 使用令牌和源素材,而不是要求开发从像素取样。
- 把决定记入共享产物,以免口头澄清丢失。
完成代表
一个可核对的终点。
工程能识别每个所需状态、素材、令牌、行为和无障碍预期;未决问题有责任人;已实现构建已对照约定验收标准审阅。
来源
这个流程从哪来。
- www.figma.com/blog/the-designers-handbook-for-developer-handoff/
- help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode
- help.figma.com/hc/en-us/articles/35063862380311-Accessibility-at-Figma
来源确立 workflow 的模式。如有 Reddit 或社区帖子,视为实务轶事,不是普遍事实。