# Figma to Cocos Creator: design to Prefab

Import a layered Figma file into VberAI Studio, export it as a Prefab to Cocos Creator 3.x, then build and preview in a local web page.

## TL;DR: 3 steps

**Figma to Cocos Creator** fits a layered `.fig` UI or HUD that needs to land in Cocos Creator 3.x as a Prefab. [VberAI Studio](https://vberai.com/studio) imports the file, then exports to **Cocos Creator 3.x**. The output sits under `Assets`: `Prefabs` for the assembled UI, `Textures` for the named cut images. Cursor or Codex fills in the UI logic. **Build** in Cocos Creator; preview opens as a local web page.

## Step 1: Save a local `.fig`

In Figma, open the screen and use **File → Save Local Copy**.

![Pixel-art game UI in Figma: File menu with Save Local Copy highlighted](/images/figma-to-cocos-creator/figma_to_cocos_studio_step1_fig_file_.webp)

## Step 2: Import Project in Studio

On the Studio projects page, choose **Import Project** and select the `.fig` file.

![Studio Recent Projects with Import Project highlighted](/images/figma-to-cocos-creator/figma_to_cocos_studio_step2_import_project_.webp)

## Step 3: Export and preview

Select the screen (for example **Main Screen**). Open **Export** and choose **Export to cocosCreator3.x**.

![Main Screen selected and Export to cocosCreator3.x highlighted](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste3_export_to_cocoscreator_3_.webp)

Wire the UI logic in Cursor or Codex. In Cocos Creator, **Build** the project; preview opens in a local web page.

![Local web preview of the built Cocos Creator Main Screen](/images/figma-to-cocos-creator/figma_to_cocos_studio_ste4_cocos_preview_.webp)

The export lands under `Assets`: `Prefabs` holds the Cocos Creator Prefab (assembled UI you can drop into a scene); `Textures` holds the sliced PNGs, named from the layers.

![Exported Assets folder with Prefabs and Textures](/images/figma-to-unity/step_5_check_output_.webp)

## Latest walkthrough, September 2026

Step-by-step pass from Figma through Studio into Cocos Creator:

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