把 Figma 原型直接推上真家电屏,六个月的验证周期压到两分钟
Prototyping for the physical world ft. Frederik Ueberschär & Sam Thorne | Config 2026
全片 24 分钟·真正值得盯屏约 12 分钟·3 个必看点
- 0:12 – 4:33略
画布和真产品之间那道缝
两位设计技术师介绍自己在家电公司的处境:设计在 Figma 里做完,要过数周甚至数月才能在真机上看到。他们逐条摊开家电屏幕与手机屏幕的差别。
家电屏几乎不满足任何一条网页/手机设计的默认假设:像素少、色板窄、隔着 4 毫米玻璃斜着看、输入是按键和旋钮而不是手指
大部分是口头铺垫,画面就是罗列差异的对照页,扫一眼要点即可,3:49 前后那张列举屏幕限制的页面值得停一下▶ 跳到 0:12 - 4:37 – 7:46看
用假键盘把旋钮接进原型
展示自制的旋钮装置:内含微控制器和旋转编码器,通过 USB 接入后伪装成键盘,把旋转翻译成方向键,从而驱动 Figma 原型的导航。还演示了多旋钮版本和缩小到屏幕前、由屏幕给旋钮打背光的版本。
『伪装成键盘』这个桥接思路可以推广到滑块、环境光传感器、颜色传感器——几乎任何传感器都能变成 Figma 里的触发条件
台上有实物和转动演示,看手上那个盒子怎么转、屏幕怎么跟着跳,是理解这个方案的最短路径;文字讲不清旋钮的手感反馈▶ 跳到 4:37 - 7:51 – 10:55略
工业屏不是你桌上那块
拆解家电屏作为工业组件的物理约束:分辨率低、可视角度受限、前面压着一层玻璃,而设计却是在大尺寸桌面显示器上做的。
在 27 寸显示器上评审家电界面,就像在卖场灯光下挑一张要放进卧室的床——环境完全不同,结论不可信
主要靠对比图和参数说明推进,抓住那几张真机拍摄对照就行,不需要逐句听▶ 跳到 7:51 - 10:55 – 13:09看
渐变在真屏上会断层
讲 16 位 RGB565 色深的现实后果:约 6.5 万色,不到 24 位色的百分之一,纯色界面还撑得住,渐变和柔和阴影会出现肉眼可见的色阶断层。
Figma 里所见并非硬件上所得,尤其是渐变和柔阴影,这类问题在设计稿上完全看不出来
色阶断层这件事必须用眼睛判断——屏幕上并排的『设计稿 vs 真机』对比是这段的全部说服力,光听描述完全体会不到那道道横纹有多刺眼▶ 跳到 10:55 - 13:12 – 16:16看
一个灶台项目换来的魔法盒子
从灶台项目上吃过的亏讲起,引出 Figma displays:设备上电后显示一次性配对码,在插件里输入即完成连接,之后选中任意画板就能几乎即时推到真实尺寸和分辨率的屏幕上,也能把整套可交互原型以链接形式在设备上跑起来。
可读性、视觉风格和触控目标大小的问题,只有放到真尺寸真分辨率上才会暴露出来
配对和推送是连贯的实时操作,画板出现在真机上的那一刻是全片的高光;这段也是判断这套方法值不值得学的关键证据▶ 跳到 13:12 - 16:19 – 19:46看
盒子里到底装了什么
掀开实现细节:树莓派驱动屏幕并回传触摸信号,装进定制 3D 打印外壳;软件分插件端、显示端和 MQTT 消息桥三层,静态设计走 base64 图片传输,交互原型走共享链接,登录墙用 Playwright 自动跨过去。
关键洞察只有一句『Figma 就是网页』——认清这点之后,整套方案就只剩现成组件的拼装
有硬件实物和架构图两层内容,实物那部分要看(外壳形态和便携性是他们反复强调的实际价值),架构图部分可以快速扫过;想自己复刻的话这里最值得停下来记▶ 跳到 16:19 - 19:51 – 24:17听
造注定过时的工具
回收成效:真机评审周期从约六个月压到约两分钟,带来当天可测的迭代、更早暴露昂贵问题、讨论从概念落到细节等连锁变化。最后落到两句方法论——把 Figma 当可塑形的网页平台来扩展,以及故意把工具造成会过时的。
工具存在的理由是某道落差,落差被填平、工具没人用了才是胜利,然后去找下一道缝
纯口头收束,观点密度高但没有需要盯着看的东西,适合边做别的边听;最后关于『注定过时』的那段是全片最值得带走的态度▶ 跳到 19:51