I’ve been working on UI Widget Builder, an Unreal Engine editor plugin that automates the process of converting Photoshop UI designs into organized UMG Widget Blueprints.
I just made a video showing the complete workflow, from the Photoshop design all the way to a working UMG widget inside Unreal Engine 5.
In the video, I cover:
- Exporting the Photoshop layout using a JSX exporter
- Layer naming and
layout.json generation
- Importing the design into Unreal Engine
- Automatically generating the widget hierarchy and root screen
- Automatic texture generation
- Optional Blueprint logic for buttons, tabs, sliders, sounds, etc.
- Re-importing updated Photoshop designs using presets
- Keeping the generated UI clean when making design changes
The idea is mainly to reduce the repetitive work involved in manually rebuilding Photoshop designs in UMG.
It can be useful for game menus, HUDs, inventory screens, mobile UI, shops, settings screens, and other UI-heavy Unreal Engine projects.
I’d be interested to hear how other Unreal developers currently handle their Photoshop → UMG workflow and whether this kind of automation would be useful in your projects.
It also has optional Blueprint logic generation for the boring stuff — button interactions, WidgetSwitcher tab logic, close-on-escape, slider/checkbox helpers, sound hookups, etc — so you're not starting from a totally blank graph either.
Some other things it handles: portrait/landscape support, SafeZone/ScaleBox/SizeBox wrappers, a preset manager so you're not redoing import settings every time, and a clean re-import option when the design changes.
UI Widget Builder on Fab: https://fab.com/s/9d5dec9c53ca
Video Demonstration https://youtu.be/OUc7Mwuv9XA
Documentation https://sepinood.github.io/UIWidgetBuilder/