展开本页目录
开始前准备什么
- Figma Design各计划但需agent访问和AI credits；shader为open beta、依赖WebGPU；一次只运行一个动画/交互shader
- 先下载练习包并保留原件；作者原生或生成参考不等于目标产品已运行。
- 准备背景目标
- 打开Agent请求Shader
- 把效果附着到图层
- 逐个调整参数
- 检查运行环境
- 准备静态替代
- 保存参数和预览
下载本篇练习包
具体练习输入、原生参考、设置记录与七步操作说明。
查看练习说明与素材身份
区分官方示例、作者输入与未实际运行的产品步骤。
1. 准备背景目标
在Figma选中要放背景的Frame，写明柔和渐变、低颗粒和文字对比要求。练习包提供作者原生Shader参考与参数文件。
2. 打开Agent请求Shader
向Figma agent说明创建Shader，并要求暴露颜色、速度和颗粒参数。该功能处于开放测试，需当前账号可使用agent。
3. 把效果附着到图层
将生成效果放到目标Frame或图层，先使用低速与低颗粒值。观察背景有没有压住标题与按钮。
4. 逐个调整参数
一次只改速度或一种颜色，再对照静态截图。参数未暴露时要求agent补可调控制，不要每次把整段效果重生成。
5. 检查运行环境
在支持WebGPU的当前浏览器中预览。单页多个动态或交互Shader的播放存在官方限制，先只保留一个主要动态效果。
6. 准备静态替代
把合适时刻导出PNG，用在静态稿或不支持的环境。作者原生预览只说明目标效果，未替账号运行Figma agent。
7. 保存参数和预览
保留agent请求、参数值和静态图；换设备检查文字仍然清楚。交付时说明动态与静态分别使用的位置。
怎样确认已经完成
- 调整颜色不改变文字轮廓；停用动画仍可读；不把shader当SVG矢量
- 保存可复用shader、参数记录和静态设计副本，并保留可继续修改的源版本。
- 按步骤中的局部与时间点回看，未通过的位置保留原始输入重新处理。
常见问题
Figma AI怎么做带调色参数的动态渐变？
在请求中明确要求把速度、颜色和颗粒做成可调参数，然后逐个修改。没有可调项时让agent补参数，而不是反复生成整张图。
Figma着色器为什么预览不动或遮住文字？
先检查当前浏览器WebGPU与账号功能可用性，再看官方单页动态播放限制。背景遮住文字时降低颗粒与对比，或改用导出的静态替代图。
配图与练习文件是否代表平台已经执行成功？
官方示例在图注明确来源；其他图片和文件按标注属于作者原生输入、实际测量图或imagegen目标参考。本页未在你的授权账号中运行该产品，练习结果需在原产品保存。