My Microinteraction Series: 11 Experiments in UI Animation
A collection of prototypes, learnings, and workarounds using Figma and After Effects.
I've always believed that the best way to truly understand a concept is to build with it. I wanted to deepen my knowledge of core UX principles, and applying them to microinteractions — the small, functional animations that make an interface feel alive — felt like the perfect way to learn and showcase my findings.
Right as I was starting this series, Figma launched Variables. This quickly turned into a sone pe suhaga (icing on the cake) moment. My project now had a double purpose: not only could I explore principles like Visibility of System Status, but I could also dive head-first into Figma's new advanced prototyping features to build them.
But a challenge remained: how to showcase these complex, dynamic prototypes? A static Figma file couldn't capture the feel of the interaction. After consulting a friend, I learned just enough Adobe After Effects to produce polished videos of each concept, adding the final layer of motion and sound.
This is a collection of those 11 experiments and the stories behind them.
The 11 Microinteractions
1. Progress Bar
Watch the progress bar flow smoothly through different states
A foundational interaction exploring how to communicate progress clearly and engagingly. The goal was to create a progress indicator that feels responsive and provides clear visual feedback at each stage.
The Challenge: Creating a progress bar that doesn't feel static or boring, while maintaining clarity about the current state.
The Solution: Implemented smooth transitions between states with subtle animations that guide the eye. The bar fills gradually with a pleasing easing curve, and each milestone is marked with a micro-celebration animation.
The seamless ripple effect that took creative problem-solving
A deep dive into solving a specific animation puzzle. I wanted a seamless circular ripple effect on click, but getting it to work in Smart Animate was tricky.
The Challenge: Getting a seamless circular ripple effect to work in Smart Animate.
The Solution: Split the outer ring into two separate halves. I created Smart Animate interactions for the upper and lower halves individually and then pieced them together in the final component. What seemed like a limitation became an opportunity for creative problem-solving.
Smart AnimateRipple EffectCreative Problem Solving
3. Upload/Progress Button
A single button guiding users through the entire upload flow
This interaction is all about Visibility of System Status, a fundamental UX principle. I wanted a single button to guide the user through the entire upload flow, making every step crystal clear.
The Challenge: Provide clear feedback throughout the upload process without cluttering the interface.
The Solution: The component moves through three distinct states:
Upload (arrow icon)
Processing (pulsing dot with loading animation)
Success (checkmark with celebration)
Added audio cues — a 'pop' on click and a 'chime' on success — to reinforce the feedback. Sound design transformed this from a simple visual into a multi-sensory experience.
Visibility of System StatusAudio FeedbackState Management
4. FAB-Inspired Share Button
Fluid transformation from share button to social options
Inspired by Material Design's Floating Action Button (FAB), this interaction applies Fitt's Law by keeping the primary action clear and subsequent choices easy to reach.
The Challenge: Make social sharing feel fluid and not cluttered, while providing quick access to multiple platforms.
The Solution: The "Share" button itself morphs and transforms into social icons with a playful, springy animation. Once an option is selected, the entire component collapses into a success checkmark, making the whole flow feel like one fluid motion. The spring physics add personality without sacrificing usability.
Smooth expansion with typewriter placeholder animation
Inspired by a slick animation on Pinterest. The goal was to make the transition from a simple icon to an active search field feel really smooth and inviting.
The Challenge: Create a smooth, inviting search transition that draws users' attention without being distracting.
The Solution: On click, the icon expands into the search bar with a "typewriter" effect on the placeholder text. This small detail actively draws the user's eye and invites them to type. The expansion uses a custom easing curve that feels natural and responsive.
The mesmerizing liquid merging effect using blend modes
A fun technical experiment learning the "supafast" liquid merging effect. The magic is a combination of two blend modes (Color Burn and Color Dodge) and a layer blur.
The Challenge: The blur that creates the liquid effect made the blobs look grainy and less polished.
The Solution: Duplicated the blob group, set the bottom group's blend mode back to 'Pass Through', and lowered its opacity. This created a solid 'fill' that smoothed out the graininess while keeping the merge effect intact. Sometimes the solution is layering techniques rather than finding a single perfect setting.
Blend ModesAfter EffectsVisual EffectsLoading States
7. Volume Control with Figma Variables
Entire volume control built with just two components
A deep dive into the power of Figma Variables. I challenged myself to build this entire volume control with only two components.
The Challenge: Traditionally, this would have required a separate variant for each volume level — tedious and hard to maintain.
The Solution: By using variables to manage the volume state, I could control the entire interaction dynamically. A perfect example of how variables can massively streamline complex prototypes. The fill animates smoothly, the icon changes responsively, and it all works with just component states and variable bindings.
My very first experiment with adding audio to an animation. The visual itself is a fairly standard dot loader, but the goal was to make the waiting process feel more tangible and less passive.
The Challenge: Make a loading state feel engaging rather than passive or boring.
The Solution: Added a subtle "water-drop" sound that syncs with each dot as it changes position. It's a small detail, but it completely changes the feel of the component. The combination of visual rhythm and audio feedback creates a much more engaging waiting experience.
A toggle is a simple component, but it can have so many different personalities. This is an exploration of how different animation styles can change the feel of a simple control.
The Challenge: Inject character into a common UI element without sacrificing clarity.
The Solution: Experimented with different visual feedback for the "on" and "off" states. From playful bounces to smooth slides, each variation explores how much personality you can inject into a toggle while keeping it functional and clear.
UI ComponentsAnimation StylesExplorationDesign Language
🔟 Checkmark Toggle
Clear, positive feedback through state transformation
Another toggle experiment, but this time with a focus on clear, positive feedback. The idea was to create an unambiguous state change that users immediately understand.
The Challenge: Provide instant, unmistakable confirmation that the toggle was activated.
The Solution: The toggle switch smoothly transitions into a checkmark, giving the user instant confirmation of their action. The morphing animation bridges the gap between the two icons, making the transformation feel natural and intentional.
One more toggle, this time focused on absolute clarity. The goal was to create an unambiguous state change with a bit of personality.
The Challenge: Make the toggle state impossible to misinterpret, even at a glance.
The Solution: The text ("On" / "Off") animates in with a subtle bounce, providing clear and satisfying feedback that is impossible to misinterpret. The text scaling and color changes work together with the toggle movement to create a cohesive, joyful interaction.
Text AnimationClaritySatisfying FeedbackAccessibility
What I Learned After 11 Animations
This series was a fantastic learning experience, directly achieving the goals I set for myself. A few key themes emerged:
💡 UX Principles Click When You Build Them
Reading about "Visibility of System Status" is one thing. Building the 3-state upload button made it stick. Prototyping the FAB-inspired share button was a tangible lesson in Fitt's Law.
Applying the principles was, by far, the best way to learn them. Theory gives you the framework, but practice gives you intuition.
🔧 Variables Are Worth the Headache
The calculator and volume control were complex, and I often wished for nested conditionals or easier string-to-number conversions. But the power to build truly dynamic prototypes (instead of just click-throughs) was the sone pe suhaga moment I was hoping for.
It's a game-changer for prototyping. The initial learning curve pays off exponentially.
🎨 Your Best Ideas Come from Workarounds
The onDrag bug in the calculator forced me to invent the "invisible arrow" method, which turned out to be a better solution. The arrow button ripple forced me to "break" the component to make it work.
These "jugaad" moments were the most valuable part of the process. Constraints breed creativity.
✨ Polish is How You Communicate Value
To truly showcase an interaction, a static file isn't enough. Learning After Effects was essential because it allowed me to communicate the feel of the work.
Adding audio to the drop loader and upload button transformed them from simple animations into tactile feedback. This final 10% of polish is what sells the idea and makes the user experience tangible for stakeholders and users alike.
What's Next?
This project was just the beginning. I'm planning to create detailed tutorials for each interaction to share on platforms like X (Twitter) and Instagram, so others can learn from my process.
I'm currently cleaning up these files to share them all on the Figma Community — so you can remix, learn from, and build upon these experiments.
Follow along for updates:
Dribbble — See these animations and more design work
Thanks for reading! If you found this helpful, I'd love to hear which interaction resonated with you most. Feel free to reach out on any platform above.
