Loading...
Loading...
A collection of prototypes, learnings, and creative workarounds using Figma Variables and After Effects.
Interaction Designer
Figma, After Effects
UX Principles + Prototyping
The Origin
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.
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.
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.
Each experiment explores a specific UX principle or technical challenge. Here are the stories behind them.
[Process visuals / Figma prototype breakdown coming soon]
A progress bar seems simple — until you try to make it feel alive. I wanted to explore how the most basic feedback mechanism could become an opportunity for delight.
Most progress bars feel lifeless. They fill up, and that's it. I implemented smooth easing curves that accelerate and decelerate naturally, added subtle milestone celebrations, and used Figma Variables to control the fill dynamically rather than creating dozens of static frames.
Even the simplest interactions can become moments of delight. The key is treating "feedback" as an opportunity for design, not just a technical requirement.
[Process visuals / Figma prototype breakdown coming soon]
I saw a beautiful circular ripple effect and thought, "I can build that in Figma." I was wrong — at first. What followed was a lesson in creative constraints.
Smart Animate couldn't handle a full circular ripple. The animation would break or jump unnaturally when the ring completed its rotation. So I split the outer ring into two halves — top and bottom — and animated each separately. Then I layered them in a single component.
When a tool says no, it's often asking you to think differently. Breaking components apart can lead to more maintainable, flexible designs.
[Process visuals / Figma prototype breakdown coming soon]
What if a single button could tell an entire story? Upload → Processing → Success. Three acts in one component.
Users often feel anxious during uploads. "Did it work? Is it stuck?" The button morphs through three distinct states with clear visual and audio cues. A satisfying "pop" on click, a pulsing animation during processing, and a triumphant chime on success.
Multi-sensory feedback isn't a luxury — it's how you build trust. When users can hear and see that something worked, they believe it.
[Process visuals / Figma prototype breakdown coming soon]
Material Design's Floating Action Button is iconic. I wanted to understand why it works — by building my own version with a twist.
Social sharing often feels cluttered. Too many icons, too many choices. The share button itself transforms into the options. Spring physics make the icons feel like they're being "released" from the button. Once selected, everything collapses back into a confirmation checkmark.
Fitt's Law isn't just theory — it's the difference between a tap that feels effortless and one that feels like work. Proximity and motion work together.
[Process visuals / Figma prototype breakdown coming soon]
I spotted a search animation on Pinterest that made me stop scrolling. That's the goal: an interaction so smooth it makes you pause.
Search bars are often hidden or feel like afterthoughts. The icon expands into the bar with a custom easing curve. Then the placeholder text types itself out letter by letter — a subtle invitation that draws your eye and says "go ahead, type something."
Micro-feedback shapes behavior. A typewriter effect is tiny, but it turns a passive element into an active invitation.
[Process visuals / Figma prototype breakdown coming soon]
The "liquid blob" effect has been everywhere. I wanted to understand the magic behind it — turns out it's blend modes, not code.
The blur that creates the liquid merge effect also made everything look grainy and unpolished. I duplicated the blob group: one with the blend mode effect, one without. The clean layer underneath acts as a "fill" that smooths out the grain while preserving the liquid merge on top.
Sometimes the solution isn't fixing the effect — it's layering a clean version underneath. Stacking techniques often beats tweaking settings.
[Process visuals / Figma prototype breakdown coming soon]
Figma Variables had just launched. I wanted to stress-test them with something that would normally require 100+ variants: a volume slider.
Traditional prototyping would need a separate frame for each volume level. 0%, 10%, 20%... that's tedious and impossible to maintain. With Variables, the entire slider runs off two components and a single number variable. The fill, the icon state, and the handle position all respond to one source of truth.
Variables aren't just convenient — they fundamentally change what's possible in Figma. Dynamic prototypes beat static click-throughs every time.
[Process visuals / Figma prototype breakdown coming soon]
My first experiment with sound. The visual was nothing special — a standard dot loader. But I wanted to see if audio could transform it.
Loading states are inherently passive. You're asking users to wait. I synced a soft "water drop" sound to each dot's movement. Suddenly the loader had rhythm. It felt alive, almost meditative instead of frustrating.
Sound is underrated in UI. A simple audio cue can completely change the emotional tone of an interaction.
[Process visuals / Figma prototype breakdown coming soon]
A toggle is a toggle is a toggle. Or is it? I wanted to see how many personalities could fit into the same 44x24 pixel box.
Toggles are everywhere, and they all look the same. I created variations: bouncy, smooth, snappy, springy. Each one feels different while doing the exact same thing. Some feel playful, some feel premium, some feel fast.
The same functionality can have completely different personalities. Animation style is a design decision, not just a flourish.
[Process visuals / Figma prototype breakdown coming soon]
What if the toggle didn't just flip — what if it transformed into its own confirmation?
Standard toggles change position, but the user still has to interpret what "right" means. The toggle knob morphs into a checkmark when activated. There's no ambiguity — the icon itself says "yes, this is on."
Morphing animations can eliminate the need for labels. When the icon IS the state, understanding is instant.
[Process visuals / Figma prototype breakdown coming soon]
One final toggle experiment — this time, absolute clarity. No icons, no interpretation. Just the words "On" and "Off."
Some users need explicit confirmation. Icons can be misread. The text animates in with a subtle bounce. "On" appears in the enabled state, "Off" in the disabled. Combined with color changes, it's zero-ambiguity.
Accessibility isn't just screen readers — it's removing all possible points of confusion. Sometimes words are clearer than icons.
A few key themes emerged from this exploration.
Reading about "Visibility of System Status" is one thing. Building the 3-state upload button made it stick. Theory gives you the framework, but practice gives you intuition.
The power to build truly dynamic prototypes (instead of just click-throughs) was the game-changer I was hoping for. The initial learning curve pays off exponentially.
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.
Learning After Effects was essential because it allowed me to communicate the feel of the work. Adding audio transformed simple animations into tactile feedback.
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.
Check out my Dribbble for animations, Figma Community for prototypes, and Twitter/Instagram for bite-sized tips and behind-the-scenes content.
The best way to learn is to build. The best way to teach is to share what you've built.
If you found this helpful, I'd love to hear which interaction resonated with you most. Feel free to reach out!