🖼 UI Builder

Turn design files into working pixel perfect Unity UI without manual reconstruction.

Type: “Use this figma link a shop screen with item cards, purchase buttons, and currency display of my existing inventory screen.” UI Builder instantly lays out the screen, hooks up the UI events, and leaves you with editable components ready for polish.

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.

How UI Builder Works

1

Enter Figma URL

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

2

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.

3

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.

4

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

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.

Poorly named hierarchy in Figma
Hierarchy auto-rnamed

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.

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

No prefabs generated?

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

Wrong fonts showing up?

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

Layout breaks when resizing?

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

Duplicate or missing sprites?

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

Scripts disappeared after re-import?

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

Previous📊 Auto-ProfilerNext📈 Analytics Ninja

Last updated