从Figma到Shader:AI落地UI动效实践

用户头像
北京/设计爱好者/24天前/407浏览
从Figma到Shader:AI落地UI动效实践
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkyODA=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
这句话放到以前,是我们这些学美术出身的设计师想都不敢想的,
但是在现在AI时代,一切皆有可能。
这篇文章 是我抽时间总结的 关于AI实践的相关经验,
主要是关于 UI里的交互视觉动效,我这里以AI相关APP产品为例,
在站酷与大家一起学习,无限进步。
ps:作为AI与动效新手,我还有很多不明白的地方,有相关经验的大佬请赐教🙏
一、背景:传统动效方案的瓶颈
以我经历的几个公司团队为例,在以前,团队的大多数动效实现方式是:
动效软件设计 → 导出序列帧(复杂动画)/ Lottie(简单动画)→ 提供给开发
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkyODQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
这种方式在早期项目中比较常见,但随着APP的交互越来越复杂,逐渐暴露出几个问题:
1.包体积问题
动画需要导出大量素材:
  • 序列帧
  • 多分辨率资源
  • 多套适配资源
导致
APK体积不断膨胀
。研发要求一压再压,已经压榨到极限。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkyODg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
需要适配各种新老机型、模式
收藏
2.性能问题
动画依赖素材加载:
  • 内存占用高
  • GPU/CPU压力大
  • 容易出现卡顿
3.交互表达受限
素材动画的特点是:
  • 动画路径是固定的
  • 难以根据实时交互变化
二、新时代,新需求
随着 AI 能力增强,动效需求明显升级:AI UI需要具备实时计算、动态反连续交互。
现在的大多具有AI功能的APP产品需要:
  • 实时反馈
  • 动态变化
  • 连续响应
素材动画难以实现
精细、丝滑的交互体验
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODY3OTY=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
这些效果如果继续用素材实现,会带来以下问题:
  • 更大的资源体积
  • 更复杂的维护成本
因此,
代码动效成为必然选择
三、现实问题(大家都可能遇到的)
理想方案是:
Shader / OpenGL 实时动效
现实是:
  • 团队
    没有技术美术(TA)
  • 设计师
    不会写代码
  • 开发
    不懂Shader
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODQyNTY=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
公司其他部门确实有
动效 TA 组
,但:
  • 人力已经排满
  • 无法提供支持
这时候我已经没有办法了,但是想到AI既然这么强大了,那不如自己做吧,
爹有娘有,不如自己有。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODQzODA=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
四、解决方案:利用AI工具实现Shader代码动效
借助
AI代码工具
,设计师开始直接生成 Shader 动效代码。
核心思路:
设计Prompt → AI生成代码 → 本地调试 → Git协作 → 开发接入
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODQ0MDQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
五、项目实现流程
这里我以我的项目用到的OpenGL实现的 Shader 为例
1.了解 OpenGL 基本原理
了解基本原理,方便后期调试细节代码参数。
OpenGL是什么?
OpenGL 是由 Khronos Group(科纳斯组织) 维护的
跨平台图形编程接口
(图形API)
,用于渲染 2D/3D 矢量图形。它提供了一组
标准化的函数
,允许开发者直接调用 GPU 硬件加速功能,实现高效的图形渲染。
Open GL:是一个由Khronos组织,制定并维护的
标准与规范
,包含了一系列可以操作图形、图像的
函数
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODQ0MTI=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
Open GL是图形API其中的一种
收藏
在OpenGL之前,程序猿要写不同的函数适配不同的平台。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODY3ODg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
有OpenGL之后,程序猿写一套函数就能适配不同的平台。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkyOTI=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
如果听不懂?举个生活中的例子:
OpenGL 就像“厨房的菜谱标准”
  • Khronos Group 制定的
    OpenGL
    ,就像一本
    “统一的菜谱规范”
  • 它不会真的帮你做菜(不会直接渲染画面)
但它规定了:
  • 食材怎么处理(数据怎么传)
  • 火候怎么控制(渲染流程)
  • 每一步该怎么做(API调用规则)
不同厂商的 GPU(显卡)👇
就像不同品牌的厨师或厨房设备:
  • 有的用煤气灶(NVIDIA)
  • 有的用电磁炉(AMD)
  • 有的用柴火灶(手机GPU)
👉 只要大家都
遵循这本“菜谱”(OpenGL标准)
不管你用什么厨房,都能做出“同一道菜”(一致的图形效果)。
Shader 是什么?
OpenGL 决定“规定怎么做菜”
它不负责具体效果,而是提供“接口 + 规则”
Shader
更像是:
烹饪手法 / 调味配方
决定细节:
  • 火候多大(光照强弱)
  • 放多少盐(颜色)
  • 怎么翻炒(动画变化)
