- Qt Creator Documentation
- How to
- Designing UIs
- Designing widget-based UIs
- Qt Creator 20.0.0

Set when conditions ◦ Add Qt Widgets Designer Plugins

# Designing widget-based UIs

> How to: Design widget-based UIs

Qt Creator automatically opens all `.ui` files in the integrated Qt Widgets Designer, in Design mode.

Widgets and forms created with Qt Widgets Designer are integrated seamlessly with programmed code by using the Qt signals and slots mechanism that allows you to easily assign behavior to graphical elements. All properties set in Qt Widgets Designer can be changed dynamically within the code. Furthermore, features such as widget promotion and custom plugins allow you to use your own widgets with Qt Widgets Designer.

For more information about Qt Widgets Designer, see the Qt Widgets Designer Manual.

Generally, the integrated Qt Widgets Designer has the same functions as the standalone Qt Widgets Designer. The following sections describe the differences.

To learn how to use the integrated Qt Widgets Designer to create a small Qt Widgets-based application, take the Qt Academy: Getting Started with Qt Creator course.

## Code editor integration

To switch between forms (Design mode) and code (Edit mode), select Shift+F4.

You can use Qt Creator to create stub implementations of slot functions. In the Design mode, right-click a widget to open a context menu, and then select Go to Slot. Select a signal in the list to go to an existing slot function or to create a new slot function.

## Manage image resources

In standalone Qt Widgets Designer, image resources are created using the built-in Resource Editor. In Qt Creator, `.ui` files are usually part of a project, which may have several resource files (`.qrc`). They are created and maintained by using the Qt Creator Resource Editor. The Qt Widgets Designer Resource Editor is de-activated and the image resources are displayed in the Qt Widgets Designer Resource Browser.

To open resource files from the code editor, select Follow Symbol Under Cursor in the context menu or select F2 when the cursor is over a string literal.

## Set preferences for Qt Widgets Designer

You can drag and drop the views in Qt Widgets Designer to new positions on the screen.

To set preferences for Qt Widgets Designer, go to Preferences > Designer:

- Specify embedded device profiles, that determine style, font, and screen resolution, for example, in Embedded Design.
- Specify settings for the grid and previewing forms in Forms.
- Specify an additional folder for saving templates in Template Paths.

To preview the settings, select Tools > Form Editor > Preview, or select Alt+Shift+R.

## Preview forms using device profiles

A device profile is a set of configuration files that describe a mobile device. It includes a border image that surrounds the form and depicts a mobile device with its buttons.

To preview your form using device profiles, select Tools > Form Editor > Preview In, and then select a device profile.

### Add device profiles

To add device profiles:

1. Go to Preferences > Designer.

2. In Embedded Design, select (Add a profile) to open the Add Profile dialog.

3. In Name, enter a name for the device. The name is displayed as an option in Preview In.
4. In Family, select the font to use.
5. In Point Size, select the font size.
6. In Style, select one of the predefined styles.
7. In Device DPI, select one of the predefined DPI values or User defined to specify a custom value.
8. Select OK to add the device profile to the list.

To import device profiles from `.qdp` files, select Open. To save them as `.qdp` files, select Save.

See also Tutorial: Qt Widgets application and Add Qt Widgets Designer plugins.