Hey friends, today we are talking about micro animations and interactions
in Figma and we're gonna do it using this little heart right here.
Bop!
So to start, you're gonna need a heart icon and luckily our guy, Miggi, has
already created a tutorial for that.
I will link that in this post so that you can learn how to create
those hearts and then come on back.
So let's get started.
We've got our heart down here and we're gonna make a couple of copies of this.
So we're gonna do option shift, click and drag.
And I need command D D D D.
So we've got the all the hearts we need
These two, we're gonna click on the hearts and we're going
to make them negative eight.
So a little bit turned, and then we're gonna do the same thing here, but with 8.
So our goal is to make this go, do, do, do, do.
The next one we're gonna do is we're gonna grab this original heart down here.
We're gonna pull it down and we're gonna do the click state.
So to do the click state, we are going to make it a little bit larger.
I'm holding down option and shift.
and if you're finding that it's clipping off, you probably have clip content on.
So turn that off.
We're gonna go here, we're gonna do shift X to swap it
to a fill instead of a stroke.
And we're gonna make it this little pink.
Next, we're going to take the original again, pop it down here, shift X, make it
pink again, and I'm gonna duplicate that.
Next we're going to take this guy.
We're gonna make him lighter pink.
And then final, we're just gonna take one of these and we're
gonna have the outlined again.
So these are all of the hearts that you're gonna need for this.
Our goal is that it shakes when you hover over it, when you
click on it, it turns pink.
when I hover over it again, it turns light pink, and if I click on
it, it'll go back to the original.
So let's start out with the shake, and I'm gonna do this every time I say shake.
So right now we're gonna click on here.
We're gonna do shift E to switch to prototype mode.
We're gonna make a little noodle from here to here, and
we're going to do mouse enter.
My gut reaction when I was first testing this out was to do on hover,
but I'm gonna show you at the end why I didn't end up doing that.
So we've got, when the mouse enters, it's gonna switch to here.
For here, we're going to go after delay.
We're gonna switch this to one.
Switch this to a hundred.
Gonna do the same thing for the next couple.
After delay, 100 more, one, and after delay.
Okay.
Now on this last one, we've landed here as the final one, and when the mouse
leaves, I want it to start over again.
So I'm gonna go from here.
I'm gonna do mouse leave because we've done mouse enter.
Now, once it goes away, we wanted to start at the beginning, mouse
leave and start back at the original.
So now we've got our shaking part.
next.
We're gonna do what happens when we click it.
So I'm gonna select this top row of hearts right here, and
I'm gonna drag from one of them.
It's gonna drag from all of them now because they're all selected.
And I'm gonna go to here, and this is on click I.
The reason I'm doing it from all of them is because no matter where
it's doing the little shimmy, at any point, I wanna be able to click there.
So I do on click and it turns into this heart, and I'm gonna do smart
animate, make sure that's turned on because it's gonna give it a
little bit of a better transition.
From there, I'm gonna grab onto this frame and do again after delay.
and we're gonna do a really quick one, one millisecond, and a hundred.
And then we're actually gonna do a longer one from here after delay a thousand.
And a thousand.
So we're adding this one in because it's gonna give us some time between landing on
this kind of final state of the selected heart and going to the hover state.
I don't want it immediately to go to that light pink.
So giving it this one second delay right here, allows the user
to have time to kind of exit.
After that, we're gonna do another mouse enter from here.
when the mouse enters this heart, it's gonna go to another kind of hover state.
And we also want a mouse leave on here too, so that when you leave, you
go back to the regular filled state.
Mouse leave.
We also don't need the full thousand on this, so let's do 200
And same thing with this one, 200.
And lastly, we need a way to get back to the original.
I'm realizing this guy is a little turned.
We want him at zero.
and we're gonna go from the final filled state and the filled hover state, and
we're gonna go back to prototyping, and we are going to do on click get to here.
Now that we've got this guy, we want to have the option that if you click
on it, it goes back to the selected state, or if you leave this one,
then it goes back to the original.
So this is a mouse leave.
So before we try this out, what we wanna do is make this an interactive component.
so that when you wanna add this to your designs, you only have
to move around one icon and not all of these different spaces.
So what we're gonna do is, we're going to select all of these.
We're gonna create component set.
When I do shift E, all of my prototyping is still there.
We're gonna grab this little guy, we're gonna pop 'em over here.
Let's put 'em on an art board and let's try it out.
So five shift E.
Let's start flow three.
Now we've got our little guy here.
Boo boop.
Clicking on it, changed over.
Now it's light pink.
Click it.
Perfect.
So before I leave, I wanna show you a couple other scenarios of kind
of why I did things the way I did.
remember I was talking about mouse enter versus hover and adding
in a couple additional hearts.
So let's look at this, right.
We've got our happy heart here.
That is what I'm calling the one that worked the way that we wanted it.
It does the little jiggle click can go out.
There we go.
Lovely.
If I had switched to hover, you could see the difference here is
that I'm hovering over it, so every time I'm still over this heart.
It just keeps wiggling.
I only want it to wiggle once I wanna leave and then come back.
I don't want it to keep going.
So that's what the difference of using the move in versus the hover did for us here.
Then less noodles.
What do I mean by that?
So on this option, shift E to see them all.
I took out all these noodles here where as you can see right here,
I've got a, a bundle of noodles here.
Why did I add those all in?
If I don't add 'em in it takes out kind of less chaos, but you can see that
the clicking option doesn't show up until it's done doing the little wiggle
With this one.
I can click at any time while it's moving.
Versus this one, I have to wait until it's done.
Then a couple other things of kind of why did I do it.
Removing the second pink heart.
So on here.
I don't have that the, I guess it's the third one really.
That third heart over here, versus when we actually did it, we added that in.
So what's the difference?
When I click on it, I'm still in the heart and it's already turned to the light pink.
When I click on it, I wanna be able to go out and then
back in to get the light pink.
That's why we did it to a thousand milliseconds.
If you, obviously, if you stay in here for more than a thousand, it's then
gonna turn to pink, but that gives you a little bit of a leeway to kind of
get outta the heart and then back in, as opposed to here, it's gonna go to
pink right away as soon as you move.
And then this last one, what happens if I remove that last heart?
So why did I add in this last one here?
Why couldn't I have just gone right from this pink all the way back?
Let's see what happens.
Wiggle, great, the wiggle starts immediately again.
I don't want the wiggle to happen until I go out, now I can go back.
I wanna click, I wanna leave, and then I want the wiggle to
start as opposed to this one.
The wiggle happens immediately after I un-click it.
So those are totally just my opinions of how I wanted it to work
and why I did it the way I did it,
But I just wanted to show you how the different interactions that you choose can
lead to different looks in the prototypes.
Hopefully that's helpful and I'll see you all later.
Bye.