Qt Design Studio 1.3 released

We are happy to announce the release of Qt Design Studio 1.3!

Qt Design Studio is a UI design and development tool that enables designers and developers to rapidly prototype and develop complex UIs. Both designers and developers use Qt Design Studio and this makes collaboration between the two a lot simpler and more streamlined. To get an impression, you should watch this video.

Qt Bridge for Sketch

One of the main features in Qt Design Studio is the vastly improved Sketch Bridge. For Qt Design Studio 1.3 we added support for Symbol Overrides.

Symbol Overrides in Sketch

Symbol Overrides match perfectly with the concept of components and properties in QML. Using Symbol Overrides different instances of a Button can have for example different text properties. Symbol Overrides are now exported to QML components with the override properties exposed as properties of the component.

Another really important addition to the Sketch Bridge is the ability to exports SVGs instead of bitmap graphics. This way vector graphics are still rescalable in QML after they have been exported.

Properties View

If the properties view now looks different to you, it is because it is now built with Qt Quick Controls 2. The resulting controls are fully customizable, as all the colors, sizes and margins are controlled by a theme.

In addition, the usability of controls like the spin box has improved a lot. The new spin box, for example, supports dragging and has an optional integrated slider. Another feature that was requested often, was support for multi-selection in the Properties view. Now, setting properties on multiple items at once is supported. This makes it easy to set the same font and color on multiple labels for example.

When doing all of this we also changed the design and cleaned up the property editor in general. The property editor also got a nice gradient browser and also the color editor got a major rework and now supports simple color swatches that contain the recent used colors. As an end result the property editor now looks a lot cleaner.

Binding Editor

We were not satisfied with the usability of the expression binding editor, especially the auto-completion. The new binding editor is based directly on the code editor widget for QML which improves the usability a lot. This makes editing your bindings a lot more convenient.

Advanced Curve Editor

Another addition to Qt Design Studio 1.3 is the new advanced curve editor for animations. The new curve editor allows adjusting the interpolation curves for multiple keyframes in a single view and is closer to animation tools known from 3D software.
curveEditorScreenshot2

This is a great tool to fine-tune very complex animations and to fully control the slope of animations on keyframes. This makes is possible to create animations of really high quality.Of course Qt Design Studio 1.3 still has the simpler timeline editor.

WebAssembly based QML viewer

In the meantime, we have also been working on a WebAssembly based QML viewer. This viewer allows you to package pure QML projects to the web and preview them in the browser. While we are still working on this we are confident to be able to show something, soon.

Community Edition

With Qt Design Studio 1.3 there is also a free community version available, which lacks the Photoshop and Sketch bridges, though. The Beta of the Qt Design Studio 1.3 Community Edition can be found here.

Bug Fixes

Last but not least many bugs were fixed for Qt Design Studio 1.3.
To learn more about the improvements and fixes in Qt Design Studio 1.3, you can check out the changelog.

Getting Started

You can find the latest online documentation for Qt Design Studio 1.3 here. The documentation is also available from inside Qt Design Studio.

For Qt Design Studio we created tutorials as part of the documentation.

The welcome page of Qt Design Studio contains examples and links to video tutorials to help you get started.

Please post issues you find or suggestions you have in our bug tracker.

Qt Blog

Categories

Archives