# Figma から Godot へ

ローカルの .fig を保存し、Import Project で VberAI Studio に読み込み、Godot シーンとして書き出します。

## 要約: 3ステップ

**Figma から Godot へ** は、レイヤー付きの `.fig` UI や HUD を、Godot のシーンとして読み込みたい場合に向いています。[VberAI Studio](https://vberai.com/studio) がファイルを読み込み、**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（プロジェクトを読み込む）** を選び、`.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（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>