网页设计 » 视觉设计 » Figma三分钟微交互动画教程

Figma三分钟微交互动画教程

发表于: 视觉设计. 评论
Sponsor

前言:Figma是一个协作式 UI 设计工具,最大的特点是基于浏览器可以实现跨平台(Win,、Chrome、Linux、Mac)设计。和同作为UI设计的Sketch相比,figma不仅有完胜Sketch的文件处理速度,同时也支持插件开发,通过Figma API也可以与第三方工具集成。使用figma来进行一些设计也越来越简单和方便,今天给大家分享一个用figma制作的微交互动画设计。

Figma三分钟微交互动画教程

视频教程

图文教程

再开始制作之前,我们先来看一下动态效果

Figma三分钟微交互动画教程

前期准备

工具:figma

制作步骤

步骤一:如下图,创建的多个Frame。

Figma三分钟微交互动画教程

步骤二:选择初始展示的画板,设置交互细节:当悬停时>打开叠加frame2>点击空白处关闭

Figma三分钟微交互动画教程

步骤三:选择frame2画板,设置交互细:单击>交换到frame3>智能动画>前后缓动200ms

Figma三分钟微交互动画教程

步骤四:选择frame3,设置交互细节:延迟触发1ms>交换到frame4>智能动画>前后缓动140ms

Figma三分钟微交互动画教程

步骤五:选择frame4,设置交互细节:延迟触发1ms>交换到frame5>智能动画>前后缓动70ms

Figma三分钟微交互动画教程

步骤六:选择frame5,设置交互细节:单击>交换到frame6>智能动画>前后缓动200ms

Figma三分钟微交互动画教程

步骤七:选择frame6,设置交互细节:延迟触发1ms>交换到frame7>智能动画>前后缓动140ms

Figma三分钟微交互动画教程

步骤八:选择frame7,设置交互细节:延迟触发1ms>交换到frame2>智能动画>前后缓动70ms

Figma三分钟微交互动画教程

步骤九:选择frame2,设置交互细节:延迟触发25ms>关闭叠加。

Figma三分钟微交互动画教程

到此我们这个效果就完成啦!喜欢的小伙伴动动手试试吧!

作者 | Design with CloudAI
来源 | Design with CloudAI

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }