Figma QML Bridge Experiment Figma QML Bridge Experiment

By Juha Vuolle

05.06.2019

This is a writeup on a hack experiment to convert Figma designs directly to Qt QML.

Figma does what Google Docs did

My colleague Antti Sinnemaa, who I deem as one of the most gifted UI designers I know, is all about Figma and how it will revolutionize user interface design and possibly implementation. I’m no designer but sure enough, when toying around with Figma it indeed gives me similar vibes as I got back in 2013 when we started using Google Docs for collaborative editing (over more traditional editors). Collaborative simultaneous editing, highly responsive, and just modern. It also intends to shorten the design-to-code cycle and more broadly narrows the gap.

Opening up opens up

An interesting part is how Figma opens its APIs thus allowing custom integrations and converters from design-to-code and they even provide examples on github (Figma to React). One can easily query the design documents in JSON format, and this opens all sorts of possibilities: convert design to Unity code? Convert design to XAML markup? Convert design to Qt QML?

Figma to QML

Qt QML is Qt’s declarative markup language. At a glance, it is quite a match with what Figma does and hence Antti posed the question for me: how easily can one convert one to the other? As it turns out, at least the first steps are straightforward. The following figure illustrates the flow of what I implemented:

Result

With a total of approximately 80 lines of node/js code, I am able to convert rectangles in a QML document that a runnable QML application. This is illustrated by the video below, where the top left corner window is the Figma online editor and the top right corner window is the QML application (qmlscene used for convenience) that updates itself every few seconds (QML ‘Loader’ element under the hood) The middle white text area is the QML, and you can see how it changes as I change the design (watch -n 1 cat result.qml command used to display it)

 

To give some grasp (I’m planning to put the source code on github so no worries) of the code in all its hacking simplicity, here is how the Rectangle element is created:

// Function writes a single QML Rectangle element with indentation
function write_rectangle(out, rect, depth) {
    let ind = indentation(depth) 
    out.write(ind + 'Rectangle {\n');
    ind = indentation(depth + 1)
    out.write(ind + 'id: ' + "rec_" + rect.id.replace(":","_").trim() + "\n");
    out.write(ind + 'x: ' + (parseInt(rect.absoluteBoundingBox.x) * -1) + "\n"); 
    out.write(ind + 'y: ' + (parseInt(rect.absoluteBoundingBox.y) * -1) + "\n"); 
    out.write(ind + 'width: ' + rect.absoluteBoundingBox.width + "\n");
    out.write(ind + 'height: ' + rect.absoluteBoundingBox.height + "\n");
    out.write(ind + 'color: Qt.rgba(' + 
        rect.fills[0].color.r + "," +
        rect.fills[0].color.g + "," + 
        rect.fills[0].color.b + "," + 
        rect.fills[0].color.a + ")\n");
    ind = indentation(depth);
    out.write(ind + '}\n');
}

Conclusion

Figma to QML seems feasible. With a couple of hours of experimentation without any prior Figma experience I got the first conversions working, and one can see how to easily extend the functionality.

For doing proper fully supported converter however I am under no illusion the effort wouldn’t be way way larger as components are nested, in layouts, in layers, have visual effects and so on. I hope I find time to make more complete support to better understand the overall effort required - this was extremely fun to do :-)