Figproxy enables rapid prototyping of tangible user experiences by allowing Figma prototypes to talk to the external world. This article dives into what it is and why I made it.


Figproxy: A Free and Open Tool to Connect Figma and Arduino

May 6, 2024

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

link outside

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

asdfkjhasldfkjhas dflkjashdf aslkjdfh aslkdfjh

alkjsdfh askldfjh

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Test caption here

What Is Figproxy?

Figproxy is a utility that allows bidirectional communication between Figma and physical hardware for prototyping interactions that involve screens and physical elements like motors, lights and sensors. It's designed to talk to hardware prototyping platforms like Arduino.

Some potential use cases include:

  • Kiosks - Soda Machines, Jukeboxes, Movie Ticket Printers, ATMs

  • Vehicle UI - Control lights, radio, seats etc.

  • Museum Exhibits - Make a button or action that changes what is on the screen

  • Home Automation - Prototype a UI to trigger lights, locks, shades etc. And make it actually work

  • Hardware "Sketching" - Quickly test out functionality with a physical controller and digital twin before building a more complicated physical prototype

  • Games - Make a physical spinner or gameplay element that talks to a Figma game

It's really great if you have UX designers working in Figma already and want to quickly connect a design to hardware.

It's also really valuable if you want to get a prototype working in a matter of hours, not days. It's intended to be utilized when building-to-think right after a brainstorm sketch, before you spend a lot of time refining the design.

A two-hour "hardware sketch" of a handheld device

A two-hour "hardware sketch" of a handheld device for triggering screens in Figma.

As a demonstration, I have supplied a couple of examples in the Github Repo: One where I have a Figma prototype that allows you to choose the colors that an LED strip lights up. The other is a knob that controls an on-screen representation in real time.

LED Strip lighting up

Changing LED colors of a LED strip

Turning a knob that controls a screen animation

Using a knob to control a prototype

How It Works

Figma does not support communication from a prototype to other software in its API. Because we can't go the official route, Figproxy uses two different "hacks" to achieve communication.

Speaking Out (Figma → Arduino)

Note: I will be using "Arduino" as shorthand for any hardware that can speak over a serial connection. There are a lot of platforms that can communicate over serial, but Arduino is the most common in this space.

When you specify for Figma to go to a link, Figproxy looks at the link and if it starts with "send" (and not, for instance "http://") we know it is intended to be routed to hardware.

Figma UI: send a

In Arduino, you can listen for a character and perform some action like this:

  if (Serial.available() > 0) {  
    // get incoming byte:
    char incomingByte =;
    //in Figma the "Turn LED On" button sends "a",  "Turn LED Off" sends "b"
      digitalWrite(LED_BUILTIN, HIGH);
    }else if(incomingByte=='b'){
      digitalWrite(LED_BUILTIN, LOW);

If there is more complex data you need to send, you can send a string like "hello world!:

Figma UI: send hello world!

You can even send hexadecimal characters by preceding the string with "0x"

Figma UI: send hex code

Speaking In (Arduino → Figma)

In Arduino, you can send a character like this:


To get data into Figma, Figproxy sends characters as keypress events.

Figma UI: receiving characters from keypresses

Why I Made It

At IDEO I work on a lot of physical product designs that incorporate displays. I commonly work with UX designers whose tool of choice for rapid iteration of experiences is Figma.

I was recently working on a project that was a kind of kiosk - a touch screen that has external hardware elements. We already had a phenomenal UI prototype built in Figma, and I had built some of the digital hardware elements out with Arduino to deliver an interactive model we refer to as an "experience prototype."

I wanted to link the external LED animations to the UI prototype, so some LED behaviors could be choreographed to the moment in the user flow. I was floored when I came to the realization that this was not possible. Protopie did not import the Figma screens properly and would have resulted in days of re-work and making the UI team switch software. I also tried the fantastic software Blokdots (co-created by ex-IDEO'er Olivier Brückner) but this only allows hardware to talk to the "design view" of Figma as opposed to what I needed which was communication to the "prototype view."

I've got a bit of a soft spot for making prototyping tools for hardware so honestly I was a bit excited that no-one had figured this one out yet. After digging into the Figma API, I realized why Blokdots hadn't done it yet - Figma doesn't support any communication to and from the prototype view in their API. I had to figure out a workaround. After looking at what prototypes could do, I had the idea to make a proxy browser and Figproxy started taking shape.

Try It Out

Detailed instructions for installation, examples and use can be found in the Github Repository here. The Figma files for the examples are here. I hope you like it!