30 Days of Figma | Creating Micro Interactions

Thandiwe Tembo
2 min readSep 7, 2022

--

TLDR | Using Smart Animate to create micro animations like an open-close hamburger menu icon and object transitions

Menu icon animation
Object transitions animation

Review | Today's video was creating Micro-interactions in Figma under 9 mins-UI Animation Series — 09 by Design with Aashish. This was another quick and simple one that covered 2 micro-interactions. Another tutorial using smart animate but this time with animations really emphasizing the idea of the importance of competent names with smart animate

Reflection | Micro-interactions like error messages, button presses, moving a toggle, progress bars, etc were things that I knew existed and recognized as part of the UI & UX but never thought to produce in previous Figma prototypes. These are even interactions I’ve coded in variations of my own portfolio site but never sat to think about. I took it a step further with the last animation, not only transitioning through the 3 frames but also selecting the objects to do transitions. This might be my favorite tutorial so far!

--

--

Thandiwe Tembo

Designer passionate about creating accessible, inclusive, & impactful digital products that elevate the human experience