Skip to main content

Figma to Qt 1.1: Test Design Live, Ship It Anywhere

Comments

Click, drag, and tweak your design in Live Preview before a developer builds it. Ship the same workflow to flagship touchscreens and microcontrollers. And get more of what you draw back as native QML.

Your design should reach the product looking exactly the way you crafted it, with less back-and-forth and more time for the experience that actually matters. That's what Figma to Qt is for. It's an assistant built into Figma that helps you design Qt applications without ever leaving your canvas. The new 1.1 takes it further.

This release turns Live Preview into a place where you can actually test and play with your work, brings Figma to Qt to microcontroller projects, and gives you more freedom in what you design. The result is simple: more of what you design in Figma reaches the device just the way you imagined it.

Here's what's new.

What’s new in 1.1

Test Your Design Before It Reaches A Developer

Live Preview renders the actual QML generated from your design, right in the browser. It's the closest you can get to seeing your screen on the device without building it.

In 1.1, the preview behaves is interactive. Buttons respond to clicks, sliders can be dragged, and switches can be toggled, so you can test an interaction while you're still designing it. You can feel how an interaction works while you're still in Figma, and catch the awkward ones before a developer spends a day building them.

The bigger change is the editable QML code view. It used to be read-only: good for checking what was generated, not for trying things out. Now you can change a color, adjust a size or try a different value, and watch the preview update in real time. Think of it as a scratchpad. It's a fast way to explore implementation details without turning every “what if?” into a developer handoff."

Edits in Live Preview stay in your session. They never write back to your Figma file, which remains the single source of truth. Experiment as much as you like. Your design stays exactly as you left it.

 

One Workflow, From High-performance Hardware to Microcontrollers

Most product teams don't design for a single device. They design for a portfolio: a flagship line on full-power hardware and an entry-level line on low-cost hardware, often built by the same design team from the same Figma library. Figma to Qt 1.1 gives you one consistent workflow across both ends of that range.

Platform Reach

At the high end, 1.1 adds support for Qt 6.12 LTS (Long-Term Support) alongside Qt 6.10. If your flagship products run on MPUs, build with confidence with Qt 6.12 LTS. Figma to Qt can now target Qt’s first Cyber Resilience Act (CRA) compliaint Qt 6.12, giving your team a stronger foundation for compliance.

the code generated from your design now targets the version your team relies on for production, one that meets the known requirements of the Cyber Resilience Act (CRA).

At the entry level, Figma to Qt now supports Qt for MCUs. Appliances, industrial controls, and vehicle clusters often run on microcontrollers, and until now, those projects sat outside the Figma to Qt workflow. Figma to Qt 1.1 extends the workflow to microcontrollers, with support starting at Qt for MCUs 2.12 LTS.

To convert your design to code for Qt for MCUs, open Settings > Code in the Figma to Qt plugin and turn on Use Qt for MCUs compatible types." like the image

Whether a screen is headed for a premium touchscreen or an entry-level display, you design it the same way, in Figma.

 

Design The Way You Want, Get Native QML Back

Figma lets you draw almost anything. Not all of it has a direct equivalent in QML, and not all of it makes sense on an embedded device. But the more Figma objects we support natively in QML, the more freedom designers will have in their design, and the more performant code will be generated from Figma to Qt.

This release closes more of that gap. Figma constraints now become anchors in QML. The responsive behavior you set up in Figma carries over into the implementation rather than being rebuilt by hand.

Ellipses and arcs now convert to native QML types instead of images. Turn your gauges and badges into native QML and see them in Live Preview.

You can now also export assets as SVG in addition to PNG and JPG. For vector-friendly artwork, SVG gives you scalable assets that stay sharp across different resolutions.

This work doesn't end with 1.1, and we will keep narrowing the distance between what Figma allows and what QML supports.

What’s next

Every release of Figma to Qt works toward the same thing: more of your design reaching the device the way you drew it, with less rework in between. This new release gives you more freedom in what you draw, reaches more of the hardware your products ship on, and lets you test your work before anyone writes a line of code.

Start using 1.1 today. And keep telling us what's getting in your way, and we'll research how to help with it.

 

Figma to Qt Community CTA

 

 

 

Comments

Subscribe to our blog

Try Qt 6.12 Now!

Download the latest release here: www.qt.io/download

Qt 6.12 LTS is now available, with new features and improvements for application developers and device creators.

We're Hiring

Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.