QtDesignStudio: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(added sketch tutorial section)
 
(47 intermediate revisions by 6 users not shown)
Line 1: Line 1:
'''Qt Design Studio is a UI design and development environment that enables designers and developers to rapidly prototype and develop complex and scalable UIs.'''
== What is Qt Design Studio ==
Qt Design Studio is a UI design and development environment that enables designers and developers to prototype and develop complex and scalable UI rapidly. Key items of the Qt Design Studio are


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!
* It's a visual editor for QML user interfaces
* It works with commercial and open source Qt versions
* It used mostly by front-end developers and technical artists to create functional QML user interface layer for Qt applications.


Qt Design Studio features in more detail:
For detailed information about Qt Design Studio, please refer to our online documentation at: https://doc.qt.io/qtdesignstudio/
* '''Qt Photoshop Bridge''' – Create your UI design and UI components in Photoshop and import them in 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 in 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 devices, 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. manage layouts and states with ease


'''Where can you get it?'''
== Working with other tools ==
Qt Design Studio works seamlessly with other design tools. On the 2D side our main focus is compatiblity with the Figma through our own Figma plugin, see more here: [[QtDesignStudio/FigmaPlugin]].


Head to our [https://www.qt.io/ui-framework 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.
Figma is not the only thing we support. There are other tools like Photoshop and Sketch for example. Detailed information can be found here: [[QtDesignStudio/OtherBridges]].


The free community edition can be found [https://download.qt.io/official_releases/qtdesignstudio/1.3.0/ here].
On the 3D side, we are compatible with all leading file formats, such as FBX, GLTF, and Collada. Detailed information about compatibility with 3D tools can be found here: [[QtDesignStudio/3DTools]].


The official Qt Design Studio manual is found [https://doc.qt.io/qtdesignstudio/index.html here].
You cannot complete the whole application with Qt Design Studio, so you need to have Qt SDK to complete the work. Qt Design Studio exports a fully compilable CMake project, which you can open, for example, in Qt Creator. If there are extra dependencies needed, Qt Design Studio will insert those into the CMake files.


You can find demos/examples and test data [https://git.qt.io/public-demos/qtdesign-studio here].
== Where to get it ==
Qt Design Studio is available in a 100% free community edition and a commercial version, both of which contain components and features to improve productivity.


Here is a public test matrix [[Qt Design Studio test]];
You can get Qt Design Studio from either of the following sources


== Tutorials ==
# Head to our [https://www.qt.io/product/ui-design-tools Qt Design Studio] landing page, and click the “Try Qt for Free” button. This will take you to download page. Click "Download Qt Online Installer" then you can start your 10-day trial. You can always contact us if you want to extend the trial. This will give you the full commercial license. Visit [https://www.qt.io/download-open-source here] for a free community edition.
* [https://qt-blog-uploads.s3.amazonaws.com/wp-content/uploads/2018/06/QtDesignStudio_tutorial_resources.zip Tutorial sources]
# Download the offline installer from the Qt Account page (restricted access)
* [https://www.youtube.com/playlist?list=PLizsthdRd0Ywkf3hf8cLfpaiuZR_-SMFs Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Playlist, Parts 1-5)]
# Build the Qt Design Studio from sources.
** [https://youtu.be/aV6kFxH3Xws Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 1)]
** [https://youtu.be/Z3uPoe-4UAw Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 2)]
** [https://youtu.be/9AjvxoeqAKo Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 3)]
** [https://youtu.be/8pJpdMwLaAg Learn to use Qt Design Studio by Building an Instrument Cluster for Your Car HMI (Part 4)]
** [https://youtu.be/U91nAFReAoU 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]]
== FAQ and Troubleshooting ==
Are you new to Qt Design Studio and having issues with the tool ? Please take a look at our technical FAQs:


== Reporting bugs and issues ==
* CMake exporting issues: [[QtDesignStudio/CMakeExporter]]
* Qt for MCUs related questions: [[QtDesignStudio/MCU FAQ]]
* The official Qt Design Studio manual is found [https://doc.qt.io/qtdesignstudio/index.html here].
* You can find demos/examples and test data [https://git.qt.io/public-demos/qtdesign-studio here].
* Localisation issues? Please see [[QtDesignStudio/Localization FAQ]].
* How does Qt Design Studio store its settings and useful settings without UI [[QtDesignStudio/Settings FAQ]].
* The project format of Qt Design Studio and related issues [[QtDesignStudio/QMLProjectFileFormat]]


The public bugtracker for Qt Design Studio can be found [https://bugreports.qt.io/projects/QDS/issues, here].
== Building and contributing ==
Feel free to report any bugs you find and add suggestions.
If you want to build the Qt Design Studio from sources, you need to get the sources first. You can get them from  [https://github.com/qt-creator/qt-creator here].
Qt Design Studio is based on Qt Creator. Please checkout the contribution guidelines: https://www.qt.io/community/contribute-to-qt


== Source Code ==
We have online version of the build instructions which you need to follow up to build your own version of the Qt Design Studio, the guide is here: [[QtDesignStudio/build QDS]].


Many of the features on 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].
If you want to be part of the Qt Design Studio work, we welcome contributions with open arms. For open issues we have a bug tracker: [https://bugreports.qt.io/projects/QDS/issues here], please report all found anomalities through that link.


== Releases ==
Qt Design Studio needs a special kit to operate, to make your Qt kit functional with Qt Design Studio it needs couple power-ups. For detailed instructions please see here: https://wiki.qt.io/Install_new_kit_to_Qt_Design_Studio#Qt_Version]


[[QtDesignStudio-changelog1.1|Qt Design Studio 1.1 changelog]]
==Release Notes==
 
Here you can find the release notes of published Qt Design Studio versions.
[[QtDesignStudio-changelog1.1.1|Qt Design Studio 1.1.1 changelog]]
*[[QtDesignStudio-changelog4.6.2|Qt Design Studio 4.6.2]]
 
*[[QtDesignStudio-changelog4.6.1|Qt Design Studio 4.6.1]]
[[QtDesignStudio-changelog1.2|Qt Design Studio 1.2 changelog]]
*[[QtDesignStudio-changelog4.6.0|Qt Design Studio 4.6.0]]
 
*[[QtDesignStudio-changelog4.5.1|Qt Design Studio 4.5.1]]
[[QtDesignStudio-changelog1.3|Qt Design Studio 1.3 changelog]]
*[[QtDesignStudio-changelog4.5.0|Qt Design Studio 4.5]]
*[[QtDesignStudio-changelog4.4.0|Qt Design Studio 4.4]]
*[[QtDesignStudio-changelog4.3.0|Qt Design Studio 4.3]]
*[[QtDesignStudio-changelog4.2.0|Qt Design Studio 4.2]]
*[[QtDesignStudio-changelog4.1.0|Qt Design Studio 4.1]]
*[[QtDesignStudio-changelog4.0.0|Qt Design Studio 4.0]]
Looking for older releases, please see [[QtDesignStudio/Releases/Archive]]
==Release Blog Posts==
Here you can the release blog posts for recent Qt Design Studio releases and learn what was new in recent releases.
* https://www.qt.io/blog/qt-design-studio-4.6-released
* https://www.qt.io/blog/qt-design-studio-4.5.1-released
* https://www.qt.io/blog/qt-design-studio-4.5-released
* https://www.qt.io/blog/qt-design-studio-4.4-released
* https://www.qt.io/blog/qt-design-studio-4.3.2-released
* https://www.qt.io/blog/qt-design-studio-4.3.1-released
* https://www.qt.io/blog/qt-design-studio-4.3-released
* https://www.qt.io/blog/qt-design-studio-4.2-released
* https://www.qt.io/blog/qt-design-studio-4.1-released
* https://www.qt.io/blog/qt-design-studio-4.0-released

Latest revision as of 11:16, 12 November 2024

What is Qt Design Studio

Qt Design Studio is a UI design and development environment that enables designers and developers to prototype and develop complex and scalable UI rapidly. Key items of the Qt Design Studio are

  • It's a visual editor for QML user interfaces
  • It works with commercial and open source Qt versions
  • It used mostly by front-end developers and technical artists to create functional QML user interface layer for Qt applications.

For detailed information about Qt Design Studio, please refer to our online documentation at: https://doc.qt.io/qtdesignstudio/

Working with other tools

Qt Design Studio works seamlessly with other design tools. On the 2D side our main focus is compatiblity with the Figma through our own Figma plugin, see more here: QtDesignStudio/FigmaPlugin.

Figma is not the only thing we support. There are other tools like Photoshop and Sketch for example. Detailed information can be found here: QtDesignStudio/OtherBridges.

On the 3D side, we are compatible with all leading file formats, such as FBX, GLTF, and Collada. Detailed information about compatibility with 3D tools can be found here: QtDesignStudio/3DTools.

You cannot complete the whole application with Qt Design Studio, so you need to have Qt SDK to complete the work. Qt Design Studio exports a fully compilable CMake project, which you can open, for example, in Qt Creator. If there are extra dependencies needed, Qt Design Studio will insert those into the CMake files.

Where to get it

Qt Design Studio is available in a 100% free community edition and a commercial version, both of which contain components and features to improve productivity.

You can get Qt Design Studio from either of the following sources

  1. Head to our Qt Design Studio landing page, and click the “Try Qt for Free” button. This will take you to download page. Click "Download Qt Online Installer" then you can start your 10-day trial. You can always contact us if you want to extend the trial. This will give you the full commercial license. Visit here for a free community edition.
  2. Download the offline installer from the Qt Account page (restricted access)
  3. Build the Qt Design Studio from sources.

FAQ and Troubleshooting

Are you new to Qt Design Studio and having issues with the tool ? Please take a look at our technical FAQs:

Building and contributing

If you want to build the Qt Design Studio from sources, you need to get the sources first. You can get them from here. Qt Design Studio is based on Qt Creator. Please checkout the contribution guidelines: https://www.qt.io/community/contribute-to-qt

We have online version of the build instructions which you need to follow up to build your own version of the Qt Design Studio, the guide is here: QtDesignStudio/build QDS.

If you want to be part of the Qt Design Studio work, we welcome contributions with open arms. For open issues we have a bug tracker: here, please report all found anomalities through that link.

Qt Design Studio needs a special kit to operate, to make your Qt kit functional with Qt Design Studio it needs couple power-ups. For detailed instructions please see here: https://wiki.qt.io/Install_new_kit_to_Qt_Design_Studio#Qt_Version]

Release Notes

Here you can find the release notes of published Qt Design Studio versions.

Looking for older releases, please see QtDesignStudio/Releases/Archive

Release Blog Posts

Here you can the release blog posts for recent Qt Design Studio releases and learn what was new in recent releases.

Retrieved from "https://wiki.qt.io/index.php?title=QtDesignStudio&oldid=43177"