Complete documentation

UI Widget Builder
Complete Help Site

A full user-facing help site for understanding the Photoshop exporter, the Unreal importer, naming rules, generated assets, presets, logic, and troubleshooting.

Plugin: UI Widget Builder Target: UE 5.6 / 5.7 / 5.8 Workflow: PSD → layout.json + Textures → UMG Widget Blueprint Author: Ali Shantia

Start here

What this plugin does

UI Widget Builder is an Unreal Engine editor tool that converts a structured Photoshop UI design into real UMG Widget Blueprints. The normal pipeline is: design in PSD, export layout.json and Textures/ with the JSX exporter, then import the JSON inside Unreal.

Engine support

UI Widget Builder supports Unreal Engine 5.6, 5.7, and 5.8. The animated switcher option requires the Unreal CommonUI plugin and is intended for UE 5.7 / UE 5.8; UE 5.6 uses normal WidgetSwitcher behavior.

Diagram placeholder — PSD layer tree → layout.json + Textures/ → Unreal Widget Blueprint

1. Quick Start

Minimum steps to export and import your first screen.

PSD → Export PSD → Import JSON

2. Installation

Supported Unreal versions, plugin setup, CommonUI requirement, and saved preset path setup.

UE 5.6 · UE 5.7 · UE 5.8

3. Naming Rules

Prefixes for buttons, text, images, containers, sliders, checkboxes, and special parts.

BTN_ TXT_ IMG_ CAN_ SCB_

4. Unreal Importer

How to use the wizard, output path, generated assets, presets, and delete-before-import.

Step 1 → Step 2 → Step 3

Mental model

The important idea

The plugin does not guess your UI. It reads your layer names. A good PSD naming convention produces clean widgets, clean hierarchy, and usable generated Blueprint logic.

Photoshop concept	Exported JSON	Unreal result
Group named CAN_MainMenu	Root screen group	CanvasPanel / screen root, optionally wrapped by SafeZone, ScaleBox, SizeBox
Group named BTN_Play	Button object with state textures	UButton with Normal / Hover / Pressed / Disabled brushes
Text layer named TXT_Title	Text object with font, color, alignment	UTextBlock
Layer named IMG_Background	Texture entry	UImage with imported texture
Output folder	`layout.json` + `Textures/`	Widget Blueprint assets in the selected Content path

What the help covers

Documentation map

Designer workflow

How to prepare Photoshop layers, use prefix names, export textures, and avoid common naming mistakes.

Unreal workflow

How to import JSON, choose generated Widget Blueprint names, detach root widgets, add widgets to level, and generate Blueprint logic.

Advanced features

Presets, screen usage settings, Close on Key, Show After Close, play music, pause game, child UI logic, sliders, save text, click and hover SFX.

Maintenance

Delete existing generated items, clean re-imports, troubleshooting, known limitations, and publish-readiness notes for UE 5.6–5.8.

Recent updates

Recently documented features

Area	Documented behavior
JSX exporter	64×64 solid-color optimization now skips rounded corners, masks, transparent edges, and layer effects.
Checkbox groups	`CHKG_` groups initialize the first child checked and set group text labels to remove hit test.
Text/button logic	Button-child text hover options and improved TextBlock wrapping behavior are documented.
Fonts/input widgets	Font Mapping & Font Support explains missing-font fallback, manual mapping, Regular/Bold matching, and ETB/ETM placeholder font handling.

NextQuick Start