Figma 平台接入说明

本文介绍如何在 VectoUI Unity 插件中接入 Figma 账号, 并配置 Figma Token 与 Team ID.

接入前准备

在开始配置前, 请确认:

Unity 项目中已安装 VectoUI 插件
当前 Figma 账号可以访问目标团队、项目和设计稿
目标设计稿位于团队项目中, 方便插件通过 Team ID 加载项目与文件

账号设置

(1) 切换数据源

打开 Unity 菜单中的 VectoUI 设置窗口, 进入 设置/账号 页面.

在 数据源 下拉选项中选择 Figma.

选择后, 页面会切换为 Figma 账号配置项, 需要依次配置:

Figma Token
Figma Team IDs

(2) 配置 Figma Token

Figma Token

Figma Token 为 Figma 账号的 Personal Access Token, 用于授权插件读取 Figma 团队、项目和设计稿数据.

可在 Figma 的账号设置页面创建 Personal Access Token.

创建 Token 时, 请确保包含以下权限:

current_user:read
file_content:read
projects:read
library_content:read

天数选择项目开发合适的周期即可.

注意: Access Token 生成后只有一次展示机会, 请妥善保存生成的 Token 的内容

创建完成后, 回到插件的 设置/账号 页面, 将 Token 填入 Figma Token 输入框, 并点击 Set 保存.

若 Token 保存成功, 输入框右侧会显示勾选状态.

(3) 配置 Figma Team ID

Team ID

Figma API 无法稳定自动获取个人账号下的团队列表, 因此需要手动配置 Team ID.

可通过 Figma 网页版团队地址获取 Team ID.

进入目标团队后, 复制浏览器地址栏中的 URL, 格式通常如下:

自动从 URL 输入

选中浏览器上的地址, 复制地址. 然后再 VectoUI 的版本中点击 从 URL 解析, 可以直接识别.

点击 Add Team 后, 该团队会出现在 Configured Teams 列表中.

手动输入

如果 URL 无法被解析, 也可以手动输入

https://www.figma.com/files/team/1234567890123456789/TeamName

其中 1234567890123456789 就是该团队的 Team ID.

在插件 Figma Team IDs 区域中, 填入:

Team ID: 从 URL 中复制出的数字 ID
Team Name: 便于识别的团队名称

点击 Add Team 后, 该团队会出现在 Configured Teams 列表中.

生成 UI 组件

成功配置 Figma Token 和至少一个 Team ID 后, 即可回到 VectoUI 转换窗口刷新团队.

插件会按以下顺序加载 Figma 数据:

根据已配置的 Team ID 获取团队项目
选择项目后获取项目下的 Figma 文件
选择目标设计稿后生成对应的 UI 组件

找到想要生成的 Figma 设计稿后, 点击 生成 Prefab 即可生成对应的 Unity UI 组件.

常见问题

Token 无法使用

请检查 Figma Token 是否仍然有效, 并确认创建 Token 时已包含:

file_content:read
projects:read
current_user:read

如果 Token 已被删除、过期或权限不足, 请在 Figma 账号设置中重新创建 Token, 并回到插件中重新点击 Set 保存.

团队或项目为空

请确认:

Team ID 是否来自目标团队 URL
当前 Figma 账号是否已经加入该团队
Token 对应的账号是否有权限访问该团队下的项目和文件

若团队 URL 复制错误, 可重新复制 Figma 网页版团队地址, 再使用 Parse from URL 或手动填写.

设计稿无法生成

请确认目标文件可以在 Figma 网页版中正常打开, 且当前 Token 对应账号拥有访问权限.

如果插件提示 Figma 请求失败, 可根据提示中的 HTTP 状态或 Figma 返回信息判断:

401: Token 无效或未被 Figma 接受
403: Token 可用, 但账号无权访问该团队、项目或文件
404: 当前 Token 无法找到该文件
429: Figma 接口请求频率受限, 可稍后重试

以上