UI Widget Builder – Convert Photoshop UI Designs into UMG Widgets

Community Showcase
, ,
1

Hello everyone,
I’d like to showcase UI Widget Builder, an Unreal Engine editor plugin designed to automate the process of converting Photoshop UI designs into organized UMG Widget Blueprints.

thumb1
thumb11920×1080 319 KB

Instead of manually importing every texture, recreating the layer hierarchy, and positioning each widget, the plugin uses an exported Photoshop layout to generate the UI structure directly inside Unreal Engine.

Basic Workflow

  1. Organize and name the UI layers in Photoshop.

  2. Run the included JSX exporter.

  3. Export the textures and layout.json file.

  4. Import the layout using UI Widget Builder.

  5. Generate an organized UMG Widget Blueprint.

Main Features

  • Photoshop PSD-to-UMG workflow

  • Automatic widget hierarchy generation

  • Automatic texture importing

  • Root screen and canvas creation

  • Preserves the original layer positions and dimensions

  • Support for buttons, tabs, sliders, images, and text

  • Optional Blueprint logic generation

  • Button, tab, slider, and sound setup

  • Reusable import presets

  • Clean re-import workflow for updated designs

  • Organized asset and widget generation

The plugin is useful for game menus, HUDs, inventories, shops, settings screens, mobile interfaces, and other UI-heavy Unreal Engine projects.

Its main goal is to reduce repetitive UMG setup work, allowing developers and UI designers to spend more time refining the design and implementing the actual gameplay functionality.

UI Widget Builder on Fab

You can find it on my Fab profile:

Video Tutorials and Workflow Demonstrations

UI Widget Builder is currently included in the Fab Flash Sale with 50% off.

Feedback and questions are always welcome!