# 🖼 UI Builder

<a href="https://flow.letsterra.com/" class="button primary">Visit Website</a> <a href="https://cal.com/terra-demo/30min?overlayCalendar=true" class="button secondary">Schedule a demo</a>

UI Builder is a feature in Flow that eliminates the traditional friction between design and implementation. Instead of exporting assets, hand‑creating hierarchies, and re‑anchoring layouts, developers can paste a Figma share URL and within minutes receive a fully structured Unity Canvas with prefabs, anchors, and components. This saves hours of repetitive work and ensures design fidelity, making iteration cycles dramatically faster.

{% hint style="success" %}
**Powered by Hot Deploy:** Once generated, deploy your UI changes to 100% of players without them downloading an app update. Designer iterations reach everyone—including the  players who normally never update their apps.
{% endhint %}

### How UI Builder Works

{% stepper %}
{% step %}
**Enter Figma  URL**

Provide a Figma share URL in the Terra chat interface. The system validates the URL and prepares for processing.

<figure><img src="/files/GQMILuObWZvAshkIm0h1" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Let UI Builder parse your file**

Terra selects the UI Builder Assistant and begins automated conversion. The assistant executes a 12-step process including fetching nodes, detecting UI elements, generating spritesheets, and creating prefabs.

<figure><img src="/files/jmCamIkepOmVJ6Tlhbns" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Get completion confirmation & view the UI in Editor hierarchy**

Upon completion, receive confirmation and asset location details. Generated Unity assets are organized in the `Assets/ui/` folder.

<figure><img src="/files/WVtssSk7hkibuaCYkBVN" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Extend UI further in the editor**

The generated Canvas is not static—it’s fully editable. Developers can:

* Attach scripts to prefabs (`AuthValidator`, `PurchaseHandler`).
* Wire up interactions via the Inspector (e.g., `Button.onClick`) using Wire Pilot
  {% endstep %}
  {% endstepper %}

### What UI Builder does behind the scenes

Building UI in Unity manually involves repetitive tasks that slow teams down. UI Builder automates these jobs so developers get a clean, ready-to-use environment.

#### Intelligent Hierarchy Naming

Instead of generic labels like `Group 12` or `Frame 5`, visual AI renames elements based on what they represent. A `Shop` frame becomes `Canvas/UIBuilder_Shop`, and a `Card List` group becomes a `VerticalLayoutGroup` with proper spacing.

<div><figure><img src="/files/R6JLKo6Nt6Ql4o1nw2MV" alt="" width="220"><figcaption><p>Poorly named hierarchy in Figma</p></figcaption></figure> <figure><img src="/files/UtvDuT11v9gRt8X9pIlA" alt="" width="237"><figcaption><p>Hierarchy auto-rnamed</p></figcaption></figure></div>

#### Consistent Text Styling

Figma text styles automatically map to `TextMeshProUGUI` components with correct fonts, sizes, and colors. Missing fonts get flagged and fallbacks applied automatically, eliminating manual TMP setup.

#### Sprite Optimization

UI Builder deduplicates identical sprites and packs them into optimized `SpriteAtlas` files, reducing memory usage and draw calls compared to manual asset management.

<figure><img src="/files/pmGFTLPHazIp6Y0aQd4I" alt=""><figcaption></figcaption></figure>

#### Prefab Generation

Creates Unity prefabs from Figma frames, enabling reusable components across your project instead of manually copying disconnected UI elements.

> **Note:** Advanced features like responsive anchoring and prefab variants are planned for future releases.

### Troubleshooting

<details>

<summary><strong>No prefabs generated?</strong></summary>

Make sure your Figma layers are marked as Components before importing.

</details>

<details>

<summary><strong>Wrong fonts showing up?</strong></summary>

Import the missing TMP Font Asset and update **UI Builder Settings → Font Map**.

</details>

<details>

<summary><strong>Layout breaks when resizing?</strong></summary>

Manually adjust anchors in the `RectTransform`. Smart Anchors coming in v2.0.

</details>

<details>

<summary><strong>Duplicate or missing sprites?</strong></summary>

Clear cached atlases in `Project/UI/Assets` and re-import.

</details>

<details>

<summary>Scripts disappeared after re-import?</summary>

Current limitation - attach scripts at prefab roots as a workaround. Delta Imports will fix this in a future release.

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.letsterra.com/product-features/ui-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.