Figma入门教程19-卡片水平翻转交互动效
效果演示:
制作素材
准备好卡片素材-命名为front
复制一份并命名为back,调整一下素材的色值做区分
对back执行水平翻转,并将画框内其他元素再次执行水平翻转回正
选中二者再复制一份
修改一下第二组素材的命名:front改为back,back改为front
将素材居中对齐,调整好顺序后,分别制作成组件(每个组件是两组素材叠在一起)
并合并为变体
制作原型
切换到原型面板,添加点击-智能动画-缓动300ms
这样效果就制作好了
点击上方前往查看→查看视频教程
源文件地址: