We believe that collaboration between designers and developers in an effective workflow fosters and boosts product innovation and ultimately leads to a better user experience. That’s why I’m extremely happy to announce that Qt Design Studio 1.0 released today!

Qt Design Studio is a UI design and development environment that enables designers and developers to rapidly prototype and develop complex and scalable UIs.

Qt Design Studio is a tool used by both designers and developers and that makes collaboration between the two a lot simpler and more streamlined: Designers can look the graphical view, while developers can look at the QML code. With this workflow, designers can have their Photoshop designs running on real devices in minutes! As an aside, I say Photoshop designs, but we are planning to support other graphic design tools in the future.

Enhanced & effective workflow with Qt Design Studio, Qt and QML

Since the tech-preview release in June, we have been working to finalize features and to bring in new ones. Let’s have a look at the features in detail:

Qt Photoshop Bridge – import your graphics design from Photoshop

Create re-usable components directly from Photoshop

Export directly to specific QML types, built-ins or custom ones

Export property aliases

New and enhanced import dialog

Basic merging capabilities introduced

Timeline-based animations – timeline-/keyframe-based editor that lets designers easily create pixel-perfect animations without writing a single line of code.

New easing-curve editor with lots of new exciting capabilities

Map and organize the relationship of timelines and states – create smooth transitions from state to state

Select multiple keyframes

Qt Live Preview – Run and preview your application or UI directly on the desktop, Android devices, and Boot2Qt devices.

See how your changes affect the UI live on your target device!

FPS counter

Load language translations and try them on the fly

Zoom in/out functionality

Lots of other features –

Insert a 3D Studio element and preview that on the end target device with Qt Live Preview

A great collection of materials and resources can also be found in our resources section.

Qt Design Studio is available today as a free tool for everyone to try out and evaluate. You will need a commercial Qt developer license to distribute your UIs created with Qt Design Studio. This means, for example, that designers or design companies can use Qt Design Studio for free, as long as the company they’re working for has the necessary commercial Qt licenses for their developers. We are also working on an open source version with a limited feature set, to be published in December. If you are interested, you can already now take a peek of the new timeline editing feature source code.

Last but not least, to learn more about Qt Design Studio and keep abreast with what’s in store in the future, make sure to watch our on-demand webinar!

28 comments

> This means, for example, that designers or design companies can use Qt Design Studio for free, as long as the company they’re working for has the necessary commercial Qt licenses for their developers.

…and there is commercial 10-days trial available only.

> Qt Photoshop Bridge – import your graphics design from Photoshop

Any hint where to find it? Only import of generic images is available.

Importing assets is one of the important functions of Qt Bridge but it does much more than that. It generates the QML for your UI which can be previewed right away and the design can be iterated. Please note that one can generate QML components and define their UI in different PSDs and collaborate by re-using the generated components. Even if we keep the QML out of the equation, think of creating assets manually for projects where the UI is defined in 20+ PSD files.

True but… It’s difficult to imagine project having UI defined in 20+ PSD files and using tons of static images with auto-generated components. Problems with scaling and layouts (as far as I can see, importing from PS creates copy of that design split to dozen of Image elements positioned in pixels without any anchors), inheriting common design parts (you can’t reuse same elements between designs, right? Every element would be different image), performance after all?

@Lorena: This 1.0 release only provides a plugin to Photoshop, but we have been thinking about the other tools and Sketch is one of the most potential options as the next one. If you use Sketch, you can import graphics conveniently via the “resource” tab. It is a bit less convenient than using the Photoshop bridge, but quite simple to use way to bring graphics from any drawing tool. Sketch also offers a nice export functionality that makes it straightforward to get the graphics out of Sketch in the right format.

This looks outstanding, can’t wait to try it out. If I might offer a suggestion, SVG and PDF would be great to import too. I’m thinking a quick export from Illustrator or pretty much any other vector based application. Great stuff, well done!

Thanks. We are evaluating other UI design tools and formats to be part of the Qt Design Studio ecosystem. In my personal opinion, SVG support is definitely the right direction to go and illustrator goes hand in hand with SVG. I second your suggestion.

An SVG based version would be good for us, as that allows us to use both Illustrator and Inkscape for UI development. I also suspect that there would be a nearly one to one relationship between SVG and QML, resulting in less manipulation on the QML side afterward.

@Daniel: Good questions, answers below:
1. You can develop the UI with Qt Quick using the new tool and use it with the application created in C++ in Qt Creator
2. We intent to actively develop Qt Quick to keep it a leading technology for dynamic and interactive UI creation.
3. Currently these are two separate, but interoperable tools. We are looking into ways to bring these closer together in the future.

Yes, we use Widgets, Qt Quick and Graphics View wherever it makes the most sense.

The form editor and timeline uses Graphics View.
The property editor, states editor, and item library use Qt Quick.
The dialogs, toolbars, text editor and anything that is from Qt Creator uses Widgets.