2026 年 6 月 23 至 25 日,Figma 在旧金山举行年度大会 Config 2026(逾 8000 名参会者)。其核心更新包括三项:原生动效时间轴 Figma Motion、设计与代码双向同步的 Code Layers,以及接入十余款外部工具的 MCP 设计智能体(Design Agent)。CEO Dylan Field 在会上概括其立场——AI 降低了门槛、而设计师负责抬高上限,并提出”代码应被当作与图像、矢量、设计图层一样的设计材料”。

核心更新

Figma Motion(最受关注)

  • 在画布内新增动效时间轴,与 Design、Draw、Dev 模式并列;支持关键帧、预设动效与缓动控制,可直接为 UI 元素做动画而无需导出到外部工具。
  • AI 智能体可依自然语言描述生成动效起点(自动添加关键帧)。
  • 导出支持 CSS、JSON、React、motion.dev 代码,以及 MP4、WebM、Animated SVG、GIF。
  • 动效可绑定设计系统(Motion Variables),一次制作、跨屏幕与协作者文件复用;并兼容 MCP——把动效帧链接交给编码智能体,完整动效上下文随之传递。
  • 状态:Config 2026(6 月 24 日)起开放。

Code Layers

  • 一键或提示将设计图层转为可运行代码层,可复制并排比较多种实现方案,团队可在设计文件内对代码评论、迭代。
  • 设计层与代码层双向同步:视觉修改实时反映到代码。
  • 状态:2026 年 7 月经候补名单开放。

设计智能体升级

  • Skills:把工作流与规范打包为可复用指令,支持自建与团队/社区共享。
  • MCP Connectors:接入 Notion、Slack、GitHub、Atlassian、Hex、Granola 等工具,使智能体可读取外部业务数据辅助设计决策;智能体对话默认对团队可见。

其他:WebGPU 着色器(自然语言生成视觉效果)、生成式插件(无需本地开发环境)、Weave 节点式生成工作流可发布为模板/工具、3D Transforms 等。

横向与纵向定位

横向看,Figma Motion 的意义在于收拢一条长期割裂的工作链。过去产品团队做动效要不断切换工具——布局在 Figma、动画在 After Effects 或 Rive、交付用 Lottie、开发再凭截图复刻缓动曲线。把时间轴做进画布、并让动效代码可直接被开发读取,针对的正是这条链路的断点。这也将其与 After Effects、Rive、Lottie 等专门工具置于同一讨论场景中,各自适用边界值得重新厘定。

值得并列的另一面是 The Decoder 提出的观察:Figma 强调”人来抬高上限、保留判断”,但驱动其画布的底层 AI 模型多来自第三方,而非自有——这构成”以人为本的叙事”与”底层依赖外部模型”之间的一种张力。

纵向看,Figma 自身正从一个以静态界面设计为核心的工具,演进为覆盖设计、动效、代码与多工具协作的”全链路平台”。从内置 Dev Mode,到此前推出设计智能体,再到 Config 2026 一次性补齐动效、代码双向同步与 MCP 业务数据接入,其方向是把更多原本分散在不同软件中的创作环节收进同一画布。

⚠️ 待核实:Code Layers、部分智能体能力与”交互式着色器”等为分阶段开放(早期访问/候补名单/”即将推出”),具体可用范围与时间以 Figma 官方为准;MCP Connectors 所接工具清单可能随版本变化;3D Transforms 等功能的细节官方回顾页着墨较少,以官方文档为准。

Figma 在 Config 2026 一次性补齐原生动效、设计⇌代码双向同步与 MCP 业务数据接入,标志设计工具从”画图”向”覆盖设计→动效→代码→多工具协作的全链路平台”演进;作为艺术设计与 UI 专业的主流教学工具,其工具链更新将直接影响相关课程的内容设置与师生工作流。

参考来源

  • Figma 官方博客(Config 2026 回顾):https://www.figma.com/blog/config-2026-recap/
  • Figma 官方博客(Figma Motion):https://www.figma.com/blog/introducing-figma-motion/
  • Figma 帮助中心(Config 2026 新功能):https://help.figma.com/hc/en-us/articles/39582753756695-What-s-new-from-Config-2026
  • CMSWire:https://www.cmswire.com/digital-experience/figma-launches-code-layers-motion-at-config-2026/
  • The Decoder(批评视角):https://the-decoder.com/figma-bets-on-human-judgment-at-config-2026-while-the-ai-powering-its-canvas-belongs-to-someone-else/
  • 优设(中文):https://www.uisdc.com/hunter/0221674810.html