Using Qt Bridge for Sketch

Organizing Assets

To get the best results when you use Qt Bridge for Sketch to export designs from Sketch to Qt Design Studio, follow these guidelines when working with Sketch:

  • Arrange your sketch document in artboards, layers, and groups. The QML code generated in Qt Design Studio corresponds to the structure of your Sketch document.
  • Qt Bridge for Sketch supports document symbols and symbol overrides. Each symbol is exported as a QML component, and each symbol instance is generated as a respective component instance in the generated QML. The symbol overrides are exported as values of properties for the components. For example, if you use symbol overrides to specify the text for each button instance, it is exported as a value of the text property.
  • Store all assets in the scalable vector graphics (SVG) format to be able to easily rescale them for different screen sizes and resolutions.

To use the fonts that you use in Sketch also in Qt Design Studio, you need to load them to Qt Design Studio. Qt Design Studio deploys them to devices when you preview the UI. For more information, see Using Custom Fonts.

Using Artboards

The relationships between artboards and layers are preserved when you export designs from Sketch and import them into Qt Design Studio.

An artboard can only be exported as a component. That is, a separate QML file that contains all the artwork on the artboard, except layers that are set to be skipped or exported as child items.

A component is a single QML file that can contain other child items with assets or text.

To use the contents of an artboard as a single image in the UI, you can merge the groups and layers when you export them. During import, the contents are flattened into one PNG file. The merge is done in a way that enables you to change the groups and layers in Sketch and then export and import the artboard again. This is an easy way to create a reference image of how the final UI should look like, for example.

Place different parts of the UI, such as menus and pop-ups, on separate artboards to be able to export them as components or children and to import them as QML and PNG files that you can drag and drop to the working area in Qt Design Studio Design mode while creating a UI.

Using Layer and Groups

When you use Qt Bridge for Sketch to export your designs, you will determine how you want each layer or group to be exported: as merged or as child. Each layer or group represents a separate image in the UI when it is exported as a child. The asset of the layer or group is merged to its parent group or artboard if it is exported as merged.

You can select the asset format and DPI to use for each image in Settings > Asset Settings.

Exporting Assets

By default, layers are exported as follows:

  • Artboards are always exported as components or skipped.
  • Asset layers are exported as merged.
  • Text layers can only be exported as child or skipped.
  • A hotspot layer can only be exported as child or skipped. It is always exported as an instance of the MouseArea QML type.
  • A symbol instance layer can only be exported as child or skipped.

You can export assets using the default settings and make all the changes later in Qt Design Studio. If you are familiar with the QML syntax, you can modify the settings to tailor the generated QML to a certain degree. For example, you can specify the QML type or Qt Quick Studio Component to use for a component or layer. If you have drawn an arc that you mean to animate, you can export it as an Arc component to avoid having to replace the arc image with an Arc component in Qt Design Studio. Or you could export a button as a Qt Quick Controls Button type.

Specifying Settings for Exporting Assets

To export your design using Qt Bridge for Sketch:

  1. Qt Bridge for Sketch automatically proposes identifiers for all groups and layers that you can change in the QML ID field. The ids will be made unique when the layer and the respective artwork is imported into Qt Design Studio.
  2. In the Export As field, select the export type for the group or layer:
    • Component creates a separate QML file for the selected symbol that contains all the artwork in it, except layers or groups that are set to be skipped or exported as child items.
    • Child creates a separate PNG file for each asset of the selected group or layer, with references to the images in the component file.
    • Merged merges the selected groups and layers into the parent artboard or group as one item.
    • Skipped completely skips the selected layer.
  3. In the QML Type field, specify the QML type or Qt Quick Studio Component to morph this layer into. The generated component will be of this type. For example, if you drew a rectangle, you can export it as a Rectangle component. You can provide the import statement of the module where the QML type is defined in the Imports field.
  4. In the Imports field, enter additional import statements to have them added to the generated QML file. For example, to use Qt Quick Controls 2.3, you need the import statement QtQuick.Controls 2.3 and to use Qt Quick Studio Components 1.0, you need the import statement QtQuick.Studio.Components 1.0. You can also import a module as an alias.
  5. In the Properties field, specify properties for the QML type. You can add and modify properties in Qt Design Studio.
  6. Select the Alias check box to export the item generated from this layer as an alias in the parent component.
  7. Select the Clip check box to enable clipping in the type generated from the layer. The generated type will clip its own painting, as well as the painting of its children, to its bounding rectangle.
  8. Select the Visible check box to determine the visibility of the layer.
  9. Select Export to copy your assets to the export path you specified.
  10. When the exporting is done, select OK.

All the assets and metadata are copied to the directory you specified. This might take a little while depending on the complexity of your project.

You can now create a project in Qt Design Studio and import the assets to it, as described in Creating Projects and Importing Designs.

Specifying Export Path and Asset Format

To specify export path and asset format, select Settings > Asset Settings.

  1. By default, Qt Bridge for Sketch exports assets to a directory named after your Sketch file located inside the parent directory of the Sketch file being exported. You can change the export path in the Export Path field.
  2. You can select the default asset format and DPI to use for each layer. These settings are overridden by the layer export settings from the Sketch app. That is, if the layer is made exportable in the Sketch app, the respective asset format and DPI settings are preserved.

Available under certain Qt licenses.
Find out more.