Figma入门教程19-卡片水平翻转交互动效

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

Figma入门教程19-卡片水平翻转交互动效

效果演示:


制作素材

准备好卡片素材-命名为front

复制一份并命名为back,调整一下素材的色值做区分

Figma入门教程19-卡片水平翻转交互动效

对back执行水平翻转,并将画框内其他元素再次执行水平翻转回正

选中二者再复制一份

修改一下第二组素材的命名:front改为back,back改为front

Figma入门教程19-卡片水平翻转交互动效卡片命名

将素材居中对齐,调整好顺序后,分别制作成组件(每个组件是两组素材叠在一起)

并合并为变体


制作原型

切换到原型面板,添加点击-智能动画-缓动300ms

这样效果就制作好了

点击上方前往查看→查看视频教程


源文件地址:

https://www.figma.com/community/file/1172118372843528986


标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作