接入配置
Unity 侧接入路径
Unity 插件接入、Figma 配置、Prefab 生成与进阶使用相关文档。
Figma 到 Unity 的 UI 自动化流程
Figma 设计稿准备
设计师在 Figma 中完成 UI 页面、图层、组件和资源整理。
01
研发在 Unity 中选择设计稿
研发同学打开 Unity 中的 VectoUI 插件，在插件内选择需要生成的 Figma 设计稿。
02
点击生成 Prefab
选择目标设计稿后，点击生成，VectoUI 将 Figma 设计稿转换为 Unity 可用的 UI Prefab。
03
自动生成层级与资源引用
VectoUI 生成 UI Prefab 层级结构，并下载、导入和引用相关图片资源与字体信息。
04
手工还原 Figma UI vs 自动生成 Unity Prefab
传统流程依赖研发根据 Figma 设计稿在 Unity 中手动还原界面；VectoUI 将 Figma 设计稿转换为 Unity UI Prefab，减少层级搭建、资源处理和反复对齐。
VS
传统 Figma 到 Unity 流程
手工还原
- 设计完成后，需要整理导出资源、标注和效果参考
- 研发根据 Figma 页面在 Unity 中手动创建 UI 层级
- 逐个导入图片资源，并手动拖拽到对应节点
- 反复调整坐标、尺寸、锚点、层级和显示效果
- 设计稿变更后，相关节点和资源需要再次手动同步
VectoUI 自动化生成流程
自动生成
- 研发在 Unity 的 VectoUI 插件中选择对应 Figma 设计稿
- 点击生成，自动创建 Unity UI Prefab 层级结构
- 相关图片资源自动下载、导入并建立引用
- 字体等界面资源信息随生成流程进入 Unity 工程
- 研发基于生成结果继续绑定组件、脚本和业务逻辑
Figma 到 Unity Prefab 的核心自动化能力
VectoUI 将 Figma 设计稿转换为 Unity 可用的 UI Prefab，并围绕层级生成、资源引用、布局转换和后处理接口，减少重复还原工作。
正式版
生成 UI 层级结构
根据 Figma 设计稿中的图层关系、节点位置和尺寸，在 Unity 中生成可继续编辑的 UI Prefab 层级。
正式版
图片资源自动下载与引用
将 Figma 设计稿关联的图片资源写入 Unity 工程，并建立节点引用关系，减少手动导入和拖拽。
正式版
布局与基础样式转换
将坐标、尺寸、锚点、层级、字体等界面结构信息转换为 Unity UI 可使用的数据。
可扩展
后处理接口扩展自动化
团队可以基于 VectoUI 后处理接口，继续实现组件绑定、命名规范、脚本引用等自动化操作，进一步完善生成后的 UI Prefab。
示例视频
Unity 中的 VectoUI Figma UI 自动化演示
Figma 设计稿选择、UI Prefab 层级生成、图片资源下载与引用的完整示例。
Unity 插件界面
UI Prefab 层级
图片资源引用
文档路线
Figma 到 Unity 的接入文档指南
文档内容包括 Unity 插件包导入、Figma 配置文档、高级使用规范，以及 Photoshop / Sketch 美术制作规范。
3 篇文档
美术规范
设计稿制作规范
适合负责 PS / Sketch 设计稿整理、上传蓝湖和资源交付的同学。
文档路线包含 Unity 接入配置、Figma 配置、高级使用规范与美术制作规范两部分内容。
Figma 到 Unity 常见问题
可以。VectoUI 的 Figma 到 Unity 是正式支持的 UI 自动化工作流，可以将 Figma 设计稿转换为 Unity 可用的 UI Prefab。
需要在 VectoUI Unity 插件中配置 Figma Token 和 Team ID，用于读取可访问的 Figma 团队、项目和设计稿数据。
生成结果包含 UI 层级、节点位置、图片资源引用、字体等界面结构与资源信息。
需要。VectoUI 负责 UI Prefab 结构和资源生成，研发主要负责业务逻辑接入。项目内重复性的补充生成或规则处理，可以通过后处理接口扩展。
核心区别是确定性和效率。VectoUI 通过自动化流程生成 Prefab，减少手工搭建层级、拖拽资源、界面对齐带来的重复工作和结果波动。
接入内容以文档为准，包括 Unity 插件包导入、Figma 配置文档、高级使用规范，以及 Photoshop / Sketch 美术制作规范。