Using Qt Bridge for Figma

Organizing Assets

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

  • Use pages for different purposes, such as sketching for trying out ideas, components for creating UI components, assets for images that you use in the components, and screens for building the UI screens using components and assets.
  • Arrange each page into frames. When you are happy with a design, move it from the sketching page to the components page and use it in screens. When you export your assets, you can skip all frames that you don't want to be part of the final UI, to avoid cluttering the Qt Design Studio project. The QML code generated in Qt Design Studio corresponds to the structure of your Figma document.
  • Qt Bridge for Figma supports Figma components. Each Figma component is exported as a QML component, and each Figma component instance is generated as a respective QML component instance in the generated QML.
  • Create components in Figma and export them to Qt Design Studio before you start making instances of them. In Qt Design Studio, add functionality to the components, such as button states and then bring them back to Figma as assets. If you use functional QML components in Figma, you will find it easier to merge new iterations of the design to Qt Design Studio and continue to build the screens there.
  • Use descriptive and unique ids to avoid duplicate QML ids after exporting assets and importing them to Qt Design Studio.

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

Using Frames

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

A frame can only be exported as a component or skipped. A component will be imported as a separate QML file that contains all the artwork on the frame, except layers that are set to be skipped or exported as child items. The child items can contain graphical assets or text.

Exporting Assets

To export your design using Qt Bridge for Figma:

  1. Qt Bridge for Figma automatically proposes identifiers for all groups and layers that you can change in the QML ID field. Use unique and descriptive ids to avoid duplicate QML ids 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:
    • Child exports each asset of the selected group or layer a separate PNG file, with references to the images in the component file.
    • Merged merges the selected groups and layers into the parent frame 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 component that is generated during import 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 QML Imports field.
  4. In the QML 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 QML 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 assets and metadata to export your design.
  10. When the exporting is done, select OK.

Qt Bridge for Figma exports everything into a single archive. Before importing the project into Qt Design Studio, you have to manually extract the archive. Then you can import the .metainfo into a project in Qt Design Studio, as described in Importing Designs.

Available under certain Qt licenses.
Find out more.