要約: 3ステップ

Figma から Cocos Creator へ は、レイヤー付きの .fig UI や HUD を、デザイン稿から Prefab にして Cocos Creator 3.x に読み込みたい場合に向いています。VberAI 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 が強調表示されている

ステップ 2: VberAI Studio で Import Project

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

VberAI Studio の Recent Projects で Import Project が強調表示されている

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

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

Main Screen を選択し、Export to cocosCreator3.x が強調表示されている

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

ビルドした Cocos Creator の Main Screen のローカルウェブプレビュー

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

書き出した Assets。Prefabs と Textures がある

2026年9月の最新操作手順

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