Making Micro Interactions is so fun | ADVANCED FIGMA PROTOTYPING & UI DESIGN TACTICS

so I recently posted a video demoing a few micro interactions made inside of figma so let me show you those we got this cool floating logo that bounces around and changes colors when it hits

the edge we've also got this where it's a record and when I drag this little needle onto it it starts playing and we also have a cool little animated slider

here where basically when you turn on this toggle it scales down drops in a few new icons so we're going to make all of that from scratch it's going to be super fun so let's get into it so first

off I've got this cool login screen and you're it's really simple but I want it to be more fun so we could simply just add this little extra bump that kind of

bounces around from spot to spot so what we're going to do is uh basically just grab make sure that it's at a corner Edge already and then duplicate this

over bring it bring it out and just slide it to a different spot right until it gets to an edge always make sure that we're getting to the edges uh that way you know that's where it's going to be bouncing off of right so uh when and

then we'll Loop it back around so that way it comes up bounces hits this Edge and back so the fact that it's going down this way it's got to kind of go back down this way so we'll just bump it

to like something around here okay and then we'll move this over bring it it's going to bounce down maybe it gets like so close to the corner but I don't think we should we're going to edge you guys

we're not we're not going to actually hit the edge yeah it's not going to hit the quarter it's going to be just so just shy of it perfect okay and then

bring this over bump it to the far Edge bring it up so it's like kind of Bounce Bounce right and here we

go okay now it's going back up and maybe it kind of just goes up to that spot too like so so it goes from here to up and then it stops right I think that's a good spot so that's that's a little bit

less FR than I did on my demo but I think that it can work so right there I just uh basically Auto layouted everything so it's a little bit easier to work with since it doesn't have a gap

anymore um I'm just going to Simply uh undo that as well like kind of ungroup it all so that way we've got this frames all sitting back on it as well okay so I'm going to press shift e to get over

to the Prototype tab so just grab the frame and drag it over and from there instead of on click we're going to make this after delay we'll set this delay to zero and basically the lowest amount

that we can do is 1 millisecond but I like to just type zero because I'm going for my mouse over there instead of moving my left hand it's like a small stupid thing but um anyways we're

changing instant to Smart animate and this one we should make it linear uh because it's basically going to bounce it we don't want it to kind of like speed up as it bounces you know um but

we will be changing this around a little bit so I'm going to just start with uh 1,00 milliseconds on each of these transitions but we're probably going to have to update those mostly because at

each of these distances are a little bit different right so uh we're going to have to kind of scale out and up and down the times on those transition durations so just go ahead and do repeat

those steps really quick bring it all the way out make sure that you're updating the delay to zero milliseconds and we've now got it set up done dun done and one good check to look

at because I actually just skipped it on accident is you see this little dot right here uh so that dot is very important basically that means that it's an after delay and you can see now when we're zooming out there's no dot here

and when we zoom in there's an after delay here but not an after delay showing here and that's because I forgot to switch it from click to after delay so just a simple thing U make sure you bump that to zero okay so now let's just

go test it out see see what this is going to look like uh on our on our prototype right okay it's looking pretty good oh you see that that was a big one oh let's

Loop it back actually just for forgot that one little step so we'll Loop it back all the way to the home screen the original starting point we'll set an after delay for that same deal 0o milliseconds so it's moving okay perfect

so it's bouncing bouncing bouncing very slow we got to speed that one up and then very slow there too so it's not too bad otherwise right um that it seems like a relatively amount the the same

amount of distance between each uh and one little trick when you're working with uh uh prototypes like this that are like very chain heavy like this is bump it down like that and and like these

stair steps and it's easier to grab each individual little uh Point uh it's like one of those annoying things where if they're all flat like let me show you if they're all flat uh then they're going

to uh sit where this it's like really hard to grab this one that goes here over here you know so uh just a small little tip there okay so we've got this let's uh Swap this uh linear that one's

pretty good going to here is pretty good and this one I think I'm going to speed this one or slow this one down just a little bit like one add another 100 milliseconds to that and then this I