👉 决定“这道菜最终好不好吃、长什么样”
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODY3ODQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
2.使用 AI 工具生成代码
2.1使用
TRAE 国际版
这里大家挑选自己顺手的AI工具就好,我比较喜欢TRAE,上手快、质量高。
国际版:易上手,模型库更加国际化,包含GPT-5 系列(medium/high/5.1/5.2/5.3-codex)、Gemini-3-Pro-Preview、Grok-4 以及 Gemini-2.5 系列,以及 DeepSeek-V3.1 和 Kimi 。开会员就有更多的使用次数、Solo模式。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODY4MDA=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
开启Solo Coder 模式
(新版本已经改为Agent模式)
按照 Trae 负责人的说法,Solo 模式就是想让大家沉浸在与AI的对话中,把重心从代码细节上挪开。所以它不限于程序员,普通人也可以用它来做一些文稿编辑或内容创作。
选择 Agent 模式
专门用来处理复杂编程项目的智能体,是以任务为单位,右侧面板有实时跟随,这样就可以知道当前进行到哪一步,完成任务之后有个专门的代码变更汇总
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkyOTY=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
新建文件夹并打开
安卓项目在 Android Studio(官方IDE)中创建和编辑,所有代码、资源、配置均在本地机器上管理。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkzMDA=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
择合适的模型
个人感觉GPT-5.4 和 Gemini3.1 pro写代码效果最好
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkzMDQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
Prompt输入
上传图片和文字,关于prompt这么写更好下文会写
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODY4NDQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
开始执行
开始执行后,基本上就不需要管了,Agent会帮你完成所有的编译,中间只需要确认几次权限
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODY4NDg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
3.Prompt输入
3.1 文字Prompt
自己先可以随意一些,写下自己的想法,包括动画怎么动、哪些颜色、想调整哪些参数。然后再利用AI优化Prompt。AI优化后的Markdown格式更方便Agent理解。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODcyMTI=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
3.2 图形Prompt
【设计重点】
我认为这是AI时代设计师的核心能力,通过
图文结合
的Prompt方式描述效果,生成 Shader 动效代码。这一步做的好,能够更快更好的提升AI的还原度,让AI更容易理解你的需求。但是这一步对设计师的审美、手搓能力要求比较高。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkzMDg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
以环绕光demo为例
收藏
4.学习 Android 基本开发流程
这里我因为是要做安卓APP,所以用安卓为例。其实道理都是相通的,无论你是用Swift还是做一个web项目。
4.1 了解Android Studio
Android Studio 是谷歌推出的一个Android
集成开发工具
,提供了Android应用开发所需的一系列工具和功能,包括代码编辑器、调试器、虚拟设备模拟器、代码分析器等等。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODcyNjg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
4.2 项目导入Android Studio调试
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkzMTI=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
可以开始开发了
如果已经使用TRAE生成了一个完整的安卓项目文件,可以直接看以下步骤:
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkzMTY=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
踩坑
  1. 代码符号、结构不小心改错,编译错误
  2. view布局层级不对,效果丢失
  3. SDK、API、Gradle版本不对,程序崩溃
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODgwNDQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
做的这些,其实目标不是成为开发,而是能够:设计师
独立调试动效效果
。因为以前每次调试效果都要工程师帮忙修改,返工次数很多导致浪费了许多时间。
现在只用设计师调试好满意的效果,基本上一次性打包给工程师就可以了。
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkwNjg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
设计独立完成效果调试后,工程师开始介入。
如果有一个愿意花时间跟你研究Shader的开发,那就更好了。
6.建立 Git 工作流
Before:
设计师 → 完整项目文件打包 → 开发解压导入→ 搜索GL代码→ 摘出来接入找代码改动点麻烦代码版本管理混乱
After:
确认效果后:代码上传 Git 仓库流程变为:设计师 → 提交 Shader → 开发拉取代码接入
这里我让开发帮助搭建Git工作流:🔗设计师动效开发操作手册
方便研发拉最新代码
方便代码版本管理
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODkyMjg=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
7.接入产品工程
研发将 Shader 动效:
接入
APP主工程
实现最终产品动效。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
六、实践效果
包体积优化
移除:
十余套 PAG 动画资源
避免:
  • 多机型资源
  • 多分辨率素材
APK体积下降10MB-15MB
从Figma到Shader:AI落地UI动效实践(图ZMTU3ODg2NjQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
性能与内存提升
Shader特点:
  • 实时计算
  • 无需加载大素材
带来结果:
  • 内存占用降低
  • GPU利用更合理
  • 卡顿风险降低
七、最大的收获
这次实践最大的变化不是技术,而是:
设计师角色的变化。
从Figma到Shader:AI落地UI动效实践(图ZMTU4MDUzMTI=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
设计师可以:
  • 定义动画规则
  • 调整实时参数
  • 直接参与实现
八、总结与思考
AI时代,设计师的能力边界正在快速扩展,设计与技术的界限逐渐消融。
过去需要设计师+工程师协作完成的表达,如今设计师借助AI与代码工具,已经可以独立实现。
但AI都是工具,审美才是设计师的核心壁垒
AI让“会做”不再稀缺,但“做什么、做到什么程度”变成了真正的分水岭。
AI可以生成风格,但无法真正建立审美;
可以模仿趋势,但无法判断取舍;
当设计进入“人人都能生成”的阶段,
真正稀缺的,是对美的判断力与选择权
最后分享一张很喜欢的摄影作品,不知道AI能不能拍出这样的照片。
从Figma到Shader:AI落地UI动效实践(图ZMTU4MDU0MjQ=) - 教程 - 站酷设计师李添吉DESIGN原创素材 - 站酷ZCOOL
收藏
7
举报
|
8
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】银行卡icon
【新年UI图标】积分icon
钱包ui模板
【新年UI图标】活动icon
UI界面 组件
3D渐变流体抽象矢量UI背景图
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI通用设计素材1
【新年UI图标】旅行icon
【新年UI图标】30个图标
新能源APP应用UIKit
我的钱包-UI界面设计-app
【新年UI图标】体育icon
【新年UI图标】礼物/活动icon
高级感金属拟物 UI设计组件库
盲盒APP UI设计
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
【新年UI图标】相机icon
拟物风质感写实UI卡片合集源文件
科技医疗透明柜UI界面设计
抽象液态渐变UI背景模版
智能家居中心 简约 UI设计组件库
Security Camera UI kit
你可能喜欢
相关收藏夹
大家都在看
登录注册