.webp)
We are proud to announce the release of Qt Design Studio 3.8.
Qt Design Studio is a UI design and development tool which is used to rapidly prototype and create complex UIs. The Qt Design Studio outputs a functional user interface as code that can be used as-is with the backend. So combining the UI with the backend is really straightforward. To get an impression you should watch this video.
For detailed information about Qt Design Studio, visit the online documentation page.
This release of Qt Design Studio introduces bunch of usability improvements as well as some new features that help you to create user interfaces even faster.
Qt Quick Effect Maker
In Qt Design Studio 3.8 we have integrated the Qt Effect Maker.
The Qt Quick Effect Maker is a tool to create post-processing shader effects for Qt Quick. It allows you to create your own custom effects based on a comprehensive library of ready-made building blocks, like blur, shadows, noise, colorize, masks, and many more. The node library even contains animatable textures like plasma, clouds, thunder, water, and rain. Please check out this video to get an impression of what is possible.
You create your effect by combining nodes in the Qt Effect Maker which is its own tool that can be launched from Qt Design Studio. The Qt Effect Maker allows you to combine different effects that are represented as nodes and you can create your own custom nodes. Qt Effect Maker comes with a nice preview and when you are done designing your effect you can export it as a QML component that works in Qt Design Studio.
After exporting the effects they can be used in Qt Design Studio and applied to Qt Quick items in the 2d editor. In the screenshot, you can also see some of the more advanced effects like normal mapping, vignette, and plasma.
To learn more about Qt Quick Effect Maker check out this blog post for more details on Qt Quick Effect Maker or the documentation. Here you can find learn how to create a simple blur effect.
New States Editor
Qt Design Studio 3.8 comes with a new advanced states editor, that supports vertical and grid layouts and provides new features, like getting an overview of all property changes, defining extra state groups, or extending states.
In the screenshot, you can see the new vertical layout of the new states editor, which allows docking the states editor on the side. One important new feature are State Groups. State groups allow the definition of a new set of states, without the need to define an extra component. The new states editor also allows reordering states, which is especially useful if you have many states. For more details please check out the documentation.
Qt Design Viewer
Qt Design Studio 3.8 now supports sharing projects and applications online using a WebAssembly-based viewer application called Qt Design Viewer.
As shown in the video you can upload your application and share it with other project members using a web link. Receiving party needs just a web browser, so no installation of Qt Design Studio or Qt products is needed.
In the screenshot, you can see the UI of the online sharing dialog. After uploading the project you can open the project in your web browser or copy the link to share it. You can also manage your already shared applications from this dialog.
This is the animation tutorial running in the Qt Design Viewer. The Qt Design Viewer runs and is tested on Chrome, Edge, Safari, and Firefox. As you can see in the screenshot Qt Quick 3D is also supported. Please also check out the documentation.
Qt Figma bridge is now a Figma community plugin
The Qt Bridge for Figma can now be found in the community marketplace for Figma plugins. This means the plugin can be installed as a community plugin and there is no need to manually load the plugin manifest from the Qt Design Studio installation. The website for the Figma plugin also contains the version history and changelog.
Getting Started
If you don't have it yet, you can request a free trial here: Qt Design Studio page
If you already have theQt installer, you can find Qt Design Studio under in Qt installer under Tools > Qt Design Studio.
Qt Design Studio Studio is available in three different editions. Enterprise, Professional, and a free Community edition. The Enterprise version of Qt Design Studio also contains the Photoshop, Sketch, Figma, and Adobe XD bridges, plus the Simulink integration and multi-language editor support.
You can find the latest online documentation for Qt Design Studio here. The documentation is also available from inside Qt Design Studio.
The welcome page of Qt Design Studio contains examples and links to video tutorials to help you get started.
Of course, each Qt Design Studio contains many more bug fixes and small improvements. Please check the change log for more details.
Please post issues you find or suggestions you have in our bug tracker.