think we got to take it to like 200 only because it's basically just boom boom right uh and then and then back to here it goes to a th000 that's fine but then heading back to the home um that's a lot

that's a a lot shorter of a distance so let's put it to like 600 maybe 400 let's just try 400 see how that looks shift space to see the prev you let's go okay

that's still too slow that's pretty good that was a little bit too fast though okay so bump this to 500 you kind of have to eyeball this like why are we doing this because it's fun okay we're

learning prototyping we're we're testing things out uh that's why it's awesome to just like play inside of figma right oh that was way too slow okay I'm going

went the wrong way there maybe try 150 okay here we go still too slow there that's a little fast there yeah okay

this one going backwards is too fast so I'm going to make this probably r that to 200 maybe make this uh just let's

just try 100 and see how that goes okay boom boom boom boom still too slow yeah okay so this is too fast still so I'm going to put that to like, 1500

instead of 12200 um and this is still too slow so I'm going to cut that in half down to 50 milliseconds let's see yeah that's perfect yes okay perfect perfect perfect Okay so we've got this

uh what I noticed too was the angle is a little off on this so I'm going to kind of go upwards a little bit on that let's see yeah that's better that's still a little bit too

fast right here okay I think that's that's enough we we've perfected it enough that feels good speed's good on that perfect okay so now the trick is on those old DVD

players on these loaders that happen that they used to change these colors right so we could kind of change the selection color maybe we make this one

green maybe we make this one uh like a orange we'll bump that one to like a like a teal maybe purple yeah I like

purple and then yeah and I think this one goes back to blue and then uh maybe this one

goes back to green well okay like 1 2 3 four five six so let's cut this in threes so let's make only three colors uh so maybe we jump right to the

purple here no let's let's let's leave orange I like orange so we're going to make this one go back to Blue okay then we're going to make this one go back to the green

and then we'll make this one go back to the orange um and uh I I color picked that incorrectly there okay cool okay so now we've got it to where it should

transition properly okay and this is looking okay and this like you know if you were if you were kind of like a normal person you would probably leave it here and just be like yeah I made a fun little thing here's the thing but

we're not normal people you and I you and I we are going to stop and really dive into this and Overkill this okay because I don't like the way that this

is transitioning right going from Orange to to Blue it gets gray right L ugly right here's how we're going to fix that we're going to fix that with variables

so uh let's un unselect everything go to local variables I'm going to uh create a new variable collection we're going to

call this uh loader uh loader color Colo yeah Colo is good so I'm going to create one color and uh then

I'm going to color pick that blue okay boom all right now here's the trick we need to create a new mode okay uh we'll call this one um there you go one two

we'll call this one three and we'll put this one at the orange okay uh cool perfect so we've got those three

modes now all we have to do is uh set all of these to the same exact color and what will that color be well that color

is going to be the uh blue variable right so I I'm going to swap these over go to my library head over

to loader Colo there we go we got color set perfect okay so now what do we do now well here's the thing so we could go switch this over and we've now got this

variable thing showing up here so we can switch this to mod two we can switch this to mode 3 okay so we're we're we've got that but the trouble is is that's still going to transition right that's still going to transition so we need to

actually change this in the Prototype itself okay we don't want to swap modes from the frame level we want to swap modes in the Prototype mode switching so here we go um so inside of this

interaction right here we're going to uh press this little plus button okay we're going to create uh set variable mode spot and we're going to make that

variable mode uh col we're going to go to mode two and then we just need to drag it to the top right uh and this the

new UI on on uh on the ui3 inside of figma is really nice now because you can have control over managing this side like so the actual State thing and then

which one goes first right and it needs to go first this setting variable mode um needs to go first because if we move it over to the next uh frame it's not

going to continue to the next spot because it's already going to be on the next thing already doing some transitions over there so we need to make sure that the setting the variable mode gets up a top on uh above that so

let me switch back over to the old previous UI uh inside of figma and the there just a small change that that we need to manage here is essentially just

collapse these two and move it you cannot move this when it's when it's not collapsed okay so when you're if you're on the old UI move this uh collapse everything down move it up okay now I'm

