# Figma から Unity へ

ローカルの .fig を保存し、VberAI Studio に読み込み、自動レイヤー分割を実行してから Unity に書き出します。

## 要約: 6ステップ

**Figma から Unity へ** は、レイヤー付きの `.fig` UI や HUD を Unity に読み込みたい場合に向いています。[VberAI Studio](https://vberai.com/studio) が **Import Project（プロジェクトを読み込む）** でファイルを読み込み、[自動レイヤー分割](/docs/sprite/auto-layering-image-to-layers/) が検出したエッジから名前の付いたパーツを切り出します。**Export to Unity（Unity に書き出す）** で、それらのパーツをエンジンに書き出します。

レイヤー付き Photoshop ファイルの場合は：[PSD から Unity へ](/docs/convert/psd-to-unity/)。

## ステップ 1: ローカルの `.fig` を保存

Figma で画面を開き、**File（ファイル）→ Save Local Copy（ローカルコピーを保存）** を使います。名前の付いたグループ（フレーム、ボタン、HUD バー）は、VberAI Studio まで引き継がれます。

![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: 自動レイヤー分割

ボードを選びます（例：**cat_journey_UI**）。選択ツールバーの、重なりレイヤーの操作を開き、**Auto-Layering（自動レイヤー分割）** を選びます。

![重なりレイヤーのメニュー。Auto-Layering と Layer Split がある](/images/auto-layering/step1_auto_layering_.webp)

**Run AI auto-layering?（AI 自動レイヤー分割を実行しますか？）** を確認し、**Start layering（レイヤー分割を開始）** を押します。

![確認ダイアログ：Run AI auto-layering、Start layering](/images/auto-layering/step2_confirm_debit_payment_.webp)

名前の付いた範囲が画面に載ります。切り出した、名前の付いた画像の準備ができます。詳しい手順は [自動レイヤー分割：画像を複数レイヤーに](/docs/sprite/auto-layering-image-to-layers/) にあります。

![Cat Journey の UI に、名前の付いた範囲が載った自動レイヤー分割の結果](/images/auto-layering/step3_ai_output_.webp)

## ステップ 4: Unity に書き出す

レイヤー分割後のボードを選んだままにします（ここでは **cat_journey_UI_layer**）。**Export（書き出し）** を開き、**Export to Unity（Unity に書き出す）** を選びます。

![Export メニューで Export to Unity が強調表示されている](/images/figma-to-unity/step_3_export_to_Unity_.webp)

## ステップ 5: Unity の書き出し形式を選ぶ

ダイアログでは **Target engine（対象エンジン）** が Unity になります。形式は Prefab（`.prefab`）にできます。**Export to（書き出し先）** は ZIP アーカイブ、または対象プロジェクトへの直接書き出しです。**Default paths（デフォルトパス）** はエンジンの既定ディレクトリを使います。

![Unity の書き出しダイアログ：Prefab 形式と ZIP アーカイブ](/images/figma-to-unity/step_4_export_settings_.webp)

## ステップ 6: 出力を確認する

今回は ZIP アーカイブで書き出しました。解凍するとルートは `Assets` です。`Prefabs` には Unity の `.prefab`（シーンに置ける組み立て済み UI）が入り、`Textures` にはレイヤー名に沿った切り出し PNG が入ります。

![解凍した Assets フォルダ。Prefabs と Textures がある](/images/figma-to-unity/step_5_check_output_.webp)