More Than Just a Figma of Your Imagination

Most user interface and user experience designers spend the bulk of their time developing virtual environments for users to interact with websites or smartphone apps. But there are many applications in which virtual and physical environments overlap, which adds a lot of additional complications. Consider a vending kiosk, for example. These machines have a digital interface that allows customers to browse through the products and make a payment, but when that transaction is complete, a robotics system has to spring into action to deliver the chosen item.

In cases such as this, there are often separate teams that work on the hardware and software side, and they have to work out how to make their systems play nice with one another. This division can cause a lot of delays and unnecessary revisions that could be avoided if both the virtual and physical interfaces were designed by the same group.

Dave Vondle is an electrical engineer that spends a lot of time designing user interfaces in Figma, which is an application meant to enable collaboration in creating interface designs. In a recent kiosk project, Vondle needed to build an interface that had both digital and physical components. Unfortunately, Figma does not support communication with other software or hardware platforms, making this integration challenging.

In order to get around this problem, Vondle developed a tool called Figproxy. This software is designed to bridge the gap between Figma interfaces and hardware. It works with any device that is capable of communication over a serial connection, like Arduino development boards. The communications through Figproxy are bidirectional, so Figma can send data to physical hardware, and the hardware can also send data back to the interface.

As previously noted, Figma does not support these types of interactions. So to make it work, Vondle made use of an “on click” action available in the software. Specifically, by supplying a link that begins with the word “send” rather than “http,” the Figproxy software can intercept the message and recognize that it is meant for the hardware. Any data following that keyword will be transmitted to the hardware via a serial message. Similarly, any serial data transmitted by the hardware will be intercepted and converted to a keypress event by Figproxy, allowing the hardware to interact with the digital interface.

To give us an idea of what can be done with Figproxy, Vondle set up a few demonstrations. In one, a physical knob was spun back and forth, and an on-screen digital twin mirrored the movements. In another example, the color of an LED strip was changed by making adjustments to a virtual interface.

Figproxy definitely goes into the “hacky hack” category, and may not be the sort of system that everyone would feel comfortable using in a production device. However, it is a fantastic idea and looks like it could cut development time down significantly. Just don’t be too shocked if a future update to Figma causes Figproxy to stop working.