going to go back to the new UI uh and uh yeah cuz cuz we we live in that world right now um so okay so we're navigating to it so we just need to go repeat those steps right so I'm going to press the plus button I'm going to set variable

mode we're going to switch this from uh loader color two to mode three move this up and let's just keep repeating these steps right so uh plus we'll set the

variable mode move it up color moving it back to one right because we go uh blue green orange blue right so so now we're moving to Blue uh now the next step is

to do that again so now we're going to move it into orange or green sorry so move this up loader color mode two are we at mode one yes we're at mode one now

we're at mode two and then now we do the plus button again variable mode move this up color mode three and finally we will

just move this guy press the plus button varable mode color mode mode one because we're moving it back to Blue okay so let's see what this looks

like boom boom look how nice that is right as it changes as it hits it's going to automatically update this is dope right I like it I like it so you

got that so it's it's super tight feels very retro much more retro than the transitional one right um so yeah hope you enjoyed that now let's get on to the next step because the next one is going

to be just as fun right we're going to make a little mini record player okay so I got this like nice little uh art piece that I'm super good at art with and

Illustrated this spent all day on this so if you say anything bad about me in the comments I will never forgive you please do not drop a comment and please

do not talk about how cool my art is okay H let's just make it even funkier there we go yeah no we're going to undo that okay cool okay so we want to make a record player remember uh remember what

that looked like over here so we drag this guy on Boom it's turning right and then we can drag it off that'd be cool too let's let's go make that dragging off too all right so first what we need

to do is create a component out of this because in order to get a thing that aut that automatically is going to be uh turning constantly we need to be we need

to have a uh a siloed animation right because when we're dragging the the needle onto it right uh let me pull that back up really quick because when we're pulling the needle on

it's it's currently off right now it's not rotating and then now we turn it on and and it is rotating and then we can leave it here and it's going to keep spinning around and around and around right uh now the stuff that I set up was

a little bit of a mess but maybe we can clean this up even more right so let's try that and uh and then let's try to also turn it off if we want so okay so let's get get it on so we're going to

just uh basically turn it into a component command or Control Alt uh and uh K okay K command option K command

option k um there you go Okay cool so I'm going to rename this over to record we'll switch back over to the

design and press add Pro property create a variant and we'll rename this variant to uh rotated State yeah we'll just call it

rotated state that sounds good uh I'm going to duplicate this uh command or control D and then we're going to call this uh second okay we'll call this

first the old default one okay I'm going to just put this in an auto layout so that it's easier to work with and visualize okay so let's go let's go let's go let's go Okay so we've got the

first one here and the second one's here so we've got our records and they're sitting here so it we if we were to animate this nothing would happen because nothing's rotating okay so just

press uh enter when you're selecting that and drag it around and what we're doing now is we're moving it around right and we can't just move it to

365 or 360 Degrees turn because that's still not going to animate anything according to figma it's going to like kind of try to find the path of leas resistance on the movement so uh we want

it to move in a in a clockwise Direction uh and so if we just move it here then it's gonna actually move counterclockwise slightly right we don't want that so we want to move this

actually we want to turn this about uh all the way to here roughly I I usually do like about about 50 uh about 45 Dees

I think no other way let's let's try let's try 90° okay and we're going to make four four clicks so we're going to make it that then we're going to make it that then we're going to make it that and then we're

going to make it go back home right so okay uh 90° turn okay third we'll rename that third press enter we'll we'll make

this another 90° turn so 180 okay duplicate this fourth okay press enter and we'll do

minus 90 again what that 270 or or just positive 90 okay and uh yeah okay and then we should be able to Loop it back let's let's just give this

a try so press shift e and we're now in prototyping land I'm going to just move this over again put an after delay of zero uh make it linear we'll just start with 500 milliseconds see how that feels

all right and since we're make we're moving the same amount of rotation uh as long as it's as it's set to a uh linear it should not like it should feel pretty

smooth it's it should feel pretty but buttery now we just need move this back so that way it's an after delay and we set it to zero and now let's see what

