Loading...
Back to Work
Interaction Design2023-2024
Micro-Interactions Collection
11 experiments in UI animation exploring UX principles through Figma Variables and After Effects
Role
Interaction Designer
Duration
Ongoing collection (2023-2024)
Technologies & Skills
AnimationFigma VariablesAfter EffectsUX PrinciplesPrototypingAudio Design
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
The Interactive Return Calculator
One of the most complex interactions of the series, built for a freelance project. The goal was to have a slider that instantly updates a donut chart and multiple data fields.
Challenge: My first attempt using Figma's onDrag interaction was too buggy—it kept producing negative values. I had to find a workaround.
Solution: I ended up placing invisible arrows (0% opacity) on the sides of the slider and used onMouse Enter/onMouse Leave interactions to reliably increment the values. This "jugaad" (creative workaround) ended up being far smoother and more reliable.
Figma VariablesData VisualizationWorkaround
2
The Dynamic Arrow Button
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.
Challenge: Getting a seamless circular ripple effect to work in Smart Animate.
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.
Smart AnimateRipple EffectCreative Problem Solving
3
The Upload/Progress Button
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.
Challenge: Provide clear feedback throughout the upload process.
Solution: The component moves through three distinct states: Upload (arrow icon) → Processing (pulsing dot) → Success (checkmark). Added audio cues — a 'pop' on click and a 'chime' on success — to reinforce the feedback.
Visibility of System StatusAudio FeedbackState Management
4
The FAB-Inspired Share Button
Inspired by Material Design's Floating Action Button (FAB), applying Fitt's Law by keeping the primary action clear and subsequent choices easy to reach.
Challenge: Make social sharing feel fluid and not cluttered.
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.
Fitt's LawMaterial DesignTransform Animation
5
The Animated Search Bar
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.
Challenge: Create a smooth, inviting search transition.
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.
Typewriter EffectSearch UXMicro-feedback
6
The Liquid Loader
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.
Challenge: The blur that creates the liquid effect made the blobs look grainy.
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.
Blend ModesAfter EffectsVisual Effects
7
Volume Control with Figma Variables
A deep dive into the power of Figma Variables. Challenged myself to build this entire volume control with only two components.
Challenge: Traditionally, this would have required a separate variant for each volume level.
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.
Figma VariablesDynamic PrototypingState Management
8
The Drop(Dot) Loader
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.
Challenge: Make a loading state feel engaging rather than passive.
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.
Audio DesignLoading StatesSensory Feedback
9
Toggle Switch Iterations
A toggle is a simple component, but it can have so many different personalities. An exploration of how different animation styles can change the feel of a simple control.
Challenge: Inject character into a common UI element.
Solution: Played with different visual feedback for the "on" and "off" states, exploring how much personality you could inject into a toggle.
UI ComponentsAnimation StylesExploration
10
The Checkmark Toggle
Another toggle experiment, but this time with a focus on clear, positive feedback. The idea was to create an unambiguous state change.
Challenge: Provide instant, unmistakable confirmation.
Solution: The toggle switch smoothly transitions into a checkmark, giving the user instant confirmation of their action.
Clear FeedbackState ConfirmationToggle Design
11
The On/Off Toggle (with Text)
One more toggle, this time focused on clarity. The goal was to create an unambiguous state change with a bit of personality.
Challenge: Make the toggle state impossible to misinterpret.
Solution: The text ("On" / "Off") animates in with a subtle bounce, providing clear and satisfying feedback that is impossible to misinterpret.
Text AnimationClaritySatisfying Feedback
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.
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.
Your Best Ideas Come from Workarounds
The onDrag bug in the calculator forced me to invent the "invisible arrow" method, which was 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.
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.
You can follow my work and get these assets as soon as they drop: