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


Image by user10320847 on Freepik