# Figma 到 Godot

保存本地 .fig，用 Import Project 导入 VberAI Studio，再导出成 Godot 场景。

## 先说结论：3个步骤

**Figma 到 Godot** 的主要逻辑是：针对已经分层的 `.fig` 文件 UI / HUD，要批量化处理好美术素材后，导入到 Godot 中作为场景使用。[VberAI Studio](https://vberai.com/studio) 用 **Import Project（导入项目）** 导入这份文件，再导出到 **Godot**。导出得到 `.tscn`；默认路径按 Godot 的 `Assets` 目录来写。

已经是分层的 Photoshop 文件：[PSD 到 Godot](/docs/convert/psd-to-godot/)。

## 步骤 1：存一份本地 `.fig`

在 Figma 中打开菜单：**File（文件）→ Save Local Copy（保存本地备份）**。已经命名的编组（画框、按钮、HUD 条）会带到 VberAI Studio，并进到 Godot 的节点树里。

![Figma 像素风游戏 UI：File 菜单高亮 Save Local Copy](/images/figma-to-godot/figma_to_godot_step1_save_local_copy_.webp)

## 步骤 2：在 VberAI Studio 里 Import Project

在 VberAI Studio 的项目页，选 **Import Project（导入项目）**，选择刚刚导出的 Figma 的 `.fig` 文件。

![VberAI Studio Recent Projects，高亮 Import Project](/images/figma-to-godot/figma_to_godot_step2_import_project_.webp)

## 步骤 3：导出到 Godot

选中这一屏（例如 **Main Screen**）。打开 **Export**，选 **Export to Godot**。

![已选中 Main Screen，高亮 Export to Godot](/images/figma-to-godot/figma_to_godot_step3_export_into_godot_.webp)

对话框里把格式设成 Scene（`.tscn`）。**Default paths** 会去项目里找 `Assets` 文件夹，并按这套目录写文件。

![Godot 导出对话框：Scene .tscn 与默认资源路径](/images/figma-to-godot/figma_to_godot_step4_export_config_.webp)

## 演示视频

Figma **Import Project**，再导出到 Godot：

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/gySFjmNcec4"
      title="经 Import Project，从 Figma 到 Godot"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>