Design Views
Qt Design Studio contains views for designing UIs. To open them, select View > Views. The following images present the views that you are likely to use most often while designing UIs.
You can move the views anywhere on the screen and save them as workspaces, as instructed in Managing Workspaces.
To learn more about using the design views, see the following video:
Summary of Design Views
| View | Purpose | Read More |
|---|---|---|
| Form Editor | Provides a working area for designing 2D UIs. When you are editing 3D scenes, Form Editor is used as a canvas for the 3D scene projected by the camera. | Form Editor |
| 3D Editor | Provides an editor for files you created using 3D graphics applications and stored in one of the supported formats. | Editing 3D Scenes |
| Library | Contains the building blocks that you can use to design applications: preset components, your own components, and assets. | Creating Components |
| Navigator | Displays the composition of the current component file as a tree structure. A component file can contain references to other components and assets. | Navigator |
| Properties | Enables you to modify the properties of the selected component. | Specifying Component Properties |
| Connection View | Enables you to add functionality to the UI by creating connections between components, signals, and component properties. | Adding Connections |
| States | Displays the different states that can be applied to a component. Typically, states describe UI configurations, such as the visibility and behavior of components and the available user actions. | Adding States |
| Transition Editor | Enables you to make movement between states smooth by animating the changes between states. | Animating Transitions Between States |
| Timeline | Provides a timeline and keyframe based editor for animating the properties of components. | Creating Animations |
| Curve Editor | Enables you to view and modify the whole animation curve by inserting keyframes to the curve and dragging them and the point handlers to modify the curve. | Editing Animation Curves |
| Text Editor | Provides a code editor for viewing and modifying the code generated by the visual editors. | Working in Edit Mode |
| Projects | Shows a list of open projects and the files they contain. | Projects |
| File System | Shows all files in the currently selected directory. | File System |
| Open Documents | Shows currently open files. | Open Documents |
Summary of Main Toolbar Actions
The top level toolbar in the Design mode contains shortcuts to widely used actions.
| Button/Field | Action | Keyboard Shortcut | Read More |
|---|---|---|---|
 | Go Back: moves a step backwards in your location history. That is, returns the focus to the last location in the last file it was on. | Alt+< (Opt+Cmd+< on macOS) | Navigating Between Open Files and Symbols |
 | Go Forward: moves a step forward in your location history. | Alt+> (Opt+Cmd+> on macOS) | Navigating Between Open Files and Symbols |
 | File is writable: the currently open file can be modified and saved. | Open Documents | |
| File type icon | Indicates the type of the currently open file. Design views cannot be split, so the icon cannot be dragged, contrary to the tooltip. | Open Documents | |
| Currently open file | Displays the location and filename of the currently open file. You can select another file in the list of open files to view it in Form Editor and Navigator. | Open Documents | |
 | Close Document: closes the current file. | Ctrl+W (Cmd+W on macOS) | |
 | Show Live Preview shows a preview of the current file or the entire UI. The changes you make to the UI are instantly visible to you in the preview. | Alt+P (Opt+P on macOS) | Previewing |
| Preview size | Displays the size of the preview dialog as a percentage. You can select another percentage in the list to view the UI in different sizes. | Previewing on Desktop | |
| FPS | Displays the frames-per-second (FPS) refresh rate of previewed animations. | Previewing on Desktop | |
| Preview language | Displays the language used for a localized application during preview. You can select another language in the list of languages that the application has been localized to. | ||
 | Returns a component to its implicit position after being moved. | Ctrl+D (Cmd+D on macOS) | Resetting Component Position and Size |
 | Returns a component to its implicit size after it was scaled. | Shift+S | Resetting Component Position and Size |
 | Fills the selected component to its parent component. | Shift+F | Setting Anchors and Margins |
 | Resets anchors to their saved state for the selected component. | Ctrl+Shift+R (Shift+Cmd+R on macOS) | Setting Anchors and Margins |
 | Uses a Row component to lay out the selected components. | Ctrl+U (Cmd+U on macOS) | Using Layouts |
 | Uses a Column component to lay out the selected components. | Ctrl+L (Cmd+L on macOS) | Using Layouts |
 | Uses a Grid component to lay out the selected components. | Shift+G | Using Layouts |
 | Show Event List: opens a dialog for viewing and creating an event list for an application flow. | Alt+E (Opt+E on macOS) | Simulating Events |
 | Assign Events to Actions: assigns events to actions in an application flow. | Alt+A (Opt+A on macOS) | Simulating Events |
| Styling | Displays the UI style used for UI controls. | Styling Controls | |
| Subcomponents | Displays the components referred to in the current file. Select a component in the list to open it in Form Editor and Navigator. | Creating Components | |
| Workspace | Displays the currently selected workspace. To switch to another workspace, select it in the list. | Managing Workspaces | |
 | Enables you to add or edit global annotations. | Annotating Designs |
Available under certain Qt licenses.
Find out more.