Introduction to Figma Smart Animation

This project started with an inspiration from a designer named Howard Le (IG: uxui_howard.le). His instagram account is dedicated to posting design assets, animations, and sources in a form of short video known as reels. Through his videos, I realized how flexible the smart animation on Figma. With the right technique and manipulation, it can even create a seamless transition similar to the one from a video editing software. Therefore, it begin my case study on Figma smart animation for User Interface.

The Journal’s layout is originated from one of Howard Le’s design.
The Sakura’s layout is inspired by an interface from a game called Love and DeepSpace.
The Enchanted Sweet’s layout is inspired by a merch shop website released by a YouTuber named LilyPichu in 2023.

Applying Smart Animation into Function

After getting familiarized with the smart animation on Figma, I started to wonder whether there is a way for the animation to be functional. So far, I have seen that the animation on a mobile website only play a role in bringing the aesthetic of the design, however it does not contribute much to the experience when engaging with the website.

Gardenia Kitchen

At this stage, I had an idea to design a menu website for a cafe with a gimmick of a rotating plate/menu. All I had to do was to create a component and use the component in every single menu page. By just changing the rotation value and connecting the pages, we have a rotating plate as a menu on our table. In addition to that, I added a like button using overlay as an added detail to the design.

Water Loading

While designing the Gardenia Kitchen, I was scrolling on instagram for design ideas. This is when I found out how people have been making a water filling up animation using the smart animation on Figma. I immediately went to my iPad and draw some wave illustration to try out the design. Although the result is much simpler than the rotating menu, the animation is more complicated because of the location and time precision I had to make for a smooth transition.

Storytelling with Smart Animation

Storytelling has been a main interest of mine when designing a personal project. This is why I wanted to know to what extend Figma, a prototyping software, can create a story-worthy animation similar to that made from Adobe Animate or After Effects.

Lure w Me

Taking an idea from the water loading animation, I made Lure w me, a storytelling mobile website that explains the variety of fishing for beginners. It took me a while to finish the design because of the amount of layers used in Lure w Me. Needless to day, the result is not as amazing as I expected because there are delays between animation due to the easing effect. It should be noted that I put too much focus on how each layer would move between each frame instead of the content of the website itself.

Functional Storytelling Website using Smart Animation

After about two months, I was ready to wrap up the case study and post the result of my trial and error on my design social media account. This is when I found out about the existance of invitation website. Nowadays, poeple are willing to spend a ton on a website that can help them spread the news about their event and manage the RSVP of their guest. It make sense if businesses or education organizations are using this websites for their meeting or conference. What surprises me is the fact that invitational websites are used for wedding and birthday invitation as well.

This news had brought me back to this case study because I wanted to a design children birthday party invitation website and a gender reveal website. Since the design is made with Figma, I couldn’t corporate complex media such as video and audio. Therefore, I use smart animation to create an interesting transition between each frame.