happens okay yo that's perfect look at that smooth very smooth very very smooth okay cool cool cool so let's go make our little T little record table okay so

we'll put it in this all right all right all right all right [Music] boom

perfect okay oh okay uh now we just need to make our needle right so I'm going to just drag a needle with the p the pin

tool and uh yeah I probably keep it flat for now this feels good though so let's see like if I were to rotate it you know would it sit on top yeah

that feels good okay cool cool cool cool so we're going to sit it like that set it right here we'll put that to

a white and uh I'm going to press command com Control Alt zero or and I'm going to press uh com

Control Alt o or command option o and that basically turned it into outlines okay and what that now lets us do is we can put a stroke on the outer side and

I'll put that at I like to do like a inside and then set it to a black and put it at like 30 or 20 pixels or percent because what that's going to do

is make it like uh kind of like shade it a little bit and I'm going to also be able to border radius the edges which looks really great okay cool so last thing I want to do though is put a

little like needle at the tip right so uh I'll duplicate it and I'm going to press the pin tool again and I'll just like pin it right here and that's probably too small maybe that yeah that

feels good okay pinned it all right and then now I'm just going to delete these guys all right perfect that looks really good okay so

we got our we've got our uh needle all set up and it's looking really great let's just make sure that these these are have both have fills okay perfect yeah yeah that's good okay group those

together and so now we've got our needle I'm going to rename this to needle okay sweet sweet sweet sweet okay so I'm going to uh duplicate this Frame now and

just simply put one right here right so uh I'm I want to make sure though that it's like at the right point so that it

like pivots properly you know um yeah that's it but we also need it to be like sitting on the track yeah perfect okay

cool cool cool cool delete the old needle and now we're ready to go okay so shift e uh shift e we're on Prototype now and I'm going to just move this from

from this point right so now what that's doing is it's letting us do an uh do it from the needle right uh and so I can press on drag and now it will basically

drag over to it uh and hopefully trigger the animation um wait it's already triggering uh that's funky we do not want that do we no we don't why is that

happening then well it's because the animation's already happening right it's already clicking on and so what we need to do is to have a zero State on this right so we've got one two 3 four right

and they're basically constantly doing an after delay prototype transition until it gets uh to the next one and then it automatically goes again well we want to set we want to duplicate this right uh so now we're mve move this to

the top and so now we're going to drop the after Delay from this right pretty easy and then we're just going to turn this rotated state to zero right so we got one 2 3 4 you can see the Prototype

now that basically all of them are kind of uh moving right to the next one and then this one's looping back to the first but we still have a zero which is disconnected which we want that to be

the thing because we don't want it to be moving right so all so then we just need to make sure that over on here we've got our rotated State we don't set it to first we set it to

zero so what that means is now it's not rotating anymore and when we move when we drag this over once we let go boom it's playing very very smooth it's like I

know what I'm doing uh let's see what happens if we just put a little drag back right will that work too yes wait it keeps moving though why

is that well it's because it's like kind it State Management is tough inside of uh figma and yeah look at that it kind of like really bugged out there um so

the way we could really override this uh is if we want if we set like a variable to it as well so that we can always be checking if it if it's if it's supposed to be rotating or not most people would

kind of leave it here and be like this is good enough we can probably just leave it here but we're not most people so we're going to stop we're going to go create a variable uh just to be able to make this work so let's just keep it in the loader colors maybe we change may we

rename this uh we'll rename the uh the collection to uh micro interactions okay we're going to create a Boolean variable and we're going to

call this plane okay so uh basically we're sitting here at uh at playing everything is false everything is false which is fine right we we want that to

be the case this is not mode based here what we're going to do is actually do a a logic check inside of the prototype to make sure that uh that it should be playing right cuz here here it should be

playing it should not be playing here so how do we do that well first off we need to set the on drag we need to give a little logic situation to here so we're going to set a variable we're going to

set our variable of uh of playing to True okay we'll move that to the top perfect then we're going to set another one down here when we're turning it off like when we're pulling the

needle off we want to set another variable of of playing to false okay perfect move that to the top again before it moves on

