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.

"Design views"

"The States and Timeline views"

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

ViewPurposeRead More
Form EditorProvides 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 EditorProvides an editor for files you created using 3D graphics applications and stored in one of the supported formats.Editing 3D Scenes
LibraryContains the building blocks that you can use to design applications: preset components, your own components, and assets.Creating Components
NavigatorDisplays the composition of the current component file as a tree structure. A component file can contain references to other components and assets.Navigator
PropertiesEnables you to modify the properties of the selected component.Specifying Component Properties
Connection ViewEnables you to add functionality to the UI by creating connections between components, signals, and component properties.Adding Connections
StatesDisplays 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 EditorEnables you to make movement between states smooth by animating the changes between states.Animating Transitions Between States
TimelineProvides a timeline and keyframe based editor for animating the properties of components.Creating Animations
Curve EditorEnables 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 EditorProvides a code editor for viewing and modifying the code generated by the visual editors.Working in Edit Mode
ProjectsShows a list of open projects and the files they contain.Projects
File SystemShows all files in the currently selected directory.File System
Open DocumentsShows 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/FieldActionKeyboard ShortcutRead 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 iconIndicates 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 fileDisplays 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 sizeDisplays 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
FPSDisplays the frames-per-second (FPS) refresh rate of previewed animations.Previewing on Desktop
Preview languageDisplays 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+SResetting Component Position and Size
Fills the selected component to its parent component.Shift+FSetting 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+GUsing 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
StylingDisplays the UI style used for UI controls.Styling Controls
SubcomponentsDisplays the components referred to in the current file. Select a component in the list to open it in Form Editor and Navigator.Creating Components
WorkspaceDisplays 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.