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
• 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!

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!