let's just make sure nothing broke okay something broke well that's a bummer and it's because we've got a drag situation

okay how do we fix this okay we need to set a little transition transitional State inside of these two so we're going to set a little proxy thing inside of

this okay so we're going to be dragging it back and forth into this one um and that's going to be the logic check okay okay so we we're dragging it we move it

onto the thing right but this one still is uh is at uh zero okay and one um and then we're going to basically set a

quick little after delay right away that moves over to here uh once once that's done and it's at this point that we can

do our logic check okay so let's play playing equals true move that up all right so let's just confirm that that

worked okay so we move this over I'm going to remove this set variable on drag perfect okay let's see so on drag yes okay so that worked so

let me just run through what I just did really quick so the reason is is we need to do a logic check of is playing

variable true uh then then run it right and for now we're we're still haven't gotten to that stuff yet but what we need to do is we need to make the drag

go and then we need to update the logic so that the logic checking works right but whenever inside of figma you cannot you cannot have a interaction that

transitions to another frame and then run additional logic right we have to run the logic before we move to the next frame well that's difficult on a dragon interaction because Dragon interaction

is happening as your transitioning it's like kind of like a linear thing right so there's no end or beginning um that that can be that can be hit where like it would need to be like here's the

whole transition the logic would need to happen like right about here and there's no way to do that so what we have to do inside of figma is basically make a dragon inter action just a dummy simple

dragon inter action that moves to here um and then from there we want to set an instant after delay that will move it over here right to move it to the next one which is the actual spot that it's

actually playing but the problem is too is we also need to set that the the logic check uh or the logic um action right there which make which basically

transitions it into playing equals true so hope that makes sense I think it should I think it should and so I'm going to like just kind of tree it backwards now we're going to do the same

thing right here but instead of sending it uh you know I'll actually visualize this for you guys too is we'll we'll put it like this so uh we'll put a uh Arrow there

okay then we've got an an arrow here right now this when we when we drag it off right we want it to be dragged off right so we'll move this guy

back perfect so when we drag this guy off it's going to do the logic update and then it's going to send it back to the home all right boom nice little

visualization for you okay so uh now what we'll do is switch over here so on drag it's going to move into this Frame instead right and then this is going to be our quick little check right so

there's no longer going to be a drag interaction uh so in fact we'll probably delete this drag interaction entirely and we're going to uh set this so playing is now going to be set to false

because we're going backwards right and then we're going to move it into uh frame this would be helpful if I rename my layers so

let's um off off but checking okay

on and then on but checking perfect okay so let's just make sure that we're going to the right one uh navigate to off but checking ha I went to the wrong one wait no no it should it should be off it

should be fully off yeah because we're currently off but checking okay so you could see here that it's going on drag does a logic check then sends it over um that then we're on drag does a logic

update and then moves over so perfect so over here we just need to make sure that we're still on rotating state which is zero so that's but perfect that's what

we want okay so now we'll just do a little quick uh CH update over here okay so I'm going to switch over uh I'm going to do that little trick that I was doing earlier so I'm

going to drop this Auto layout and move it over here and uh we're just going to move these guys like slightly a little

bit just so like more quickly visualize the the Prototype interactions okay cool okay so uh for this one we're moving it

down so we need to set a uh a state check right so we're going to set um check if else okay so if

playing is true double equals double equals is basically saying if it is this thing continue okay so if it's

moving um or if it's playing then move continue rotating right if it's not we're going to change

to zero okay perfect so does that make sense so if if we're currently playing right which which we've worked out the logic

over here so if we're currently playing move it to the next uh thing otherwise go back to zero okay now we now we'll do the same thing right here so

uh I'm going to lock it down so we're going to do um check if else okay so if playing is true double equals

true move the the change the third into there otherwise we're going to change the the property back to zero okay and

should we set these to instant I've got it set as instant I think I think instance well no let's let's just let's just we're clean here we're very we're very uh particular people and and as a particular person we need to make sure

that we're animating everything perfectly okay so uh yeah I'm going I'm going to just go ahead and do that transition for us okay so playing is W equal

