Widget Blueprints

How to create a Widget Blueprint and Overview of the Widget Blueprint Interface

Beginner

Choose your operating system:

Windows

macOS

Linux

Related Courses

On this page

Widget Blueprint Editor

In order to start working with Unreal Motion Graphics, you will first need to create a Widget Blueprint as seen below.

Click the Add New button inside the Content Browser , then under User Interface , select the Widget Blueprint option.

You can also Right-Click in the Content Browser instead of clicking the Create Button.
A Widget Blueprint asset will be created in the Content Browser which you can rename or use the default name for the asset.
Double-Click on the Widget Blueprint asset to open it up in the Widget Blueprint Editor .

Click for full view.

Widget Blueprint Editor

By default, the Widget Blueprint Editor opens up on the Designer tab when a Widget Blueprint is opened. The Designer tab is the visual representation of the layout and will give you an idea of how the screen will appear in-game.

Click for full view.


Number	Window	Description
1	Menu Bar	The common Menu bar.
2	Tool Bar	This contains a number of commonly used functions for the Blueprint Editor, such as Compile, Save, and Play.
3	Editor Mode	Switches the UMG Widget Blueprint Editor between Designer and Graph modes.
4	Palette	The list of Widgets that you can drag-and-drop into the Visual Designer. Displays any class inheriting from UWidget.
5	Hierarchy	Displays the parenting structure of the User Widget. You can also drag Widgets into this window.
6	Visual Designer	This is the visual representation of the layout. Widgets dragged into the Visual Designer can be manipulated in the window.
7	Details	Displays the properties of the currently selected Widget.
8	Animations	This is the animation track for UMG which allows you to keyframe animations for your Widgets.

The Visual Designer window by default is 1:1 scale however you can hold Control and Mouse-Wheel up to zoom in further.

The Graph tab of the Widget Blueprint Editor is pictured below.

Click for full view.

The Graph tab functions just like the default Blueprint Editor. For more information on the basic functionality of the Graph tab, refer to the Graph Editor Tab documentation.