要約: 3ステップ

Figma から Cocos Creator へ は、レイヤー付きの .fig UI や HUD を、Cocos Creator のシーンとして読み込みたい場合に向いています。VberAI Studio がファイルを読み込み、Cocos Creator 3.x に書き出します。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 のローカルウェブプレビュー

手順動画

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