Figma Animation

Figma Animation

Start of animation

For this assignment, I was tasked with making an animated hero section using Figma components and prototyping. I decided to go with an arctic theme because it was the middle of winter and the images are from a set that I found on Freepik.

After downloading the set and extracting it, I brought the file into Illustrator where I separated each element, putting them on their own artboard incase I didn’t want to use one and so I could arrange them. From there, I exported each of them as an svg and brought them into Figma to create my design, adding the background and button. As well as taking out a few elements.

Middle of animation
Ending of animation

Once I was happy with the design, I started duplicating elements that I wanted to animate. I did this to make sure I knew where everything went once I was done. The three big animations that I did were the whale jumping, the walrus moving to and from the seal and the narwhal popping out, then waving.

Play the video so see the animation

Artwork:

Image by user10320847 on Freepik