true all right boom okay and then we're going to add an action we're going to uh change

to four smart animate okay one last one plus check it false

play equals to True move it in there otherwise change to zero you know what's actually cool is this one is going to look like it's the

same as one right but it's not going to be the same as one that's what's really cool nice little fun fact for you so uh

now this should this should just work let's see what happens okay so we're on it's playing it's running it's going

proper I mean there's a little bit of a jump but you know it's okay H it's kind of bugging out here though I don't know why it won't play

for me let's see why it's not playing on drag you know what's really nice to do I I talked about this before

before but let's just like say if playing is true and we just got to make sure that we're putting it on everything okay um and how we do that is we're

going to instead of having typography shown here we're going to basically just uh H we can't actually show it can we

okay here's what we can do we can um we can say that this thing is playing and then right click on the appearance eyeball and do playing okay so just make sure you paste that on all

of these okay here we go let's test all right so it's playing off

perfect H okay so playing is oh you know why is it yes so we've actually set it that's why so we've set

the logic to where it's to where it's going here but then this logic is an extra layer of logic right which is essentially saying hey like we're actually going to change frames here

we're not just running it off of a single prototype interaction and so what we're doing in The Silo is we're basically stopping it entirely and then we're putting it over here and allowing

you to still like move it over right um and so we just need to make sure that we somehow get it back to updating the logic on the inside trying to think of

like how to do that [Music] I don't know if it's possible I don't

know if it's possible to to to fix this bits out of figma like right we can turn it on and it's playing right we can turn it off and that's cool but it still it

still won't work if we turn it back on right we're going to have to reset the Prototype every time right and there's no way to like force a reset right yeah

I think this one dumped me if you can think of a way to fix this um and drop it in the comments because that would be that' be that' be so freaking cool so

would love to know if you could fix that I don't think it's possible though from my from my P brain it it won't work so we did we did get a lot done though right we we got it to where it uh it's

not turning on it's now playing right uh and then we can we can always pull it off and it'll stop playing and then yeah like I mean that's pretty cool right uh the trouble is you know turning it back

on right as a record player is but you know you get it you get it we did it we did our best we did our best bet okay so last thing that I want to do is just a

simple little one toggle switches toggle switches are dope um the very cool uh things to to work with um so what we're going to do is we're going to recreate this little animation that's going to

allow us to um move uh move all of this together okay so I'm going to pull this out I'm going to basically recreate all of this so that you guys can watch me do watch Me While I Work okay I'm just

going to like you know randomize okay cool just so that we're playing uh straight up okay so I'm actually going to rebuild that toggle too but we'll start by let's put these all in in an

auto layout really quick okay we're going to size this guy down way big way small way small um and then we're going to put a toggle right next to it okay so we're going to put this inside of a frame like this just keep it keep it

keep it easy keep it easy for us we just went through a lot of a lot of craziness over there okay on the on the record player I don't I don't want to think about that record player anymore even

though I'm thinking about it so I made a made a frame uh that's a nice little rotation let's put it on a let's put it on well actually no it's it's going to be off so let's put it on

a white with like a maybe like a 30% fill perfect 50% fill is looking good okay now let's let's put it at 100% white on just the Border yeah that's

perfect okay so inside of there we're going to put a little uh handle to be able to turn that toggle right

make that set to to the ffffff right uh okay perfect perfect Okay cool so we've got a little toggle looks pretty good

maybe we set a uh actually yeah let's set a little like darker feel so it kind of feels like almost like a shadow you know yeah that's cool okay perfect hey look at that we're we're

designing things okay there a nice little toggle right now it is currently off um so actually should be to the left by the way uh I've I've gone rounds with

with um some people on whether whether uh the left or right is a toggle off and I actually saw a billboard uh and it was the most egregious thing I've ever seen the billboard was was it said turn your

phone off um when when texting it was like this I was like guys like that's on a toggle handle to the right is on right

right on left off so just you know always do that okay and if you disagree with me let me know in the comments uh and uh and I'll tell you while you're

