Micro Animations in Figma

Before diving into creating my own interactive buttons, I first needed ideas of what I could make and most importantly how to make it. At first I had a look at a short youtube video that was provided by my tutor in resources, to get a look at how someone may create their animated buttons simply.

Watching a quick youtube video discussing and showing how a simple heart button can feel more interactive, at first it’s pretty straight forward. However, I found it really interesting how some easy mistakes can be made. For example, he difference between the ‘Mouse enter’ and ‘On Hover’ buttons didn’t seem too bad but when side by side it’s a pretty big impact.

https://www.youtube.com/watch?v=oOJ5StJr-pU

Micro animations in Figma

UI Animation. Microinteraction for Macroresult

Another resource I took a peak at was also part of the collection provided by my lecturer. A blog that covers many different types of interactions, including some I never even thought of. I found it really interesting and entertaining, having a look at some of the examples that were shown, and I hope to be able to recreate or design my own in a similar fashion.

There were many different types of features that easily become interactive, such as:

UI Animation. Microinteraction for Macroresult - Tubik Blog: Articles About Design

Ideation using Dribble examples

For me, the biggest wall for this project will be trying to find out what I can make, rather than how to make it. Taking into consideration one of the requirements, I need to create three micro animations, that are all related to each other and in the style of a or my own brand.

To get some ideas I’ve decided to take a look at Dribble, for some inspiration. I feel like I would like to create each Micro interaction in stages, as in get more advanced as they go along, but that depends on if I have enough time or not.