How ProtoPie Bridged the Gap Between Screen Design and Physical Hardware

A rotating knob. Connected screens. An embedded circular display. One WiFi network, zero engineering team.

This is a prototype. And it changes what prototyping means for consumer electronics design.

Designers Have Always Had to Fake the Hardware Layer

Screen design tools are exceptional at simulating what a display looks like and how a touch interaction flows. What they cannot do is cross the boundary into the physical world.

A rotary knob cannot live in Figma. An embedded circular display cannot sync with a companion screen in real time. Multi-device hardware systems require either a live engineering build or a room full of workarounds.

The result is familiar. Designers present GIFs. Engineers interpret static specs. User testing happens on devices that look nothing like the real product. Everyone waits.

That gap has a cost in speed, in alignment, and in decisions made before anyone has touched the actual product.

Tools like Figma and Framer solve for screen fidelity and interaction flow. They are the right tools for digital product design. But consumer electronics products, appliances, wearables, automotive interfaces, smart home devices, involve physical controls, embedded displays, and multi-device ecosystems that screen-only tools were never designed to handle. The workarounds designers use today (GIF exports, static handoff specs, separate prototype builds per device) are symptoms of a tooling gap that has existed since touchscreen design tools became the industry standard. ProtoPie Connect was built to close it.

What This Prototype Actually Does

Daniel Keum, Creative Technologist at ProtoPie, built a working oven control panel interface. Three devices communicate in real time: two screens running ProtoPie prototypes and an ESP32 rotary display, a 480x480 circular touchscreen, acting as the central control knob.

• Rotate the knob and the circular display cycles through cooking modes
• Both screens update in sync, instantly
• Tap a food category on one screen and the knob responds
• Select a cooking parameter on the other screen and the knob acknowledges it

Every interaction crosses the boundary between screen and hardware, live, over WiFi.

The screens in this build are standard phones. They could just as easily be the actual product displays in your engineering lab. The architecture works with virtually any screen or embedded device that can send and receive data.

The Architecture Is Simpler Than It Looks

Three layers, each with one job:

• ProtoPie Studio: holds the UI logic: scene transitions, variable tracking, multi-device message routing
• ProtoPie Connect: the message hub, receives interactions from any device and broadcasts them to the others
• The bridge app: sits between ProtoPie Connect and the hardware, translating messages into commands the device understands

The bridge app is where most designers expect to hit a wall. It is not a wall. Daniel generated the entire working script using AI, describing in plain language which messages should go where. No Python expertise. No dedicated engineer.

The same pattern works with any hardware, touchscreen appliance panels, automotive control units, wearable displays, or any embedded screen communicating over WiFi, serial, or Bluetooth.

One Person Built This in Days, Not Months

The software layer, from Figma export to working multi-device prototype, took days.

The physical housing was built from scratch using 3D-printed parts and off-the-shelf hardware to prove the concept without proprietary equipment. For teams at consumer electronics companies that already have product hardware in their lab, that step is not necessary.

In practice: connect your actual product display to ProtoPie Connect through a bridge app and you have a working hardware prototype running on real screens within days. Not weeks waiting for a dev build.

What This Unlocks for Consumer Electronics Design Team

• Stakeholder alignment: leadership can interact with a prototype that behaves like the real product, not watch a presentation about it
• Reliable user testing: physical form factor changes how people interact; testing on real hardware form produces better data
• Clear developer handoff: a working prototype answers interaction questions engineers can observe and measure, removing guesswork
• Earlier problem discovery: hardware interaction issues caught in prototyping are far cheaper to fix than those found during engineering

How the Physical Build Came Together

The assembly iterated through four stages:

• Paper: orientation, dimensions, screen placement
• Foam board: structural decisions, identifying failure points
• 3D-printed parts: translating measurements into components
• Laser-cut steel face panel: the finished frame

The trickiest challenge: keeping the ESP32's internal components stationary while the outer knob ring rotates. A precisely measured backing plate, aligned from the hardware's own screw points, solved it. A manufacturing detail the prototype surfaced early.

For teams with existing product hardware, this entire phase is already done. The prototype works in the software layer before a single part is printed.

This Is the First Article in a Series Built for Hardware Designers

• Part 2: How to connect ProtoPie to real hardware — the complete ProtoPie Connect and bridge app workflow
• Part 3: LVGL for designers — how to build embedded display UIs from Squareline Studio to Arduino, without writing code from scratch

The complete hardware package — Arduino code, bridge app templates, Squareline Studio project, and 3D print STL files — will be available to download shortly.

Already designing products at the intersection of screens and hardware? ProtoPie Connect is where the workflow starts.

Frequently Asked Questions

What is ProtoPie Connect and how does it enable hardware prototyping?

ProtoPie Connect is a message routing layer that lets any device — phone, tablet, embedded display, or physical hardware — participate in a single prototype. It receives interactions from one device and broadcasts them to the others in real time. For consumer electronics design teams, it is the bridge between a screen-based prototype and the physical hardware surrounding it.

Do I need coding experience to connect ProtoPie to physical hardware?

No. The bridge app that translates messages between ProtoPie Connect and hardware can be generated using AI from a plain-language description of which messages should go where. Daniel built the entire working script for this prototype without writing Python from scratch. Basic familiarity with running a script is enough to get started.

What types of hardware devices work with ProtoPie Connect?

Any device that can send and receive messages over WiFi, serial, or Bluetooth can connect through a bridge app. This includes microcontrollers like the ESP32, Raspberry Pi-based displays, custom embedded panels, and most commercial hardware development boards. If the device can communicate, ProtoPie Connect can be its design-side counterpart.

How is this different from prototyping in Figma?

Figma is built for screen-based UI design and works exceptionally well for digital products. It cannot natively communicate with physical hardware, sync across multiple real devices in real time, or respond to inputs from physical controls like rotary knobs or hardware buttons. ProtoPie combined with ProtoPie Connect extends prototyping into the physical layer that Figma cannot reach.

Which consumer electronics products benefit most from this approach?

Any product where the interaction involves both a screen and a physical control. Home appliances with embedded displays, automotive infotainment systems, wearables, smart home hardware, medical devices with physical interfaces, and audio equipment with digital controls are all strong candidates. If a user touches something physical and a screen responds — this workflow is built for it.