[Part 2] Smart Animate Tutorial

all right welcome back to my channel this is part two of a two-part tutorial series on smart animate we're looking at how to become a pro at smart animate straight from the basics up until how to really use masks and movement to create an engaging presentation so if that sounds interesting subscribe to this channel and make sure you check out this tutorial for those of you who just joined and haven't seen part one we've looked at how to use position size and opacity to make things appear and disappear and move around with smart animate today we're looking at how to use masks to really make pro animations in figma [Music] so without any further waiting let's take a look at our screen and what we have on screen today so you can download this file in the description below there's a link for this very file that you can duplicate and play with so let's look at the final product for part two of this tutorial all right so let's take a look one more time to just dissect what's going on up here so we go all the way back first you'll see that there's a shrinking of this image into a circle kind of like this photo turns into an avatar okay and then what else do you see if you take a closer look at the text it appears in an interesting way it's almost like it's sliding from the side but also appearing at the same time and take a look at the text that appears right underneath this so you'd say it appears from the bottom but it doesn't go all the way from all the way at the bottom of the screen and you might be understanding what we're going to go through today by looking at this and then next you'll see that the avatar shrinks into well it doesn't really shrink but shifts into a purple photo there in an interface so this is really interesting when you're doing a presentation where you're starting from something abstract and then you have to drop it into the ui all right there we go and there's a bunch of other things happening at the same time some things fade in some things have cool animations like this like look at where it comes from all right there's like a oval effect to it where it appears from as a circle and then it expands all the way then it shifts to the side and there's stuff appearing on the side and then everything else fades in pretty simple the last part everything else it's once you get the hang of it it's actually very easy but it looks professional it looks nice so let's go back to the start and let's get through the tutorial part of this all right so our first slide has the photo of this woman so we're going to take this and you'll see it's just straight up a photo very simple we just drop it into the frame and adjust it to the top of the frame so that her face is kind of centered we can work with that so from here we start but what you would do intuitively and for me i would have this slide great then let me figure out what my next slide is so a common d to duplicate i figure out that i'm going to need this to be smaller so i can just make it smaller but i also want it to be in the shape of a circle so let's put it down here um yeah her face doesn't need to be too small so i'm just gonna go ahead and select o for oval goes right about the center of her face i hold option and shift to make it send start from the center and be symmetrical i kind of want to cut it up like this and right now as you see it's just an ellipses on top of a png but i would just want to actually put this below and make this a mask i want her face to be a little bit more centered in this make sure that the ellipses is actually centered with the screen perfect so i think this is good enough for us so i'll just take these two hit command g to group them and here we have a group so let's take a look first let's see if anything breaks now if i prototype it with smart animate so i just connect the two screens make it smart animate ease in and out and i'm gonna leave the time as it is when i click yeah it's kind of fade you see it's just fading out and then this one fades in what we want to do is we need to replicate the layer structure of our destination also here so we've learned by copying this that we actually want it to be in a group and with the mask so there are multiples way multiple ways you can go and create stuff i just go for the easiest which is i know it seems counterintuitive but i just go in select the image delete it from my first frame if i can do it okay i just copy this paste it in the first frame so that i'm 100 sure that figma recognizes this as the exact same group and so now what you do is you want the animation to be like from the outside zooming in into a circle so how do you do that you make the mask the ellipses bigger than the screen so i'm just gonna go like this i'm always holding shift to make sure and i want to make sure that all the edges are included i'm not going to be super picky whether this is centered or not doesn't really matter and then this photo i need it to be full screen so just make sure that i selected this and not the group and i just go always holding shift to keep proportions in photos is not too big of a deal but because it rearranges it but you go like this and now if we've done everything correctly and play it this should actually work so let's try to give it a click all right it's kind of slow because my computer is trying to do a lot of things at the same time but that's it so we've done the first one and we're gonna actually use this method for basically everything else in the prototype so follow me through this grab the title here just like this paste it inside and just go here random placement if i do this this just just appears um it's just there fades in there's no cool anything i first want it to appear from the side so i want to create a rectangle here that in this case is going to make everything inside it visible all right so like with with the ellipses i'm going to put it on top of the whole text group it with the text and then since masks need to be at the bottom and anything that is within that mask shows up i'm going to put it here at the bottom and mark it as a mask if i change the mask to be like this you see that it doesn't show we're gonna take this group that we just created copy it paste it in our first frame and we don't want it to show like this so we're gonna take the mask and shrink it down like this and let's take a look at what this does so to make it a little bit more interesting i also want the text in the first you'll see that it highlights the same text because it recognizes it i want the text to also shift down and down below a little bit and see what happens let's see oh it's starting to show up a little bit more nicely it sort of all comes together all right sort of all comes to the top now i'm going to go a little faster because the second one is pretty much the same thing i'm just going to duplicate this frame and then in this frame i want to have a subtitle for patricia so let's go with this software engineer let's go here random placement again don't worry about it i want to do the same thing with the mask where i want this to appear let's see like this and then put it below group it comment g to group it let's make sure we see what we're doing so expand all the things use this mask and let's make it a little smaller so actually i'm going to make it way smaller not too much because we want it to show showing up a little bit um and again for the same principle i want this to be connected to the frame before but in the frame before i don't want the word to show up so i'm going to take my mask shrink it down and take my text and move it down a little bit now i haven't connected these two frames yet so let me just do that now let's just drag from here way easier smart animate um actually if i made everything 150 no let's just do 300. okay so now if i hit r to reload let's see if it's doing what we want it to do all right it is showing up nicely you see like it's showing up horizontally but it's also showing up from the bottom if i don't want it to be that obvious that it's showing up from the bottom i can always reduce the size of the mask to be like a little bit more narrow oh wrong i need to select the actual mask and not the group make it a little bit more narrow try to do the same here try to do the same here and see if it's a little bit less obvious there we go i want to again duplicate the frame even if it looks a lot different different let's duplicate this and make sure that we only delete the things that we need to delete i don't care about this resizing it's too complicated for what i'm trying to do so i'll just focus on this staying the same and moving to an avatar so i'll just shift it down here and then we have a situation where we have a rectangle kind of doing the role of a header um let's see let's do something nice like this and then put it in the back to put it in the back you just do command square bracket open square bucket square bracket close puts it on top open puts it below so i just want it to be at the bottom of the frame to use this reference to know which size of things i need i'm just going to copy all of the ui that i need so i'm going to need this thing here i already made it the right color so you're not going to need to just smudge you just drop it in place it where you see fit and what i want to do is this thing to be inside there so i'm just going to comment x to cut it select while clicking command so that i go to the very bottom of this ui you see i just drill down the layers on the rectangle paste to paste it on top of it and then okay so please bear with me this is where i realized that i'm doing the same mistake that i did actually a few weeks ago when i was doing this um at work where i realized that this doesn't actually shift inside there nicely because i can't put it inside another group to show up nicely and i'm like okay i just changed the mask to have instead of a hundred whatever corner radius to zero and then i realized that i actually used an ellipses and that's where i realized that i have to redo that i have to change the mask shape in all of this so i'm just going to show you how it's done and i'm going to fast forward i'm basically going to put a square instead of an ellipsis give it 100 corner radius and apply it everywhere apologies uh all right after having fixed my prototype let's see if it works now let's try to let's try to do the thing that i was trying to do so i want to have this here right on top i want it to be slightly smaller maybe just the right size to fit the square so i need to zoom in and go really precise with the size yeah i think i'm there and then i don't want this um ellipses to show up so i'll just change since this is a property of my rectangle i can change it back to zero and figma will animate that from a circle to the square so if i've done everything right it now should do something let's see all right there's something happening there it's working so in order to make it a little smoother we need to apply a couple more masks so i don't want this for example to just be there already when the image transitions i want this to show up through a mask as well so what i'm going to do same exact as before i'm going to just deselect create a rectangle around it and i want it to appear from the bottom corner right here all the way to the top so i want it to show and appear from the bottom so i'm just going to drop it inside this info bucket and at the bottom of it so let's just go here make sure it's all in there yeah it's inside i'm gonna make it a mask all right let's see use this mask great and with masks you've seen that what needs to happen is that this info thing needs to exist in the previous screen as well so now that it has a mask i'm just going to copy it drop it in frame 3 don't panic i'm just going to take the mask go down down to a little corner make sure that nothing shows up great and now let's see what goes on when we animate this ready all right this is kind of cool it's not perfect i would probably want to do something different but it's pretty close like you could play with it play with the timing and the size of the mask and figure out what works for you but we've gone through so much already um in this tutorial so let's finish it up next to up here is a map as usual i'm just gonna come and d duplicate this and go find my map component there we go copy it it's kind of a big map so we'll see how it shows up but i want it to be kind of large it's a frame so i'm just going to expand it and then move this along i mean ideally this would move on its own but make this somewhat realistic with san francisco in the center and then just align this somewhere union square perfect so what i want to happen is i want this to start appearing from the center of this pin so how do i do that same old method click o for ellipses and this time ellipses should work because i don't need it to change shape so ellipses go there and then i hold option and shift to make it grow cinematic symmetrically great um let me actually yeah so from here i see that the ellipses is in is inside this frame and frames kind of work like masks because you can select a frame and say um clip content in it which is great i just want the map inside the frame to show up inside the ellipses so what i need to do is make this a mask as well so let's try and copy this the whole frame paste it inside this frame and once we're here take this ellipsis mask go with option and shift all the way down to the center great but now you're going to say well this kind of still shows up i don't want it to show up like this in the previous one well you'd be right i don't want to either so what we're going to do is we're going to say that this whole frame has zero percent opacity and see what it is that technically means that this will both expand the ellipses the mask and turn the opacity from zero to one hundred let's see what we're doing okay you see this is kind of nice it fades in but it also expands out so that's great we're gonna apply um just one last thing and then you're done then this is the end of it um the last thing that i want to do is i want this map to shift to the side to let other information come in so as usual command d to duplicate given that this is a frame if i had put yeah like it does something automatically so that's fine we're gonna make it shorter the pin can stay there that's cool i'm just gonna command select the image hold shift and start moving while i'm moving i'm holding space bar so that the image doesn't fall out of the frame the moment that my cursor goes outside of this little square okay so there we go my material i'm going to take this nice square select this and then common v actually select this and common v in there this box already has a spot for our map like an empty spot let's go and make sure that we make it nice and clean um and actually we need it to be a little bigger so let's just expand this out okay so this will now fade in let's again give it a little bit of a boost um and let's make it appear from the corner like the other square did so let's see connect the frames and see if it works okay from here all right there's some stuff happening it's because this is not all masked within one thing because this is a frame so let's group it with this and make the rectangle mask a mask for the whole group what i did is i just shifted it out so i'm just gonna try to do the same here i'm gonna take this take the little group that we had actually make it back once so that they match group these two together and then take this mask okay it's working so you still see it a bit if you if you look but maybe that's okay i think we're pretty much done and i'm gonna add a bunch more information and have that show just to complete the screen really i don't care how it shows up it's probably not gonna show up with any animation i'm just going to place it make this aligned with the other one let's just make this large just like the other one and it's pretty much all we've done so let's take a look at our final complete tutorial so let's try and nicely blends in then the second one comes in this kind of cute and then there you go they just fade in and with this and all of the stuff that we've done today this concludes part two of our tutorial you can consider yourself a pro at smart anime this is it and if you've appreciated this tutorial make sure you like and subscribe to the channel because there's going to be more coming last bit if you see me in this setup and it's kind of different from usual this is my living room and that's because my shooting room is full of luggages i'm packing i'm going to be out of the states for two months finally seeing my family i'm really excited for it but i'll keep the content coming so make sure you stay tuned and i'll see you at the next one

Channel: Carola Pescio Canale

Views: 38,757

Keywords:

Id: VgUo3W8BMkA

Length: 22min 40sec (1360 seconds)

Published: Fri Aug 07 2020