EN
Figma Config

把挥剑、坠落的真实动作拍下来，当场变成 Figma 里可复用的缓动曲线

Turning real-world motion into design ft. Patrick Flaherty (Microsoft) | Config 2026 · Patrick Flaherty

22 min
Design-to-Code

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

橙色 = 推荐必看的 11 分钟其余读导览就够
0:144:547:1713:0215:1919:03
逐段导览 · 6 段
  1. 0:14 – 4:54听

    动画师的老手艺：先观察，再动手

    从传统动画师“观察—解读—风格化”的工作流讲起，指出数字工具让设计师跳过了观察这一步，直接面对曲线。

    在曲线编辑器里迷失的根因，是跳过了“先看真实运动”这一步

    以口头论述和铺垫为主，画面无关键信息，适合当播客听▶ 跳到 0:14
    讲者 · Patrick Flaherty
  2. 4:54 – 7:16略

    直面那张吓人的曲线图

    点开缓动设置迎面而来的贝塞尔图为何令人却步，以及“Design the feel, not the graph”的核心主张。

    曲线图只是运动的一种描述而非来源，目标是 punch、softness 这类感受

    画面是曲线编辑器截图和幻灯片，扫一眼图即可，重点在论点▶ 跳到 4:54
    讲者 · Patrick Flaherty
  3. 7:17 – 11:56看

    间距即速度，你就是模拟信号

    用可视化拆解 spacing 与速度、感受的关系，并讲述 Motion Tracker 从“挥纸片录视频”的简陋原型到桌面应用的由来。

    间距等于速度，速度等于感觉——学会看 spacing，曲线就变成一幅时序图像

    440 秒处的间距动态演示和早期原型视频是本段灵魂，纯听会丢失直觉建立过程▶ 跳到 7:17
    讲者 · Patrick Flaherty
  4. 13:02 – 15:19看

    现场演示：把舞台动作录成曲线

    走到桌前实操：摄像头追踪挥剑（X 轴）、击打、坠落（Y 轴）三个动作，设定出入点后处理生成缓动曲线。

    一段简短而有意图的真实动作，就足以生成可用的缓动曲线

    全片最高价值的现场演示，动作与生成曲线的对应关系必须亲眼看▶ 跳到 13:02
    讲者 · Patrick Flaherty
  5. 15:19 – 18:59看

    命名保存，拖进 Figma 全局生效

    把录好的曲线命名为 “Swing” 等保存共享，拖放到线性动画上立刻改变质感；调 duration 补足力量感，再演示粘贴进变量一次性应用到所有关联动画。

    曲线给感觉、时长给力量，两者配合；cubic Bezier 一个值可跨工具旅行

    拖放前后的动画对比和变量面板批量生效是纯视觉信息，听不出差别▶ 跳到 15:19
    讲者 · Patrick Flaherty
  6. 19:03 – 21:17听

    收束：沉淀团队的运动语言

    呼吁为好的缓动命名、存储、共享，让团队不再各自猜“挥剑感”；下次卡住时先站起来比划、扔个东西，捕捉真实运动作为起点。

    它不必完美，只需真实——起点从空白曲线换成真实表演过的运动

    纯口头收尾与行动号召，无演示画面▶ 跳到 19:03
    讲者 · Patrick Flaherty

相关推荐