- Qt Creator Manual
- Design Views
- Qt Creator Manual 5.0.3

Creating Qt Quick Projects ◦ Wireframing

# 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. | 3D Editor
Library | Contains the building blocks that you can use to design applications: preset components, your own components, and assets. | 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 Timeline 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) | Validating with Target Hardware
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
| Copies property values from the selected component. |  | Copying and Pasting Formatting
| Applies copied property values to one or several selected components. |  | Copying and Pasting Formatting
| 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
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. |  | 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

Creating Qt Quick Projects ◦ Wireframing