今日头条
年度大会 · 设计×工程
Config 2026 重磅回顾：Figma 发布代码图层、Motion、着色器、生成式插件和 Weave 工具
Figma 年度大会 Config 2026 于 6 月 24 日举办，CEO Dylan Field 发布一系列重磅更新：代码图层（Code Layers）让代码与设计并排存在于画布上；Figma Motion 将时间轴带入画布；着色器效果和填充（Shader Effects & Fills）基于 WebGPU 实现像素级视觉控制；生成式插件（Generative Plugins）让设计师用自然语言构建自定义工具；Weave 工具连接创意工作流。Figma 正式从设计工具进化为创作平台。
新功能 · 动效设计
Figma Motion 上线：画布上有了时间轴，动效设计不再需要切换工具
Figma Motion 将时间轴直接嵌入 Figma 画布，动效与组件、变量、团队协作在同一文件中完成。设计师可以在设计稿旁直接添加关键帧动画、设置缓动曲线、预览交互过渡，无需导出到 Principle、After Effects 或 ProtoPie。Motion 与 Figma 的变量系统打通，支持响应式动效。
编辑观点
93
动效设计一直是设计师「最后一步才考虑」的环节，因为工具割裂导致成本太高。Figma Motion 把时间轴放在画布上，意味着动效可以像调颜色一样自然地融入设计过程。今天打开 Figma 找到 Motion 面板，给你的按钮加一个微交互试试。
深度资讯
🔥 深度解读 · AI Agent
Figma 设计 Agent 升级：自定义工具+生成式插件+着色器，画布上的一切皆可「编程」
Figma 设计 Agent 进入开放 Beta，新增三大能力：生成式插件（用自然语言让 Agent 构建可复用的自定义插件）、着色器效果与填充（基于 WebGPU 的像素级视觉控制，如水彩、摩尔纹、粒子拉伸）、上下文增强（支持直接附加文件、引用其他 Figma 文件结构、搜索网页、连接 GitHub/Slack 等 MCP 工具）。Agent 不再只是执行指令，而是真正理解你的工作方式。
新功能 · 代码图层
Figma 画布代码图层：用代码探索设计方向，与团队并排迭代
Figma Design 新增代码图层（Code Layers），设计师可以在画布上直接放置可运行的代码块，用代码快速探索多种设计方向。代码与视觉设计并排展示，团队成员可以同时查看和编辑，实现真正的「设计+代码」协同。
行业报告 · AI 研究
Figma 2026 AI 报告：AI 正在从「单打独斗」走向「团队协作」
Figma 发布 2026 AI 研究报告，核心发现：AI 在设计工作流中的角色正在从「个人效率工具」转变为「团队协作媒介」。研究显示，设计师使用 AI 的方式从早期的个人探索（生成方案、写文案）进化到团队级协作（AI 参与评审、跨角色对齐、设计决策辅助）。报告建议团队重新思考 AI 在设计流程中的角色定位。
今日工具
今日洞察
编辑观点
"Config 2026 传递出最强烈的信号：Figma 不再只是一个「画图工具」，它正在变成一个「创作平台」。代码图层让设计师能用代码思考，Motion 让动效不再需要切换工具，生成式插件和着色器让每个人都能定制自己的工具箱。Dylan Field 说「AI 降低了门槛，但天花板要靠设计师来抬高」——这句话精准定义了 2026 年设计师的新角色：不是被 AI 替代的执行者，而是用 AI 扩展可能性的创造者。现在最重要的能力是：学会在画布上「编程」你的工具。"
— 写给正在从「用工具」升级为「造工具」的 UX/UI 设计师
大会发布
Figma Config
Config 2026 重磅回顾：Figma 发布代码图层、Motion、着色器、生成式插件和 Weave 工具
✕
编辑观点
这是 Figma 自发布以来最大的一次范式跃迁。代码图层+Motion+着色器+生成式插件，四件套组合意味着设计师不再需要离开 Figma 去写代码、做动效、找插件。今天就去 figma.com/blog 看 Config 2026 回顾，然后更新你的 Figma 客户端。
名词解释
Config Figma 年度产品发布大会，通常在每年 6 月举办，是 Figma 发布最重要产品更新的场合。2026 年主题为「New materials, new tools and a more expressive canvas」。
Code Layers（代码图层） Figma Design 中的新功能，允许在画布上直接放置可运行代码，设计师可以并行探索多个代码方向，与团队实时协作。
Generative Plugins（生成式插件） 通过 Figma 设计 Agent 用自然语言构建的可复用插件，基于 PropsKit 技术，外观和行为与原生 Figma 功能一致，无需开发者介入。
怎么用
大会内容消化时
访问 figma.com/blog/config-2026-recap 阅读官方回顾，重点标记与你日常工作相关的功能（如 Motion 适合做微交互的、代码图层适合做设计系统验证的），列出一个「本周试玩清单」，每个功能花 30 分钟体验并记录感受。
团队设计规范升级时
把 Config 2026 的更新点整理成一份「Figma 新能力影响评估文档」，分析每个功能对你团队设计系统的潜在影响：着色器能否替代现有的视觉特效插件？Motion 能否取代 Lottie 导出流程？生成式插件能否自动化重复性排版工作？
可直接使用的 Prompt
点击复制
我是一名 UX/UI 设计师，刚刚看完 Figma Config 2026 的发布内容。请帮我制定一份「Config 2026 新功能上手计划」：1）按学习优先级排序以下功能：Code Layers、Figma Motion、Shader Effects & Fills、Generative Plugins、Weave Tools 连接；2）每个功能给出：核心价值（1句话）、学习路径（3步）、预期提升的工作效率（量化估计）；3）标注哪些功能需要团队协作推进，哪些可以个人先试；4）给出一个 2 周的渐进式学习时间表。
好的，我知道了 ✓
新功能
动效设计
Figma Motion 上线：画布上有了时间轴，动效设计不再需要切换工具
✕
编辑观点
动效设计一直是设计师「最后一步才考虑」的环节，因为工具割裂导致成本太高。Figma Motion 把时间轴放在画布上，意味着动效可以像调颜色一样自然地融入设计过程。今天打开 Figma 找到 Motion 面板，给你的按钮加一个微交互试试。
名词解释
Figma Motion Figma 内置的动效设计工具，提供时间轴、关键帧、缓动曲线等功能，与 Figma 变量系统和组件系统深度集成，支持在画布上直接创建和预览动画。
Timeline（时间轴） 动效设计的核心界面元素，以时间为横轴展示动画关键帧的排列，设计师可在时间轴上调整动画节奏、持续时间和缓动方式。
怎么用
设计微交互动效时
在 Figma 中选中你要添加动效的组件，打开 Motion 面板，在时间轴上设置初始状态和结束状态关键帧，选择缓动曲线（推荐 ease-in-out 用于按钮反馈，spring 用于弹性效果），直接在画布上预览，无需导出到其他工具。
做设计评审动效演示时
把 Motion 动效直接嵌入 Figma 原型链接，评审时一键播放，让评审者看到真实的交互动画而非静态截图；动效与设计稿在同文件中，修改设计后动效自动跟随更新。
可直接使用的 Prompt
点击复制
我正在使用 Figma Motion 为一个电商 App 的首页设计动效方案。需求：1）首屏 Banner 轮播切换动画（水平滑动+淡入淡出）；2）商品卡片加载时的渐入动画（stagger 错开 50ms）；3）下拉刷新动画（自定义 loading 图形旋转）；4）加入购物车的反馈动效（弹跳+缩放）。请为每个场景给出：关键帧设置建议、缓动曲线选择、持续时间推荐值，以及如何在 Figma Motion 中实现。
好的，我知道了 ✓
深度解读
AI Agent
Figma 设计 Agent 升级：自定义工具+生成式插件+着色器，画布上的一切皆可「编程」
✕
编辑观点
生成式插件是这次更新中最被低估的功能——它意味着每个设计师都可以成为「工具制造者」。以前你等插件开发者做你需要的功能，现在你用一句话就能让 Agent 帮你造一个。今天就去 Figma Community 体验已有的 30+ 插件和着色器。
名词解释
Shader Effects（着色器效果） 基于 WebGPU 的小型程序，定义像素如何渲染。设计师可自定义如粒子拉伸、镜头畸变、色彩描边等效果，可叠加使用并与原生效果组合。
Shader Fills（着色器填充） 动态生成的填充效果，超越纯色和渐变，支持水彩、摩尔纹、网格图案、磁场等生成式视觉，为设计稿提供独特的视觉纹理。
PropsKit Figma 的组件属性技术框架，生成式插件基于此构建，确保自定义插件在外观和行为上与原生 Figma 功能保持一致。
WebGPU 下一代 Web 图形 API，替代 WebGL，提供更高效的 GPU 访问能力。Figma 已将渲染引擎迁移至 WebGPU，为着色器功能提供底层支持。
怎么用
需要特殊视觉效果但找不到插件时
在 Figma 设计 Agent 中描述你要的效果，例如「创建一个半色调（Halftone）着色器，支持调整点的大小、间距和角度」，Agent 会生成着色器代码并添加到你的 Tools 面板，你可以直接在画布上调整参数并实时预览效果。
构建团队专属设计工具时
用 Agent 构建生成式插件：描述「创建一个插件，读取剪贴板中的 HTML 代码，自动在画布上生成对应的 Figma 组件，保持样式一致」，Agent 生成插件后分享给团队，所有人都能在 Tools 面板中使用，无需开发者介入。
可直接使用的 Prompt
点击复制
我是 UX 设计师，想用 Figma 设计 Agent 创建以下自定义工具：1）一个「设计系统检查器」插件——扫描当前选中的组件，检查是否使用了正确的 Color Variables、Text Styles 和间距规范，输出不合规项清单；2）一个「竞品截图转组件」着色器——将竞品截图应用去色+高对比处理，帮助快速分析信息层级。请帮我写出给 Agent 的详细 Prompt，包括功能描述、输入输出、参数定义和预期效果。
好的，我知道了 ✓
新功能
代码图层
Figma 画布代码图层：用代码探索设计方向，与团队并排迭代
✕
编辑观点
代码图层解决了一个长期矛盾：设计师想用代码探索但怕「越界」，工程师想参与设计但不想学 Figma。现在两者在同一画布上并排工作，各用各的语言。如果你有前端基础，今天就去试。
名词解释
Code Layers（代码图层） Figma Design 中的新图层类型，允许在画布上嵌入可运行的前端代码（如 React/HTML/CSS），代码的渲染结果直接显示在设计稿旁，支持实时编辑和团队协作。
怎么用
验证设计系统组件一致性时
在 Figma 画布上放置一个代码图层，写入设计系统 Button 组件的 React 代码，与设计稿中的 Button 组件并排对比，检查间距、颜色、字体是否完全一致，快速发现设计与代码的差异。
快速探索多个布局方案时
用代码图层快速生成 3-4 个不同布局的代码版本（Flex 布局变体），每个版本并排展示在画布上，团队投票选择最优方案后，再在 Figma 中精修视觉细节。
可直接使用的 Prompt
点击复制
我正在使用 Figma 代码图层功能，想验证一个卡片组件的设计稿与 React 实现的一致性。我的设计系统使用 Tailwind CSS，卡片组件包含：图片区（aspect-ratio 16:9）、标题（text-lg font-bold）、描述（text-sm text-gray-600）、CTA 按钮（primary 样式）。请帮我生成：1）完整的 React + Tailwind 代码（含 TypeScript 类型）；2）一份「设计稿 vs 代码」对比检查清单，列出需要逐一核对视觉属性（颜色、间距、圆角、阴影、字体）；3）常见不一致点的排查建议。
好的，我知道了 ✓
行业报告
AI 研究
Figma 2026 AI 报告：AI 正在从「单打独斗」走向「团队协作」
✕
编辑观点
这份报告的价值不在结论（AI 协作化趋势大家都感受到了），而在方法论——Figma 用数据证明了「AI 不是设计师的竞争对手，而是团队的新成员」。下载报告，用它的数据说服你的老板投资 AI 工具培训。
名词解释
AI 协作成熟度 衡量团队将 AI 融入设计工作流的程度，从个人探索（Level 1）到流程嵌入（Level 2）到团队协作（Level 3）到战略驱动（Level 4）。
怎么用
制定团队 AI 策略时
下载 Figma 2026 AI 报告（figma.com/reports/2026-ai-report），用报告中的协作成熟度模型评估你团队当前处于哪个阶段，找出差距并制定 3 个月的升级计划，重点关注从「个人使用 AI」到「团队流程嵌入 AI」的过渡。
向上级汇报 AI 投资价值时
引用报告中的数据点（如 AI 协作团队的交付速度提升比例），结合你团队的实际案例，制作一份「AI 工具投资 ROI 分析」PPT，用数据驱动的方式争取 AI 工具采购预算和培训资源。
可直接使用的 Prompt
点击复制
请基于 Figma 2026 AI 报告的核心观点（AI 从个人工具进化为团队协作媒介），帮我撰写一份「设计团队 AI 协作升级提案」，内容包括：1）当前团队 AI 使用现状评估（请设计 5 个自评问题）；2）从「个人探索」到「团队协作」的 3 个月升级路线图（每月具体目标）；3）需要投入的资源（工具、培训、流程调整）；4）预期收益量化指标（效率提升、质量改善、团队满意度）；5）潜在风险和应对措施。格式适合向设计总监汇报。
好的，我知道了 ✓