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:
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 :-)
Author
Juha Vuolle
Would you like to know more? contact:
Tom Hannelius
Director, Software Consulting
firstname.lastname(at)insta.fi
