Figma制作插画风视差动画教程 视差效果动画怎么做?

金珍妮            来源:优草派

在我们的UI设计中,经常会使用到的软件就是Figma软件。我们可以在这个软件中实现很多界面动画效果,这也是一个让我们喜爱并且常用的软件。今天小编为大家带来的就是,如何用我们的Figma制作插画风视差动画教程的方法,非常的有用也有非常多的干货哦,赶快和小编一起来看一看学习起来吧!

Figma制作插画风视差动画教程 视差效果动画怎么做?

1.首先第一步,我们绘制一个草图,或者我们可以去一些网站上寻找像vecteezy,Freevector等网站找到一个合适的素材,注意我们要选择一个SVG格式的最佳哦。

2.然后我们将素材下载到本地,直接将这些图片拖拽在画布上进行排列组合。

3.在我们的画面中,像一些文字和图标图层它都是可以分开移动的,整个网页也会由两个AB部分组成。

4.在B部分中,我们需要绘制组件集以及添加交互事件。

eedfd81e13cef4996a218445386a580.jpg

5.接下来,我们将画面中的图形给复制一份,然后我们移动B下部分至原A上的位置,这里我们需要跟随自己的心,自己的感觉来进行设计。

6.我们可以挪动缩放里面的元素,接着回到我们的Frame1,自由挪动里面的卡片和文字等元素,也需要勾选一下裁剪的显示区域哦。

7.依次选中画框1以及环框2,添加交互事件,比如点击或者离开,就完成啦。

以上就是小编为大家带来的,关于Figma制作插画风视差动画教程,希望对正在学习Figma软件的小伙伴们有所帮助哦!

【原创声明】凡注明“来源:优草派”的文章,系本站原创,任何单位或个人未经本站书面授权不得转载、链接、转贴或以其他方式复制发表。否则,本站将依法追究其法律责任。
TOP 10
  • 周排行
  • 月排行