Turning Figma Design into working Controls with Qt - Demo

Just wanted to share some work that some people may be interested in.

I just published a project i have been working on using Figma and exporting the design to Qt Design Studio (disclaimer, i work for Qt and this is my day job), resulting in a set of fully working UI controls.

However, the file itself and the topics contained within it might be interesting to a wider audience than just users of the Qt Framework, so i would like to share it here with you too!

The file itself can be found here at our community page, where you would also find our plugin and a way to apply for the Design Studio evaluation license if you wanted to try the import process yourself.

I discuss the topic in more detail at my blog post here:

If anyone has any questions about this project i would be glad to discuss it further.

Happy Hacking ; )

Brook

1 Like

The developers from my organisation are currently working with Qt widget and they are experience difficulties with implementation of the designs I make in Figma. Mainly that some designs are very time consuming to achieve or simply can’t be made. Small things like adding an icon to a button or adjusting the margin between an icon and a text can be difficult.

Do you know if there exists something similar for Widget?

Unfortunately not, Qt Widgets are done purely with C++, I work on Qt Design Studio, which uses QML as the UI Design language. Our design tool plugins like the Figma Bridge generate QML, which is much more designer friendly. Translating UI design to Qt Widgets is a painful task, i know from experience.

I would recommend looking into QML, maybe your developers have concerns about it, or the work required to port all the work into QML but it is much nicer for designing with and of course can be easily integrated into any Qt Application.

1 Like

Thank you for the reply :slight_smile:

I feel like I maybe could get around some of the problems, by letting the Widget components dictate the design, and make a Figma library with elements from Widget to save the developers from adjusting the standard components to a custom design?

I have read and seen some comparisons and as far as I can understand, Qt do have some advances over QML, mainly the responssiveness?

Widgets can be custom styled, it just involves a much more developer oriented approach, using either css or QStyle. If they’re not explicitly styled i think they will always take the native platform style. So you could create a figma pack with the standard platform styles and then your design would match the output.

I think the idea that widgets are more performant than QML is a bit outdated, it may be true to some extend but the tradeoff of accessibility for less technical designers is worth it and for most use cases the performance of QML is totally adequate. Since Qt6 QML can be compiled into C++ at runtime anyway.

This topic was automatically closed after 30 days. New replies are no longer allowed.