版本要求:
这个教程需要用到的Adobe XD 45版本以上的功能——添加Lottie文件
主要通过制作多态组件来实现功能。
需要制作三个画板,跟着下面的步骤开始制作吧!
1.制作第3个画板
准备好素材,我们先制作第3个画板
在对话框中绘制一个矩形,拖入准备好的表情Lottie素材
将这个Lottie文件设置为自动循环播放
2.制作第2个画板
复制这个Lottie图层到对话框中
绘制发送按钮,给这个按钮添加一个颜色变深的悬停状态
给这个按钮的悬停状态添加一个点击动画链接到上面制作好的第3个画板
3.制作第1个画板
制作灰色表情icon的悬停状态,分别绘制四个矩形,拖入四个表情Lottie文件
在这个组件内,再将第一个表情制作成一个嵌套的组件,对这个表情制作一个悬停状态,悬停状态下设置Lottie文件为自动循环播放
并对这个表情的悬停状态制作交互,链接到第二个画板
4.制作完成
点击前往查看→观看视频教程获取源文件