中文
Figma Config

Push a Figma frame straight onto a real appliance screen, and a six-month review cycle becomes two minutes

Prototyping for the physical world ft. Frederik Ueberschär & Sam Thorne | Config 2026

24 min
Design-to-CodeAI Coding

24 min total·Actually worth watching closely: ~12 min·3 must-watch clips

Orange = the 12 minutes worth watchingFor the rest, the guide is enough
Segment guide · 7 segments
  1. 0:12 4:33Skim

    The gap between the canvas and the real product

    The two design technologists set out their situation at an appliance company: the design is finished in Figma, and it takes weeks or even months before anyone sees it on real hardware. They lay out the differences between appliance screens and phone screens one by one.

    Appliance screens break nearly every default assumption of web and phone design: few pixels, a narrow palette, viewed at an angle through 4mm of glass, and input from buttons and a knob rather than a finger

    Mostly spoken setup, with slides that simply list the differences — skim the points; the slide around 3:49 enumerating the screen constraints is worth a pause▶ Jump to 0:12
  2. 4:37 7:46Watch

    Wiring a knob into a prototype with a fake keyboard

    A look at the knob they built: a microcontroller and rotary encoder inside, impersonating a keyboard once connected over USB and translating rotation into arrow keys that drive navigation in a Figma prototype. They also demo a multi-knob version and a shrunken one sitting in front of the screen, backlit by the screen itself.

    The impersonate-a-keyboard bridge extends to sliders, ambient light sensors, color sensors — almost any sensor can become a trigger condition in Figma

    There's a physical object and a live turn on stage; watching the box rotate and the screen jump is the shortest path to understanding this approach — text can't convey how the knob feels in the hand▶ Jump to 4:37
  3. 7:51 10:55Skim

    An industrial screen is not the one on your desk

    A breakdown of the physical constraints of an appliance screen as an industrial component: low resolution, restricted viewing angle, a layer of glass pressed over the front — while the design itself is made on a large desktop monitor.

    Reviewing an appliance interface on a 27-inch monitor is like choosing a bedroom bed under showroom lighting — the conditions are completely different, so the conclusion can't be trusted

    Carried mainly by comparison images and spec callouts; catching the few real-hardware photos is enough, no need to follow every sentence▶ Jump to 7:51
  4. 10:55 13:09Watch

    Gradients band on the real screen

    The practical consequence of 16-bit RGB565 color depth: about 65,000 colors, less than one percent of a 24-bit palette. Flat-color UI holds up fine; gradients and soft shadows show visible banding.

    What you see in Figma is not what you get on the hardware — especially gradients and soft shadows, which give nothing away in the design file

    Banding has to be judged with your eyes — the side-by-side 'design file vs real device' comparison carries this entire section; hearing it described gives you no sense of how harsh those steps look▶ Jump to 10:55
  5. 13:12 16:16Watch

    A cooktop project that bought them a magic box

    Starting from what the cooktop project cost them, they introduce Figma displays: the device shows a one-time connection code on power-up, you enter it in the plugin, and from then on any frame you select goes to a screen of the correct size and resolution almost instantly — or the whole interactive prototype runs on the device as a link.

    Problems with readability, visual style and touch-target size only surface at real size and real resolution

    Pairing and pushing are one continuous live operation, and the moment the frame lands on the real device is the high point of the talk — it's also the key evidence for whether this approach is worth learning▶ Jump to 13:12
  6. 16:19 19:46Watch

    What's actually inside the box

    Lifting the lid on the implementation: a Raspberry Pi drives the screen and takes the touch signal back, packed into a custom 3D-printed housing; the software is three layers — plugin, display, and an MQTT message bridge — with static designs sent as base64 images, interactive prototypes as a shared link, and Playwright crossing the login wall automatically.

    The key insight is a single sentence — Figma is a web page — and once you see that, the rest is assembling parts that already exist

    Two layers here: physical hardware and an architecture diagram. Watch the hardware part (housing shape and portability are the practical value they keep returning to) and skim the diagrams; if you want to replicate this, it's the place to stop and take notes▶ Jump to 16:19
  7. 19:51 24:17Listen

    Building tools meant to become obsolete

    Collecting the results: real-hardware review compressed from about six months to about two minutes, bringing same-day testable iterations, expensive problems exposed earlier, and discussion dropping from concept to detail. It closes on two ideas — extend Figma as a web platform you can shape, and deliberately build tools that will become obsolete.

    A tool exists because of some gap; the win is when the gap is closed and nobody needs the tool any more — then you go find the next one

    A purely spoken wrap-up, dense in ideas but with nothing you need to watch — fine to listen to while doing something else; the closing stretch on being meant to become obsolete is the most portable attitude in the talk▶ Jump to 19:51