Animation in Figma
For this final project, I learned all about Figma’s smart animate feature. I also increased my knowledge of auto layout. I created a total of three different interfaces — each demonstrating a different way of using smart animate.
Tools Used
Illustrator, Figma
Year
Fall 2023
Team Size
One
Class
Prototyping II
Interface 1: Evergreen
Summary
For this interface, I followed a Youtube tutorial on creating a spinning carousel. I used this knowledge to create a homepage for a salad bowl restaurant called Evergreen. I played a lot with styles of animation for this page. I wanted it to appear playful and imperfect, so I set the animation style to “bounce”.
Process
To start, I created a circle. Then, I downloaded three stock photos of veggie bowls, and removed the backgrounds with photoshop. I positioned them equally around the circle. Then, I created a separate page for each bowl. On each of these pages I rotated the circle so that the corresponding bowl was visible. I prototyped the buttons, and set the transition to smart animate.
Something important that I learned was that in order for smart animate to work, the names have to match across frames. I ran into a roadblock when the animation was working for me, but I realized that the carousel has to have the same name from frame to frame.
Interface 2: Flixify
Summary
For this interface, I followed a tutorial on creating a card set where the cards expand/shrink depending on which card the user hovers over. Using this knowledge, I created an animated landing page for a streaming service.
Process
To start, I created a frame consisting of two cards. For the default state, I set both cards’ height in the frame to “Fill”. For the state where the user hovers over the top card, I set the top card’s height to fixed. I expanded it, added more content, and increased the size of the graphic .I left the bottom card’s height set to fill. For the state where the user hovers over the bottom card, I did the same but reversed. I repeated this whole process with a new column, so that I could have a total of four cards. Next, I animated the cards. I set it so that when a card is hovered over, it switches to the expanded instance through smart animate.
Interface 3: Wander
Summary
For this interface, I used smart animate to create a parallax effect between two frames. Out of all interfaces created for this project, this one took the most fine-tuning. I wanted the animation to be smooth, and I found Figma often behaving in ways that I didn’t expect.
Process
To start, I downloaded a free vector image of a mountain scene. I opened this image in Illustrator and separated the layers into two different groups: front and back.
I uploaded this vectors into Figma. For the default state, I left everything as is. But for the second frame, I dragged the front layer below the viewport. I also zoomed up on the back layer. I set the transition to use smart animate between the frames when the button is clicked. Smart animate works in this scenario because the front layers and back layers have the same names on each frame.
The hardest part was getting the text to animate in the way I wanted. Ultimately, I decided on having the button text and button fade out, but have the top text slide in.
