Speaker A
If you're like me and don't have the talent or patience to make crazy stuff like this.
Learn 11 micro animations to enhance your UI with easy Figma tutorials and a free file to create sleek, interactive designs.
Key Takeaways
- Micro animations enhance user experience by making interfaces feel more interactive and polished.
- Figma can be used effectively to prototype and create these animations with simple techniques like masking, auto layout, and smart animate.
- Delays and easing functions play a crucial role in making animations feel natural and satisfying.
- Small UI details like hover states and tooltips improve usability without overwhelming the design.
- Sharing free Figma files helps designers quickly implement and customize these micro interactions.
What the video covers
- Introduction to 11 simple micro animations that improve UI design using Figma.
- Button hover and click effects using text sliding and scaling animations.
- Keyboard shortcut animations to help users remember shortcuts with visual feedback.
- Toast notifications with interactive loading and success animations.
- Name tag pop-ups on hover for small headshots using auto layout and smart animate.
- Shimmer stroke effect created with angular gradients and masking for a modern look.
- Delayed tooltips triggered after hovering for 1 second with custom easing for bounce.
- Text hover pop-outs to display additional info without cluttering the interface.
- Progress bar animations that keep users engaged during form completion.
- Card swipe interactions for notification centers with smooth stacking and movement.
Full Transcript — Download SRT & Markdown
Speaker A
Then let me show you how to create sleek, satisfying interactions that make your designs feel high-end and actually fun to use.
Speaker A
As always, the Figma file is in the description.
Speaker A
Let's do this.
Speaker A
One, simple button hover effect.
Speaker A
First, if you're as unprepared as I am, then this one is perfect for you.
Speaker A
I'd create a nice button, but of course, forget the hover and click state, so I'd just end up frantically picking some random colors.
Speaker A
Instead of that, do this.
Speaker A
Check out what this agency does with the text that slides up as we hover on it and the buttons that get smaller when we click on them.
Speaker A
To do that on Figma, it's actually really simple, all we have is a mask here with two sets of text that I hope you can see.
Speaker A
We've got a simple hover effect for the first one, and then for our click animation, we have a while pressing effect here, it works really well and then you don't have to mess around with all sorts of different colors.
Speaker A
You could even mix it up with some horizontal or diagonal movement like this micro interaction library built for Webflow.
Speaker A
Two, keyboard shortcuts.
Speaker A
Now, you probably aren't designing a whole lot of interfaces that require keyboard shortcuts.
Speaker A
But one thing's for sure, they're really easy to forget.
Speaker A
Something like this little micro animation from Rainbow Wallet makes it a little harder for them to completely escape from memory.
Speaker A
Here's what we've mocked up in Figma.
Speaker A
And for the most part, I think it looks really cool.
Speaker A
Now, unfortunately, it's not possible to bind the command or shift key, so we had to use X and A as our substitutes instead.
Speaker A
But once we've got those bound and press them all at the same time, we get a fantastic little success message too.
Speaker A
Three, toast notifications.
Speaker A
Toast.
Speaker A
Something you eat in the morning, something you do at a wedding, and something very important for UX.
Speaker A
Vercel has some pretty good toast notifications, though I like Linear's a little bit more.
Speaker A
But I think we can do even better.
Speaker A
Besides the obvious animation of it sliding up, we can add a lot of interactive bits to these cute little cards from simple loading animations to celebratory success messages with some sexy particle animations.
Speaker A
All of this is just some simple delay triggers with a single click trigger in here.
Speaker A
And we're pretty much good to go.
Speaker A
Four, name tag on hover.
Speaker A
If you're displaying any sort of small headshot on your website, then when users hover on it, have a teeny name tag pop up.
Speaker A
Huddle has this effect and typically so do agencies with teams of creatives on them.
Speaker A
And the best part is, this is super simple to put together in Figma.
Speaker A
All we need is these two frames here, the first is exactly how you'd expect it to be.
Speaker A
And the second is where the name tag actually pops out.
Speaker A
We've just used auto layout here by hitting Shift A, rounding out the corners all the way.
Speaker A
And then adjusting the spacings ever so slightly.
Speaker A
And finally, adding a fill, changing it to black.
Speaker A
And then changing our text color to white.
Speaker A
After adding a little bit of tilt and getting it positioned well.
Speaker A
We can come back to our first frame here where I have the exact same name tag.
Speaker A
Just moved down a little bit.
Speaker A
And set the opacity to zero.
Speaker A
To connect these, we just add a hover animation with smart animate and some custom easing that takes 500 milliseconds, has a stiffness of 636 and a dampening of 24.
Speaker A
This is important and creates the difference between these two animations.
Speaker A
Five, shimmer stroke.
Speaker A
The shimmer stroke or gradient stroke is a really modern animation and sites like this microinteraction.co and this Wix site do it really well.
Speaker A
This is what it ends up looking like in Figma and we had to use a couple tricks to get this to work.
Speaker A
But I think it ends up looking really nice.
Speaker A
The basic idea is we create an outline of our stroke using a subtract with two rectangles in it.
Speaker A
Then we create an angular gradient on a circle like this.
Speaker A
We can then put these two together and mask them.
Speaker A
So that we get this stroke effect.
Speaker A
Lastly, we animate this angular gradient rotating.
Speaker A
And we get the shimmer effect.
Speaker A
Because of the way we do things, we get a shimmer that moves faster on the edges here than it does on the top and bottom.
Speaker A
Personally, I don't mind it, but some people might, so we added in a pause and play button here.
Speaker A
So the user can toggle that whenever they like.
Speaker A
Six, delayed tooltips.
Speaker A
This is both a micro interaction and a massively helpful UX tip.
Speaker A
When we hover on any icon in this note-taking app, Obsidian, for more than a second.
Speaker A
We get a pop-up to explain what the icon actually does.
Speaker A
This is really nice when you have a lot of icons, but not a lot of space to actually label them all.
Speaker A
Implementing this is very simple if you know what you're doing.
Speaker A
All we have is a trigger on mouse enter, which you might not have used before.
Speaker A
And then a trigger on mouse leave to bring us back to our original frame.
Speaker A
We add a 1,000 millisecond delay, so only if we hover on it for a full second, do we actually get the animation pop up.
Speaker A
We've also used a custom easing with these settings to get a bit more bounce to it.
Speaker A
Seven, text hover pop-out.
Speaker A
Next up is text hovers and Figma's community page is just an awesome example of this.
Speaker A
It's a really great way to show what you're actually talking about without writing more words or taking up more space with images.
Speaker A
A Studio actually does something very similar, although their images are a touch more playful than Figma's.
Speaker A
Regardless, this is a really easy thing to set up in Figma.
Speaker A
All we have are some hover interactions with our frames with the elements that pop out when we hover.
Speaker A
And I'm going to be honest, this one might just be my favorite of the whole list, it's just so fun to play with.
Speaker A
Eight, progress bar.
Speaker A
Let's be honest, forms are boring.
Speaker A
But sometimes they're unavoidable and that's why tools like Linear have used some super smooth micro interactions for their progress bar to keep the user engaged.
Speaker A
We can create a really nice animation in Figma by taking our stroke here and masking it to a purple rectangle.
Speaker A
So that we can slide along our purple rectangle and it looks like we're drawing in the stroke.
Speaker A
It works really well around the circles and pretty much everything else is just fading in and out the elements.
Speaker A
Nine, card swipe.
Speaker A
This one by dub.co is just such a cool UI idea.
Speaker A
It kind of reminds me of iMessage images.
Speaker A
I do like where they have it in the sidebar here, but for ours, we're going to have it in the bottom right as kind of a notification center.
Speaker A
Once you've got all of your cards like so, we can stack them one on top of the other.
Speaker A
Just like this.
Speaker A
And then it's as simple as rotating the card out of the way and setting the opacity to 0%.
Speaker A
And then scaling up the cards in behind.
Speaker A
And shifting them down.
Speaker A
One important detail is to make sure that as you're dragging this card, the other cards move down to fill the space where the first card was.
Speaker A
That's what really completes this effect and makes it feel like they're moving forward.
Speaker A
Ten, search bar expansion.
Speaker A
Search bars.
Speaker A
They're large, clunky, and definitely can get in the way.
Speaker A
So we pack them down into the universally accepted search icon, the magnifying glass.
Speaker A
And by doing that, we have a great opportunity to add some interaction when the user clicks on it.
Speaker A
Apple themselves have a pretty good interaction when you click on the search icon.
Speaker A
All we have is this in Figma, it's just three frames with a click interaction on the first one.
Speaker A
And then a little bit of delay that takes us to the last one here.
Speaker A
If we try it out, it looks a little something like this and I really like how the magnifying glass disappears into the circle here.
Speaker A
Eleven, hover for upgrade details.
Speaker A
This is just another fantastic micro interaction by Dub.
Speaker A
When we hover on this, we get to see the limits if we upgrade to Pro.
Speaker A
Although, I'm not a big fan of the crossed out text there.
Speaker A
So we're going to do things a little differently.
Speaker A
Moving that over to Figma, all we've done is when we hover on this, we get a nice slide-in effect instead of that cross out and the 20 disappears.
Speaker A
Very simple interaction, but definitely a thoughtful one.
Speaker A
And that is it.
Speaker A
If you enjoyed, consider subscribing.
Speaker A
The Figma file with all the micro interactions will be in the first link in the description down below.
Speaker A
And I'll see you in the next one.
Topics:micro animationsUI designFigma tutorialinteraction designbutton hovertoast notificationstooltip delayprogress bar animationcard swipe UIsearch bar animation
