Tutorials

You can follow a set of hands-on tutorials that build on each other to illustrate how to use the features of Qt Design Studio. In addition, the tutorials provide additional information about the features of QML and Qt Quick that are relevant to the task at hand. Even if you plan to export your designs from a design tool, it is useful to first create a small UI from scratch to learn the basic concepts of Qt Design Studio. In particular, Part 1 describes the terms and concepts that you will run into when exporting designs with Qt Bridge.

Before you start, take a look at the following topics to familiarize yourself with the parts of Qt Design Studio in general, and the Design mode in particular: User Interface and Editing QML Files in Design Mode.

In addition to these entry-level tutorials, Qt Design Studio comes with examples and video tutorials that you can open from the Examples and Tutorials tabs in the Welcome mode. For more information, see Examples and Tutorials.

Log In UI - Part 1

Illustrates how to use wizards to create a simple UI that contains a text label, push buttons, and a logo.

Log In UI - Part 2

Illustrates how to position UI components on pages using anchors and positioners.

Log In UI - Part 3

Illustrates how to use states to create a second UI page.

Log In UI - Part 4

Illustrates how to use the timeline and states to animate UI components.

Available under certain Qt licenses.
Find out more.