Petref Saraci

Qt Design Studio 1.0 Released

Published Thursday October 25th, 2018
28 Comments on Qt Design Studio 1.0 Released
Posted in Automotive, Biz Circuit & Dev Loop, Design, Qt Design Studio, UI | Tags: , , , ,

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!

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!

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Automotive, Biz Circuit & Dev Loop, Design, Qt Design Studio, UI | Tags: , , , ,


Vladimir says:

> 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.

Vladimir says:

Found plugin under Design Studio installation folder. No offer when installing Studio, no manuals, Bridge guide starts with “you should have Bridge installed”…

Importing assets as PNG/JPG with this plugin isnt mush more useful than manual process. Hope was for photoshop-shapes-to-qml-shapes translation…

Vikas Pachdha says:

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.

Vladimir says:

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?

Leena Miettinen Leena Miettinen says:

You can find the Qt Bridge installation instructions in the Qt Design Studio Manual here:

Richard says:

Please add Krita support – best OpenSource graphics editor!

Qt Design Studio manual can be found inside the help section of Qt Design Studio, but there is also an online version here:

The tutorials and the hands-on webinars will guide you step by step on how to install and use the capabilities of Qt Photoshop Bridge, they can be found here:

Tim says:

Great stuff guys.

Richard says:

> Qt Photoshop Bridge – import your graphics design from Photoshop

I make my UI design in Krita. Will it be supported by Qt Design Studio?

Vikas Pachdha says:

We are evaluating other UI design tools to bring into the fold. So far Krita did not ring any bells but it all depends on user requests and feedback.

Lorena says:

Does it work with Sketch?

@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.

Luke says:

What is the song used in the youtube video?

Thomas Hartmann says:

This one was done by me many days ago back when I was a still student.

peter says:

uh oh we enter the time software is more about looking good.
We can fix your software with some photoshopping.

Drew says:

Who said anything about “more”? You want your software to not look good?

William says:

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!

Vikas Pachdha says:

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.

Andrew says:

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.

A linux version would also be very welcome.

Daniel K. says:

While this looks generally very impressive there are a few open questions.

* How does this relate to the rest of the Qt ecosystem? Especially the C++ APIs and Qt Creator

* Is this purely Qt Quick based? What are the plans for Qt Quick and how will it evolve in the future? Is Qt Quick becoming some kind of modern open source Flash?

* How does Qt 3D and Qt 3D Studio fit into this? What are the plans forr 3D will there be any convergence?

Anyway good luck and keep up the good work.

@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.

nicholas says:

For linux this is release available?

Philippe says:

The UI of Qt Design looks great. What QT UI technology is used to build it? Mix of QWidgets and QML ?

Thomas Hartmann Thomas Hartmann says:

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.

Sam says:

Waiting for a Linux version.

Adam says:

Linux would be definitely useful especially that Design Studio is a Developer’s tool as much as it is a Designer’s tool.
Currently using Gimp with export_qml tool on linux and Design Studio on Win.

Thomas Hartmann Thomas Hartmann says:

This is something we will definitely consider for the future.

Michael says:

Open source licence version?

Commenting closed.

Get started today with Qt Download now