Qt workflow issues: static positioning instead of layouts / anchors

Kailash

Hello everyone,

I’m relatively new to Qt/QML, so apologies in advance if this question is basic. I’m currently exploring a Figma → Qt workflow for building a desktop UI using Qt/QML. My goal is to design the UI in Figma and then generate QML using the Figma-to-Qt plugin, and continue development in Qt Creator / Qt Design Studio.

Environment

Qt Version: 6.10.2
Target Platform: Desktop (Linux)

My setup:

Qt Framework installed
Qt Creator installed
Qt Design Studio installed
Figma with the Figma → Qt plugin

However, I’m facing some issues with the generated output and the overall workflow.

Problems I'm encountering

Static positioning in generated QML

The generated QML mostly uses manual positioning like:

x: 120
y: 80
width: 300
height: 100

instead of layout-based approaches such as:

anchors.fill: parent
RowLayout
ColumnLayout
Layout.fillWidth
Layout.fillHeight

Because of this, the UI behaves more like a static design export rather than a responsive QML layout.

Layouts from Figma not translating well to QML

Even when using Auto Layout in Figma, the generated QML doesn’t seem to convert into proper Qt layouts (RowLayout, ColumnLayout, anchors, etc.). It still produces mostly fixed x/y positioning.

Local preview / server confusion

The plugin seems to require some form of local preview/server, but it's not very clear how or where this should be running. I’m not sure if something additional needs to be installed or started locally.

What I'm trying to achieve

Ideally, I want a workflow like this:

Design UI in Figma
Generate QML from the design
Continue development in Qt Creator using proper layouts and anchors

The UI I'm designing is a desktop dashboard-style application (similar to a ground control station), so maintaining responsive layouts is important.

Ideally, the generated QML would rely more on Qt layout systems such as:

RowLayout
ColumnLayout
GridLayout
anchors.fill
Layout.fillWidth / Layout.fillHeight

instead of fixed x and y positioning.

My questions

What is the recommended workflow when using Figma designs for Qt/QML applications?
Is there a way to structure designs in Figma so that layouts translate properly into Qt layouts instead of fixed positioning?
Are there specific Figma practices (Auto Layout, constraints, frames, etc.) that help generate better QML output?
What is the correct way to set up or run the local preview/server required by the plugin?
Is the Figma → Qt workflow mainly intended for static UI generation, with developers expected to refactor layouts manually afterward?

Since I’m still learning Qt and QML, any guidance, best practices, or examples would be really helpful.

Thanks in advance for your help!

Bob64

I have zero practical experience with Figma, but was reading up on it recently as we have a UX team that uses it and I wanted to understand a little about QML support. From what I understand, it has something called Constraints that map to anchors:

https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize

And then there are "AutoLayouts" that I think will generate QML layouts:

https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout
https://help.figma.com/hc/en-us/articles/360039957934-Combine-layout-guides-and-constraints

KH-219Design

I do software consulting on various projects, and I personally have written QML by hand while "copying" (the look) from a given Figma project that was handed off to me. I have never used the Figma Qt plugin.

FWIW, I have had two different UX designers (experts at Figma) on two different projects comment to me that they gave up on trying to use the Figma Qt plugin (and hence they reverted to writing the QML by hand).

Nonetheless, I am now subscribed to this thread because I, too, would love to hear anyone's positive experience or any expert tips that could make it worthwhile to use the plugin.