Asset Creation with Other Tools

Typically, you as a designer would design a UI using imaging and design tools, such as Adobe Photoshop, Sketch, Figma, Blender, or Maya, and then send your design to a developer for implementation. You can use the Qt Bridge export tool to convert 2D assets into a metadata format supported by Qt Design Studio. You can use the export functionality of 3D graphics tools to save your 3D assets in a format that can be imported into Qt Design Studio.

You can import the 2D and 3D assets into Qt Design Studio for editing before you submit the UI to the developer for adding the functionality to the application.

If you want to make further changes to your components in the design tool, you can export the UI files back into the metadata format, which you can then import back into the design tool by using Qt Bridge. For example, you could create components in a design tool and export them to Qt Design Studio before you start making instances of them. In Qt Design Studio, you can add functionality to the components, such as button states and then bring them back to the design tool as assets. If you use functional Qt Design Studio components in the design tool, you will find it easier to merge new iterations of the design to Qt Design Studio and continue to build the components there.

The following image describes the workflow using Qt Bridge for Adobe Photoshop and Qt Design Studio:

The workflow consists of the following steps:

  1. Export your design from a design tool into the metadata format.
  2. Create a project in Qt Design Studio and import the metadata file to it.
  3. Edit the imported components and create more components in Form Editor and 3D Editor.
  4. Animate your design in Transition Editor or Timeline and Curve Editor.
  5. Create interactions in States and Connection View.
  6. Preview your design in real time, on the desktop or on a mobile or an embedded device.
  7. Optionally, export your components back into the metadata format that you can import back into the design tool by using Qt Bridge. You can continue to iterate your design this way until it is ready.

For more information, watch a video that shows how to perform the tasks above:

  • Exporting from Design Tools

    Export designs containing 2D and 3D assets into a metadata format that you can import to projects in Qt Design Studio.

  • Importing Designs

    Import assets that you exported from design tools to a Qt Design Studio project and edit them in the Design mode to create a UI.

  • Exporting Components

    Export UI files (.ui.qml) back to the metadata format and PNG assets to generate native file formats in design tools using Qt Bridge.

Available under certain Qt licenses.
Find out more.