- Qt Creator Documentation
- Add designs from Figma to Qt
- Qt Creator 20.0.2

Add assets ◦ Annotate designs

# 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.

See also Create Qt Quick Applications, Convert UI projects to applications, How to: Build with CMake, Open projects, Designing Qt Quick UIs, UI files, and Figma to Qt.

Add assets ◦ Annotate designs