# Figma から Cocos Creator へ：デザイン稿を Prefab に

レイヤー付き Figma を VberAI Studio に読み込み、デザイン稿を Prefab として Cocos Creator 3.x に書き出し、ローカルのウェブページでビルドとプレビューまで進めます。

## 要約: 3ステップ

**Figma から Cocos Creator へ** は、レイヤー付きの `.fig` UI や HUD を、デザイン稿から Prefab にして Cocos Creator 3.x に読み込みたい場合に向いています。[VberAI Studio](https://vberai.com/studio) がファイルを読み込み、**Cocos Creator 3.x** に書き出します。書き出し先は `Assets` です。`Prefabs` に組み立て済みの UI、`Textures` にレイヤー名の切り出し画像が入ります。UI のロジックは Cursor または Codex でつなぎます。Cocos Creator で **Build（ビルド）** すると、プレビューはローカルのウェブページで開きます。

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

Figma で画面を開き、**File（ファイル）→ Save Local Copy（ローカルコピーを保存）** を使います。

![Figma のピクセルアートゲーム UI：File メニューで Save Local Copy が強調表示されている](/images/figma-to-cocos-creator/figma_to_cocos_studio_step1_fig_file_.webp)

## ステップ 2: VberAI Studio で Import Project

VberAI Studio のプロジェクトページで **Import Project（プロジェクトを読み込む）** を選び、`.fig` ファイルを指定します。

![VberAI Studio の Recent Projects で Import Project が強調表示されている](/images/figma-to-cocos-creator/figma_to_cocos_studio_step2_import_project_.webp)

## ステップ 3: 書き出してプレビューする

画面を選びます（例：**Main Screen**）。**Export（書き出し）** を開き、**Export to cocosCreator3.x（Cocos Creator 3.x に書き出す）** を選びます。

![Main Screen を選択し、Export to cocosCreator3.x が強調表示されている](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste3_export_to_cocoscreator_3_.webp)

UI のロジックは Cursor または Codex でつなぎます。Cocos Creator でプロジェクトを **Build（ビルド）** すると、プレビューはローカルのウェブページで開きます。

![ビルドした Cocos Creator の Main Screen のローカルウェブプレビュー](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste4_cocos_preview_.webp)

書き出し結果は `Assets` 配下に置きます。`Prefabs` には Cocos Creator で使える Prefab（シーンに置ける組み立て済み UI）が入り、`Textures` にはレイヤー名に沿った切り出し PNG が入ります。

![書き出した Assets。Prefabs と Textures がある](/images/figma-to-unity/step_5_check_output_.webp)

## 2026年9月の最新操作手順

Figma から VberAI Studio を経て Cocos Creator までの手順です。

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/_Yv-xl9EcNc"
      title="Figma から Cocos Creator への手順"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>