Generate CMake configuration files

Developer topic

QML projects (.qmlproject) are useful for creating user interfaces. To use the projects for application development with Qt Creator or some other development tool, you have to add:

• A CMakeLists.txt project configuration file
• C++ code (.cpp)
• Resource files
• Code needed for deploying applications to devices

For more information about integrating QML and C++, see Qt: Overview - QML and C++ Integration.

Create CMakeList.txt files for QML modules

Figma to Qt generates a CMakeLists.txt file that contains a qt_add_qml_module() call for each downloaded QML module. You can include these files from the main CMakeLists.txt file of your project.

To create CMake configuration files for QML modules:

1. In the plugin, select (Settings).

   

   The Code generation section in the Settings page in the plugin.

2. In Code generation, select Generate CMakeLists.txt.
3. Select (Download) to include CMakeLists.txt files in the dowloaded package.

qt_add_qml_module(DesignTokens
    URI DesignTokens
    QML_FILES
        MainScreen.qml
        Button.qml

    RESOURCES
        assets/icon.png
        assets/icon@2x.png
)

make_minimum_required(VERSION 3.16)

project(MyApp LANGUAGES CXX)

find_package(Qt6 REQUIRED COMPONENTS Quick)

# Include the generated module
add_subdirectory(DesignTokens)

# Link to your application
qt_add_executable(MyApp main.cpp)
target_link_libraries(MyApp PRIVATE DesignTokens)