Overview

With Figma to Qt, you can convert Figma designs into QML code and preview the converted design.

The plugin Home tab.

You can review the generated QML code side-by-side with the converted design. The plugin suggests changes that you can make in Figma to improve the generated code. Typically, this means changing or removing some properties.

A converted layer in the live preview.

When you are ready, you can download the code and assets packaged into a QML project.

For more information about QML, see The QML Reference and take the Introduction to QML course at the Qt Academy. You need a Qt account to enroll to courses.

How does the conversion work?

Figma to Qt converts Figma designs into QML files as follows:

• Layers become QML types
• Components and their instances become QML components and their instances
• Layer properties become QML properties

How do you solve conversion issues?

Figma to Qt converts Figma layers into QML types as follows:

• Frame and rectangle layers into a suitable Rectangle type: basic Rectangle, RectangleShape, or Qt for MCUs Rectangle
• Components into a suitable Rectangle type, Item, or Image
• Group layers into Item
• Text layers into Text
• Variants into a suitable QML type that corresponds to a component set in Figma and all its variants, which become states

If a Figma layer has properties that have no equivalent in QML, it is converted into an asset. Also, an Image QML type is created for it. However, assets consume more resourse on devices than code. Therefore, removing properties can improve code quality because Figma to Qt can convert the layer into a more suitable QML type.

A list of conversion issues in the plugin.

The plugin shows information about properties that are not supported, and offers automatic fixes for some of them.

For more information, see Conversion issues.

How does the live preview work?

The selected Figma component is converted to QML and uploaded to the live preview, which is a web application. If you change the design in Figma, you can instantly see the changed QML in the live preview.

For the converted design to look right in the live preview, it needs access to the fonts you use. Google fonts are automatically uploaded to the live preview. If you use other fonts, the live preview asks you to upload the font files. You only need to upload each font once as the live preview stores it until you clear the browser cache.

What can you do with the code?

Once you're satisfied with the converted design, you can download the QML files and assets to your computer. Figma to Qt creates a QML project with a .qmlproject project configuration file for you. It packages all the necessary files as a ZIP file and saves it in the Downloads folder on your computer. You can extract it to any folder.

The extracted files shown in the file explorer.

You can open the QML project in Qt Design Studio, Qt Creator, or some other integrated development environment (IDE) or code editor to deploy the UI on the target devices and to add the application logic, for example.

The generated project opened in Qt Design Studio.