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

https://youtu.be/kVdQ0V8mJE4

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

Qt Safe Renderer integration – use Safe Renderer items and map them in your UI

Overall enhancements in the Property panel

Use of states and timeline to create screen flows and transitions

Create artboards that can be mapped to components

and many more…

Head to our Qt Design Tools webpage now to learn more about Qt Design Studio and try it hands-on!

We have also created a set of how-to videos that will guide you through all the features and capabilities and show you in practice hands-on how to design and develop a UI with Qt Design Studio.

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!