QtDesignStudio: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(small grammar fixes and rewrite suggestions.) |
||
| Line 1: | Line 1: | ||
'''Qt Design Studio is a UI design and development environment that enables designers and developers to | '''Qt Design Studio is a UI design and development environment that enables designers and developers to prototype and develop complex and scalable UI rapidly.''' | ||
Qt Design Studio is a single tool used by both designers and developers. That alone 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! | Qt Design Studio is a single tool used by both designers and developers. That alone makes collaboration between the two a lot simpler and more streamlined: Designers can look at 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! | ||
Qt Design Studio features in more detail: | Qt Design Studio features in more detail: | ||
*'''Qt Photoshop Bridge''' – Create your UI design and UI components in Photoshop and import them | *'''Qt Photoshop Bridge''' – Create your UI design and UI components in Photoshop and import them into Qt Design Studio. This is an advanced Photoshop plugin that exports your designs to Qt Design Studio, where it is translated into QML. | ||
*'''Qt Sketch Bridge''' – Create your UI design and UI components in Sketch and import them | *'''Qt Sketch Bridge''' – Create your UI design and UI components in Sketch and import them into Qt Design Studio. This is an advanced Sketch plugin that exports your designs to Qt Design Studio, where it is translated into QML. Since Qt Design Studio 1.3 it has support for symbols. | ||
*'''Timeline-based animations''' – Creating advanced animations was never simpler. The timeline-/keyframe-based editor lets designers create pixel-perfect animations of any type without having to write a single line of code. | *'''Timeline-based animations''' – Creating advanced animations was never simpler. The timeline-/keyframe-based editor lets designers create pixel-perfect animations of any type without having to write a single line of code. | ||
*'''QML Live Preview''' – Run and preview your application or UI directly on the desktop, Android | *'''QML Live Preview''' – Run and preview your application or UI directly on the desktop, Android, and Boot2Qt devices. See how your changes affect the UI live on your target device in minutes! | ||
*'''QML Visual Effects''' – Apply out-of-the-box visual effects to your designs, e.g. blur, colorize, glow, and more. You can even animate the effects with the Timeline editor. | *'''QML Visual Effects''' – Apply out-of-the-box visual effects to your designs, e.g. blur, colorize, glow, and more. You can even animate the effects with the Timeline editor. | ||
*'''QML Shape Items''' – Several out-of-the-box shapes, i.e. Pie, Arc, Triangle, etc. are ready for prototyping and building custom QML visual elements. | *'''QML Shape Items''' – Several out-of-the-box shapes, i.e. Pie, Arc, Triangle, etc., are ready for prototyping and building custom QML visual elements. | ||
*'''Manage and create custom re-usable components''' – Turn your Photoshop layers into reusable components for different projects with but a few clicks. | *'''Manage and create custom re-usable components''' – Turn your Photoshop layers into reusable components for different projects with but a few clicks. | ||
*and many more… e.g. | *and many more… e.g. managing layouts and states with ease | ||
'''Where can you get it?''' | '''Where can you get it?''' | ||
| Line 44: | Line 44: | ||
==Reporting bugs and issues== | ==Reporting bugs and issues== | ||
The public | The public bug tracker for Qt Design Studio can be found [https://bugreports.qt.io/projects/QDS/issues here]. Feel free to report any bugs you find and add suggestions. | ||
Feel free to report any bugs you find and add suggestions. | |||
==Source Code== | ==Source Code== | ||
Many of the features | Many of the features of Qt Design Studio are part of Qt Creator. You can find the source code of Qt Creator [https://github.com/qt-creator/qt-creator here]. | ||
== | ==Release Notes== | ||
* [[QtDesignStudio-changelog3.8.0| | |||
* [[QtDesignStudio-changelog3.7.0| | *[[QtDesignStudio-changelog3.8.0|Qt Design Studio 3.8]] | ||
* [[QtDesignStudio-changelog3.6.0| | *[[QtDesignStudio-changelog3.7.0|Qt Design Studio 3.7]] | ||
* [[QtDesignStudio-changelog3.5.0| | *[[QtDesignStudio-changelog3.6.0|Qt Design Studio 3.6]] | ||
* [[QtDesignStudio-changelog3.4.0| | *[[QtDesignStudio-changelog3.5.0|Qt Design Studio 3.5]] | ||
* [[QtDesignStudio-changelog3.3.0| | *[[QtDesignStudio-changelog3.4.0|Qt Design Studio 3.4]] | ||
* [[QtDesignStudio-changelog3.2.0| | *[[QtDesignStudio-changelog3.3.0|Qt Design Studio 3.3]] | ||
* [[QtDesignStudio-changelog3.1.0| | *[[QtDesignStudio-changelog3.2.0|Qt Design Studio 3.2]] | ||
* [[QtDesignStudio-changelog3.0.0| | *[[QtDesignStudio-changelog3.1.0|Qt Design Studio 3.1]] | ||
* [[QtDesignStudio-changelog2.3.0|Qt Design Studio 2.3 | *[[QtDesignStudio-changelog3.0.0|Qt Design Studio 3.0]] | ||
* [[QtDesignStudio-changelog2.2.0|Qt Design Studio 2.2 | *[[QtDesignStudio-changelog2.3.0|Qt Design Studio 2.3]] | ||
* [[QtDesignStudio-changelog2.0.0|Qt Design Studio 2.0 | *[[QtDesignStudio-changelog2.2.0|Qt Design Studio 2.2]] | ||
* [[QtDesignStudio-changelog1.6.0|Qt Design Studio 1.6 | *[[QtDesignStudio-changelog2.0.0|Qt Design Studio 2.0]] | ||
* [[QtDesignStudio-changelog1.5|Qt Design Studio 1.5 | *[[QtDesignStudio-changelog1.6.0|Qt Design Studio 1.6]] | ||
* [[QtDesignStudio-changelog1.4.0|Qt Design Studio 1.4 | *[[QtDesignStudio-changelog1.5|Qt Design Studio 1.5]] | ||
* [[QtDesignStudio-changelog1.3|Qt Design Studio 1.3 | *[[QtDesignStudio-changelog1.4.0|Qt Design Studio 1.4]] | ||
* [[QtDesignStudio-changelog1.2|Qt Design Studio 1.2 | *[[QtDesignStudio-changelog1.3|Qt Design Studio 1.3]] | ||
* [[QtDesignStudio-changelog1.1|Qt Design Studio 1.1 | *[[QtDesignStudio-changelog1.2|Qt Design Studio 1.2]] | ||
* [[QtDesignStudio-changelog1.1.1|Qt Design Studio 1.1.1 | *[[QtDesignStudio-changelog1.1|Qt Design Studio 1.1]] | ||
*[[QtDesignStudio-changelog1.1.1|Qt Design Studio 1.1.1]] | |||
Revision as of 10:45, 29 November 2022
Qt Design Studio is a UI design and development environment that enables designers and developers to prototype and develop complex and scalable UI rapidly.
Qt Design Studio is a single tool used by both designers and developers. That alone makes collaboration between the two a lot simpler and more streamlined: Designers can look at 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!
Qt Design Studio features in more detail:
- Qt Photoshop Bridge – Create your UI design and UI components in Photoshop and import them into Qt Design Studio. This is an advanced Photoshop plugin that exports your designs to Qt Design Studio, where it is translated into QML.
- Qt Sketch Bridge – Create your UI design and UI components in Sketch and import them into Qt Design Studio. This is an advanced Sketch plugin that exports your designs to Qt Design Studio, where it is translated into QML. Since Qt Design Studio 1.3 it has support for symbols.
- Timeline-based animations – Creating advanced animations was never simpler. The timeline-/keyframe-based editor lets designers create pixel-perfect animations of any type without having to write a single line of code.
- QML Live Preview – Run and preview your application or UI directly on the desktop, Android, and Boot2Qt devices. See how your changes affect the UI live on your target device in minutes!
- QML Visual Effects – Apply out-of-the-box visual effects to your designs, e.g. blur, colorize, glow, and more. You can even animate the effects with the Timeline editor.
- QML Shape Items – Several out-of-the-box shapes, i.e. Pie, Arc, Triangle, etc., are ready for prototyping and building custom QML visual elements.
- Manage and create custom re-usable components – Turn your Photoshop layers into reusable components for different projects with but a few clicks.
- and many more… e.g. managing layouts and states with ease
Where can you get it?
Head to our Qt Design Tools webpage, and click the “Free Tech Preview Trial” button under 2D Feature Highlights. This will start you with a download link for your 10-day trial. You can always contact us if you want to extend the trial.
The free community edition can be found here.
The official Qt Design Studio manual is found here.
You can find demos/examples and test data here.
Here is a public test matrix Qt Design Studio test;
Tutorials
- Tutorial sources
- Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Playlist, Parts 1-5)
- Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 1)
- Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 2)
- Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 3)
- Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 4)
- Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 5)
- Sketch Bridge Tutorial
- Part 1 Files and Assets -
Testing
Public test matrix: Qt Design Studio test
Reporting bugs and issues
The public bug tracker for Qt Design Studio can be found here. Feel free to report any bugs you find and add suggestions.
Source Code
Many of the features of Qt Design Studio are part of Qt Creator. You can find the source code of Qt Creator here.
Release Notes
- Qt Design Studio 3.8
- Qt Design Studio 3.7
- Qt Design Studio 3.6
- Qt Design Studio 3.5
- Qt Design Studio 3.4
- Qt Design Studio 3.3
- Qt Design Studio 3.2
- Qt Design Studio 3.1
- Qt Design Studio 3.0
- Qt Design Studio 2.3
- Qt Design Studio 2.2
- Qt Design Studio 2.0
- Qt Design Studio 1.6
- Qt Design Studio 1.5
- Qt Design Studio 1.4
- Qt Design Studio 1.3
- Qt Design Studio 1.2
- Qt Design Studio 1.1
- Qt Design Studio 1.1.1