Importing 2D Assets

You can import 2D assets, such as images, fonts, and sound files, to Qt Design Studio to use them in your projects.

To import an asset, drag-and-drop the external file containing the asset from, for example, File Explorer on Windows, to Form Editor, Navigator, or Text Editor. Alternatively, select Library > Assets > and follow the instructions in the Asset Import dialog. You can also multiselect several external asset files to drag-and-drop them to Qt Design Studio simultaneously.

The imported images will appear in Library > Assets. If you initiate the import by dragging the assets to Form Editor, they are also added to your projects as image components, and you can view them in Form Editor and Navigator. If you drag an external font file to Form Editor, it will be added to your project as a text component. Other imported assets, such as sound files, will only appear in Library > Assets, and you can then drag-and-drop them to a suitable view.

Importing Designs From Other Design Tools

"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 assets exported in Qt Bridge to Qt Design Studio projects:

  1. Select File > New 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 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.