Figma 原生 shaders 全链路：一句话生成效果，代码还归你自己
Figma deep dive: Generative shader effects | Config 2026 · Georgia
全片 33 分钟·真正值得盯屏约 25 分钟·3 个必看点
- 0:15 – 3:10看
自称 Shader Boys 的团队和他们的开场炫技
几位讲者以颇为随性的方式互相介绍，随后直接甩出内部做的一个 3D 缎带效果——两段动效叠一层着色效果拼出来的。
开场那条缎带不是渲染视频，是效果和动效可以互相叠着用的直接证明。
自我介绍靠幻灯片文字，但紧接着的缎带效果是纯画面信息，光听解说完全感觉不到质感。▶ 跳到 0:15讲者 · Pierce - 3:10 – 10:56听
起源：从社区求一个渐变模糊，到私信 CEO 立项
讲清楚这功能从哪来——社区长期呼吁渐变模糊，团队没有选择再做一个一次性效果，而是决定把做效果的能力本身交给用户。技术上要等平台底层的图形能力就位才有可能，立项则始于一封冷私信，三月中旬才提案，团队里还有人力和实习生。
产品判断在于：不逐个满足效果需求，而是给用户造效果的工具。
这一段全是叙事和产品思路，画面基本停在讲者和标题页，边做别的事听着就行。▶ 跳到 3:10讲者 · Pierce - 10:56 – 15:20看
上手：用一句话生成效果，以及新入口长什么样
演示如何向 Agent 描述想要的效果并当场生成，同时导览新的工具区——可以按插件、效果、填充分类筛选，也能直接浏览官方现成的模板。生成出的像素化效果自带按亮度映射的阈值参数。
着色填充是一种新的填充类型，凡是能填色的地方——文字、描边、笔刷——都能用，还能像普通填充一样复制粘贴。
从菜单位置到生成结果全靠界面演示，参数面板上有哪些旋钮、效果长什么样，只有看画面才数得清。▶ 跳到 10:56讲者 · Raji - 15:20 – 19:40看
画布上的控制手柄与官方效果库巡览
对已有效果继续用自然语言迭代，让它长出可以直接在画布上拖的控制点；随后快速过一遍官方预置的一批效果——像素拉伸、铬金属色散、抖动像素化、镜头畸变等。
参数不只是侧边栏的滑块和颜色，还能是画布上直接用鼠标拖的手柄。
手柄怎么拖、拖出来什么样，以及每个预置效果之间的差别，都是纯视觉的东西，文字描述基本失真。▶ 跳到 15:20讲者 · Raji - 19:40 – 22:22看
品牌实战：把效果一层层堆起来，还得能改
拆解一个真实品牌视觉是怎么搭的——最底层是可编辑的文字并封装成组件，上面叠动效和多层效果；其中一层的原理是把画面亮度映射成不同形状与颜色，输入一动，形状跟着动。
堆得再花，底层仍是可编辑文字和组件，改一处下游全跟着变——这是它区别于一次性炫技的地方。
关键在于「改动瞬间整条链一起变」的那个实时反应，只有看着屏幕才能感受到联动的范围有多大。▶ 跳到 19:40讲者 · Pierce - 22:22 – 29:23看
同一素材的多种长相，以及必须知道的技术边界
同一个基础输入叠不同效果就能得到风格迥异的几版；再用时间偏移加混合模式，不加新效果也能凑出新画面。也提到品牌团队的非工程同事自己做出了带套印偏移这类精细参数的效果。随后交代边界：这是栅格类效果，按图层尺寸渲染，有最大渲染尺寸限制，不支持无限放大，图层太小会提示分辨率不足。
作者的建议是玩到这一步就该「即兴演奏」，随手往上扔效果，结果往往超出预期。
前大半段是几版画面的横向对比，差异全在观感上；后段讲限制时画面转为静态说明，可以放快点过。▶ 跳到 22:22讲者 · Pierce - 29:23 – 33:07看
收尾：代码归你，从设计稿直通网页
展示导出能力——效果可以导出成一份带初始化、渲染、参数和运行时的封装，直接丢进网页里用。现场把设计里的三个效果填充复刻到一个真实页面，并展开背后全部原始代码。最后交代哪些今天就能用、哪些还在路上。
效果不是锁在设计文件里的黑盒，代码可完整取走自己改。
设计稿与网页并排比对的那一刻是全场信息密度最高的画面，代码翻出来的部分也需要看清结构。▶ 跳到 29:23讲者 · Angel