Motion Design with Figma #02 - Micro Interactions

In this chapter, I'll show you some micro interactions I made based on my Motion Design with Figma course.

I'm a huge Taylor Swift's fan, and I wanted to have fun while doing this, so I used her albums, songs, and visual eras as an inspiration for the UI.

The main goal is that the user can navigate through the musician's visual eras and learn more about each song of her albums (there's always a fun fact to be discovered).

First, I modified the horizontal scrollable menu with each album/era of the singer, changing the background according to their visuals. Once the user taps one of the songs, the picture expands to be at the top of the page. At the bottom, there are suggestions of other content the user might like within a horizontal scrollable container:

Second, here's the save/favorite micro interaction. See that the heart kinds of expands once tapped? And, at the navigation menu, there's a red circle at the right upper corner of the heart, indicating a another clue that there's new content saved:

There you have it! It is a subtle but really helpful to create delight to the user.

What I learned:

• It's really important to maintain the same name of elements that you want to transform from one page to another, otherwise, smart animate won't work.

• You should always adjust the timing of the animation and transition so that the element does not take too long or to move or it moves so fast that it seems like the user had an aneurism @_@

Thank you for reading my post, I hope you could understand my process and what I'm able to do now with Figma :)