Widget Blueprints

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


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

  1. 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.

  2. A Widget Blueprint asset will be created in the Content Browser which you can rename or use the default name for the asset.


  3. 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.





Menu Bar

The common Menu bar.


Tool Bar

This contains a number of commonly used functions for the Blueprint Editor, such as Compile, Save, and Play.


Editor Mode

Switches the UMG Widget Blueprint Editor between Designer and Graph modes.



The list of Widgets that you can drag-and-drop into the Visual Designer. Displays any class inheriting from UWidget.



Displays the parenting structure of the User Widget. You can also drag Widgets into this window.


Visual Designer

This is the visual representation of the layout. Widgets dragged into the Visual Designer can be manipulated in the window.



Displays the properties of the currently selected Widget.



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.

Select Skin
Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback