DoomUI
DoomUI 是一套连接 Figma 与 Cocos Creator 3.8.6 的开源 UI 工具链。设计师在 Figma 中调整界面，手动推送所选设计；程序员在 Cocos 中预览变更，确认后生成或更新 Prefab，让设计迭代进入游戏工程。
项目由我开发，源码采用 MIT 许可证开放。
两个插件，一条工作流
DoomUI 由两个配套插件组成，需要在同一台电脑上运行：
| 插件 | 运行环境 | 主要用途 |
|---|---|---|
| Cocos Sync | Figma Desktop | 推送所选 Frame / Component，导入现有 Cocos Prefab 与共享素材 |
| Figma Sync | Cocos Creator 3.8.6 | 接收设计、预览差异、应用变更，生成 Prefab 和贴图 |
日常操作分为四步：
- 在 Cocos 中打开「扩展 → DoomUI → Figma Sync」，与 Figma Desktop 中的 Cocos Sync 配对。
- 在 Figma 画布中明确选择一个或多个 Frame，或 Page 直属的 Component，手动推送到 Cocos。
- 在 Cocos 的 Preview 中检查差异、警告和阻断项。
- 确认后执行 Apply，写入视觉 Prefab 及所需资源。
设计与程序如何协作
视觉和逻辑分开维护。 首次同步创建视觉 Prefab 与逻辑 Prefab，程序员在逻辑 Prefab 中维护业务脚本和交互。之后的同步只更新插件拥有的视觉 Prefab 与依赖资源，保留程序逻辑。
从已有界面开始。 可以把现有 Cocos View / Item Prefab 一次性导入 Figma，建立设计起点。后续迭代统一从 Figma 推送到 Cocos。
复用共享素材。 没有关联 Prefab 的 SpriteFrame 也能导入 Figma 的 Shared Assets Catalog。设计师使用这些素材搭建界面，回传时插件会校验来源，条件满足时直接复用 Cocos 中的原始资源。
尽量保留可编辑语义。 文字、图片、组件实例、按钮状态和九宫格按制作规范转换；布局与约束在支持的范围内映射为 Cocos 组件，复杂视觉效果可能转为 PNG。具体规则见 Figma UI 制作规范。
在本机传输。 所选设计与所需图片通过配对连接传给同机 Cocos 扩展，插件不向公网服务器上传设计内容，也不包含分析或广告服务。
获取与安装
- GitHub 开源仓库：源码、安装说明、最小验收工程与完整文档。
- Figma Community · Cocos Sync：Figma 端插件。
- Cocos Store · Figma Sync：Creator 端插件。
截至 2026 年 10 月 17 日，两个插件的首次发布申请均已提交审核，尚未公开上架；审核期间可按 开发指南从源码安装。
当前面向 macOS + Figma Desktop + Cocos Creator 3.8.6。源码安装还需要 Node.js 18+，推荐使用 just 运行仓库命令：
git clone https://github.com/zrong/doomui.git
cd doomui
just install
just check
just sandbox-link
然后用 Creator 打开仓库中的 figma-ui-sync-sandbox/，在 Figma Desktop 中通过「Plugins → Development → Import plugin from manifest…」导入 cocos-sync/manifest.json，按开发指南完成配对与首次同步。
使用范围
DoomUI 使用手动推送，不自动监听设计修改，也不会自动执行 Apply。现有 Prefab 导入 Figma 是一次性的设计接管，后续保持 Figma → Cocos 单向同步；不支持两端修改的自动合并，也不直接处理 PSD。
Toggle、ScrollView、ProgressBar、RichText 等业务组件目前没有专用转换，需由程序员在逻辑层维护。Figma 网页版、Windows 和其他 Creator 小版本尚不属于当前完成验收的宿主组合。完整限制与运行态验证情况见 验收记录。