Whitepaper

From Figma to a working device, without losing the design.

We rebuilt a real embedded dashboard twice, by hand and with the Figma to Qt plugin, to find out what design-to-code automation really delivers.

Download the whitepaper

Free access. No form required.

UXDivers

Created in collaboration with Qt.

This research explores practical ways to improve the path from high-fidelity product design to production-ready Qt interfaces.

The problem

Design handoff is where quality quietly erodes.

Turning a high-fidelity design into production code requires developers who are both methodical and have a strong eye for visual detail. Small misalignments, incorrect spacing, or the wrong type weight are enough to erode the perceived quality of an embedded UI, and closing that gap traditionally means continuous back-and-forth between design and development to resolve ambiguity as it comes up.

Automated design-to-code tooling promises to remove some of that dependency. But the real question isn't whether it can generate code, it's whether it can generate code teams can actually use.

What was evaluated

A real application. Two implementation paths.

We evaluated the Figma to Qt plugin using an embedded dashboard created for The Climate Box, a platform that helps agricultural operators understand microclimatic frost risk. The application includes dashboards, navigation, settings, status indicators, charts, gauges, and map-based visualizations

Manual build

Every design token, component, and screen hand-coded in QML, no plugin, no generated code.

Design tokens transcribed by hand

Custom components built from scratch

Full backend wiring for a dynamic, functional app

Plugin-assisted build

The same design exported through the Figma to Qt plugin wherever it added value, with manual work only where the plugin fell short.

Design tokens, components, and screens generated as QML

Complex components (map, charts, gauges) still built by hand

Interactive controls wired manually after export

The application was validated on a Toradex Verdin iMX8M Plus module, using a realistic embedded hardware configuration.

What you'll learn

A practical view of where automation helps, and where it does not.

In the whitepaper, we examine:

How Figma files need to be structured for reliable QML generation.

Which design patterns translate effectively into generated code.

Which components still require manual implementation.

The impact on development time and repetitive frontend work.

The level of visual fidelity achieved.

The readability and structure of generated QML.

The implications for maintainability and future product changes.

How generated UI can coexist with custom logic and manually developed components.

Where this workflow is most likely to create value.

Key findings

Four things worth knowing  before you adopt it.

Speed

15% faster

Reduction in overall development effort, concentrated in screen assembly.

Fidelity

High

Generated QML stayed remarkably close to the original Figma design, regardless of who ran the export.

Coverage

50% manual

Standard UI converted well, but maps, charts, and gauges had no built-in equivalent and were still coded by hand.

Maintainability

2.1x

Generated code was predictable, but more verbose, and harder to evolve safely as the design changes.

Read the full evaluation

Get the complete workflow comparison, technical analysis, implementation findings, and practical recommendations.

Download the whitepaper

About UXDivers

We help teams simplify complex software.

UXDivers is a product design studio working with product, design, and engineering teams to create better user experiences for complex applications.

We are especially valuable when a product involves:
• Expert users.
• Complex or technical workflows.
• Hardware-connected experiences.
• Multiple platforms.
• Legacy systems.
• Significant implementation constraints.
• A gap between product, design, engineering, and users.

Our work combines product strategy, UX/UI design, design systems, prototyping, and frontend implementation expertise.
We do not treat design and engineering as separate conversations.

Learn more about UXDivers