wrong sorry I'm vibing today we we're feeling pretty good so uh yeah now now what I'm doing is just set a nice little autoa border but uh little little box to it so that way it uh yeah it feels kind

of like a little little border on the center little horizontal uh divider that way we we set it so that we're we're really we're really like locking ourselves into a to like a separate

section right that's why we need that so uh I'm going to just like maybe like brighten this bad boy up yeah that looks good put this like oh that feels pretty

cool okay um yeah I'm G to probably shrink this down just a little bit yeah that's it that's the one okay so currently we're

on Advanced options off Advanced options are off okay so we'll go ahead and duplicate this Frame over here and then we're going to grab all these

guys over here so we'll press shift a we'll make those like this like a new set of icons right and we're going to put just uh literally just like cut it

and uh paste it into this box and I'm just going to double check okay 47 pixels so we'll just bump this down to

47 all right easy peasy we now we need to turn this toggle on cuz honest to the right okay honest to the right just remember

that put this at like maybe we go like viy blue it's kind of indigo nice Advanced options are on and I'm going to press K and we're now

scaling this right so it's going to like have this nice little effect where these guys are going to come in and it's going to scale down okay um pressing shift e now we're back in Prototype land we're

going to press on click for this time using on click today that's great and we'll do a gentle gentle is always super nice I don't really uh I've always struggled with getting developers to recreate it though um but it's just you

know it's one of those things that just looks so cool uh so let's just demo it boom okay and we can't get back actually

shoot okay so uh oh and actually you know what I did it on the whole frame we need to put it on just a toggle okay send it back on just a toggle as

well well okay let's see how this looks perfect wait that looks ugly you know why because the thing does not live inside of the Box previously this is

smart animate 101 guys okay and it's because because it's over here so uh I always just drop it in and then I'll do a uh like basically ignore Auto layout

or absolute position it and then we can fade it out as well let's see how this looks cool that looks pretty good but you see how it kind of goes outside of the box you know

normal people might think that they're okay just moving on from this but we're not normal people you and I right you and I we're going to make sure that that that this thing is cropped okay and so

just one thing that I wanted to call out too is if we crop it on one side uh it's still going to be showing right well why is that it needs to be cropped on both sides so clip contents needs to be

checked on both sides okay there we go nice looking very very beautiful one other cool thing that might might be worth doing for you too if uh if you're

if you're a non-normal person like me is to actually put a a an extended spacing on the left so it actually like not only does it does the whole thing scale but

the thing also moves in and it's like one of those little tiny effects that like you you you see that you see that it moves also it moves also we could even take that a step further and also

increase the gap between them it's hard to visualize what's happening basically what I'm doing is uh is expanding this guy right here right um but uh but yeah basically yeah it's at 115 that's

definitely bigger so let's let's see how that looks now oh you see how it like bounces that's very nice very very nice okay cool there you go we got an advanced

toggle for yall pretty dope go add that into one of your one of your designs let me know let me know where you put it let me know where you put it that's it y'all hope you had a fun time great place to

uh find Micro interactions for reference design spells.com look at this stuff this is so cool look nice little bump bum bump right so just little stuff like

this it's like it's it's hard to like get people to buy in on these you know um but it's like you know actually look this is where I got this whole idea from

was what retro they they do this on their on their um home screen actually you see that what they did they put a they put a variable we could put a

variable on the text to update to the we're not normal people and that's okay that's okay that we're not normal people so we're going to update

this you you bet your you bet your sweet little face we're going to we're going to be changing this so

welcome we're going to call this hey welcome okay but then on mode two it's going to be like like yo all right and

then mode three is going to be like s okay that's perfect and because we've got those on on modes already we

literally just have to assign these text to variables which will be the welcome variable okay and uh yeah let's see what

happens s well hey welcome yo it's like that's the that's the thing about micro interactions is like if you're trying to design micro

interactions like you got to just go for it right because like this is so much better this is so much better right I just love it it's the little things it's

the little things that count and uh you know just kudos to to Retro for uh for pull for pulling this out of me and and us and all of us so yeah anyways go to

spells great site to reference um some fun micro interactions and uh yeah hope you got something out of this see you next time