Importing 2D Assets

"UI imported into Qt Design Studio"

Qt Bridge enables you to export assets and then import them to a Qt Design Studio project as image and QML files for editing in Form Editor. If you make changes to your design in the design tool that you originally used to create it, you can merge the changes into existing QML files without overwriting the changes you have made in Qt Design Studio. For more information, see Exporting from Design Tools.

Note: Attempting to import assets exported on another system might fail.

The following instructions use an empty project as an example. For more information about the options you have, see Creating Projects.

To import designs to Qt Design Studio projects:

  1. Select File > New File or Project > General > Qt Quick Application - Empty > Choose, and follow the instructions of the wizard to create an empty project.
  2. In Projects, double-click Screen01.ui.qml to move to the Design mode.
  3. Select Library > Assets > .
  4. Select the folder where you exported the assets.
  5. Select Exported Assets (*.metadata) in the dropdown menu to filter .metadata files.
  6. Select a .metadata file to import, and then select Open.
  7. Select Details next to the Metadata Import Paths field to display the path where the metadata is imported from.

    "Asset Import dialog"

  8. Select Details next to the QML/Asset Export Paths field to display the paths to copy the assets to.
  9. In the QML field, you can change the folder to copy the QML files to.
  10. In the Assets field, you can change the folder to copy the image files to.
  11. Select the Create sub directory for each metadata check box to copy the directory structure from the metadata file to Qt Design Studio.
  12. Deselect the Import assets check box if you only want to create QML files.
  13. Deselect the Generate QML check box if you only want to import assets.
  14. Select the Merge QML check box if you have imported the assets before and want to merge the changes into existing QML files instead of overwriting the existing files.
  15. Select Import to import the QML files and assets. This might take a little while for complex projects.

The imported assets are displayed in Library > Assets as PNG images. The components that you specified in the design tool are displayed in Library > Components > My Components as well as in the Projects view as separate QML files. To start using them, drag-and-drop them from Library to Form Editor or Navigator.

Note: The layer that was the bottom layer in the design tool becames the top layer in Navigator to reflect the QML code model. You can view the QML code in Text Editor.

After importing the metadata files, wait a few moments to allow all imported assets to appear in your project files before selecting your metadata filename from Assets > .

If asset importer conflicts, warnings, and errors are displayed in the Asset Import dialog while importing, fix the issues in design tool and export the assets again.

Qt Bridge for Adobe Photoshop Videos

For more information, watch a video tutorial and webinar about using Qt Bridge for Adobe Photoshop that are also accessible from the Tutorials tab of the Welcome mode:

  • Building an Instrument Cluster for Your Car HMI, Part 1

    You can access the Cluster tutorial source files in the Examples tab.

  • From Photoshop to Prototype with Qt Design Studio

Qt Bridge for Sketch Tutorials

For more information, read the tutorials about using Qt Bridge for Sketch that are also accessible from the Tutorials tab of the Welcome mode:

Available under certain Qt licenses.
Find out more.