EN
Figma Config

把 Figma 原型直接推上真家电屏,六个月的验证周期压到两分钟

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

24 min
Design-to-CodeAI 编程

全片 24 分钟·真正值得盯屏约 12 分钟·3 个必看点

橙色 = 推荐必看的 12 分钟其余读导览就够
逐段导览 · 7 段
  1. 0:12 4:33

    画布和真产品之间那道缝

    两位设计技术师介绍自己在家电公司的处境:设计在 Figma 里做完,要过数周甚至数月才能在真机上看到。他们逐条摊开家电屏幕与手机屏幕的差别。

    家电屏几乎不满足任何一条网页/手机设计的默认假设:像素少、色板窄、隔着 4 毫米玻璃斜着看、输入是按键和旋钮而不是手指

    大部分是口头铺垫,画面就是罗列差异的对照页,扫一眼要点即可,3:49 前后那张列举屏幕限制的页面值得停一下▶ 跳到 0:12
  2. 4:37 7:46

    用假键盘把旋钮接进原型

    展示自制的旋钮装置:内含微控制器和旋转编码器,通过 USB 接入后伪装成键盘,把旋转翻译成方向键,从而驱动 Figma 原型的导航。还演示了多旋钮版本和缩小到屏幕前、由屏幕给旋钮打背光的版本。

    『伪装成键盘』这个桥接思路可以推广到滑块、环境光传感器、颜色传感器——几乎任何传感器都能变成 Figma 里的触发条件

    台上有实物和转动演示,看手上那个盒子怎么转、屏幕怎么跟着跳,是理解这个方案的最短路径;文字讲不清旋钮的手感反馈▶ 跳到 4:37
  3. 7:51 10:55

    工业屏不是你桌上那块

    拆解家电屏作为工业组件的物理约束:分辨率低、可视角度受限、前面压着一层玻璃,而设计却是在大尺寸桌面显示器上做的。

    在 27 寸显示器上评审家电界面,就像在卖场灯光下挑一张要放进卧室的床——环境完全不同,结论不可信

    主要靠对比图和参数说明推进,抓住那几张真机拍摄对照就行,不需要逐句听▶ 跳到 7:51
  4. 10:55 13:09

    渐变在真屏上会断层

    讲 16 位 RGB565 色深的现实后果:约 6.5 万色,不到 24 位色的百分之一,纯色界面还撑得住,渐变和柔和阴影会出现肉眼可见的色阶断层。

    Figma 里所见并非硬件上所得,尤其是渐变和柔阴影,这类问题在设计稿上完全看不出来

    色阶断层这件事必须用眼睛判断——屏幕上并排的『设计稿 vs 真机』对比是这段的全部说服力,光听描述完全体会不到那道道横纹有多刺眼▶ 跳到 10:55
  5. 13:12 16:16

    一个灶台项目换来的魔法盒子

    从灶台项目上吃过的亏讲起,引出 Figma displays:设备上电后显示一次性配对码,在插件里输入即完成连接,之后选中任意画板就能几乎即时推到真实尺寸和分辨率的屏幕上,也能把整套可交互原型以链接形式在设备上跑起来。

    可读性、视觉风格和触控目标大小的问题,只有放到真尺寸真分辨率上才会暴露出来

    配对和推送是连贯的实时操作,画板出现在真机上的那一刻是全片的高光;这段也是判断这套方法值不值得学的关键证据▶ 跳到 13:12
  6. 16:19 19:46

    盒子里到底装了什么

    掀开实现细节:树莓派驱动屏幕并回传触摸信号,装进定制 3D 打印外壳;软件分插件端、显示端和 MQTT 消息桥三层,静态设计走 base64 图片传输,交互原型走共享链接,登录墙用 Playwright 自动跨过去。

    关键洞察只有一句『Figma 就是网页』——认清这点之后,整套方案就只剩现成组件的拼装

    有硬件实物和架构图两层内容,实物那部分要看(外壳形态和便携性是他们反复强调的实际价值),架构图部分可以快速扫过;想自己复刻的话这里最值得停下来记▶ 跳到 16:19
  7. 19:51 24:17

    造注定过时的工具

    回收成效:真机评审周期从约六个月压到约两分钟,带来当天可测的迭代、更早暴露昂贵问题、讨论从概念落到细节等连锁变化。最后落到两句方法论——把 Figma 当可塑形的网页平台来扩展,以及故意把工具造成会过时的。

    工具存在的理由是某道落差,落差被填平、工具没人用了才是胜利,然后去找下一道缝

    纯口头收束,观点密度高但没有需要盯着看的东西,适合边做别的边听;最后关于『注定过时』的那段是全片最值得带走的态度▶ 跳到 19:51