Add designs from Figma to Qt

You can use Figma to Qt to convert a Figma design into QML and download it as a Qt Quick UI project (.qmlproject), or ask the designer to download it for you.

To continue development in Qt Creator, you can:

• Open the UI project in Qt Creator.
• Convert the UI project into an application.
• Add the UI project contents into an existing Qt Quick application project.
• Create a new Qt Quick Application project and add the UI project contents to it.

Integrate Figma to Qt content into Qt Quick applications

If you have an existing Qt Quick application project, you can integrate the downloaded content to it.

If you use CMake for building your project, set the option to generate CMakeLists.txt files in Figma to Qt. The plugin generates a CMakeLists.txt for each QML module that it creates, such as the DesignTokens module and the FontManager module for Qt for MCUs projects.

Figma to Qt does not currently generate a top-level project CMakeLists.txt file. Therefore, you must add all QML files that are not part of a module manually to the project CMakeLists.txt file.

To add a .qmlproject to a Qt Quick application project:

1. In Figma, open the Figma to Qt plugin in your design file.
2. Go to Settings > Code, and then select Generate CMakeLists.txt.

   

3. Select Download to download the design as a QML project.
4. Extract the downloaded ZIP file to the your project folder.
5. In Qt Creator, open the Qt Quick application project.
6. Edit the project CMakeLists.txt file to add all files that are not a part of a module as resources.

Create a Qt Quick Application project for Figma to Qt content

Qt Quick Application projects that you create with Qt Creator 20.0 or later have some automation for integrating a .qmlproject. Copy the project contents into the importedcontent folder, and Qt Creator will automatically use the CMakeLists.txt file that you add there.

To create a Qt Quick Application project for Figma to Qt content:

1. In Qt Creator, create a Qt Quick Application project.
2. Extract the downloaded ZIP file to the importedcontent folder in your project folder.
3. Create a CMakeLists.txt file for the Figma to Qt content and store it in the importedcontent folder.

Edit converted files in the Design mode

To edit the QML code in the Design mode, also set the option to generate .ui.qml files in Figma to Qt and activate the Qt Quick Designer extension in Qt Creator.