How to Prototype in Figma: Smart Animate, Prototyping and Scrolls (Tutorial)

hey guys in this tutorial we're going to create this prototype in figma now the source file is going to be available for free in the link in the description i also want to remind you before you get started that i just released a free ui ux design course which you can see on the link in the description where basically i'm sharing all my eight years of experience on how to get started in the best way as well as extra and free source files from these youtube videos now without further ado let's get started okay so we're now in the figma project and by the way you can download this source file for free in the link in the description and let's go ahead and let's start using the prototyping features so in order to access them you need to click on this tab right here next to design and as you can see now once we hover over the frames for example we can see that we have this element right here which we can simply click and drag around in the other frames and this is going to create the connections in order for us to do the prototyping so as you can see we have a slightly different and on the right we're going to have all of the options for creating the different type of interactions and also overflow behaviors which we're going to see in just a moment now in order to actually go ahead and start seeing the prototype you have to click on this play button right here as you can see we can access our prototype now some cool features which you might want to be aware of is for example once you click on the frame and then on show prototype settings you can see that over here we can essentially select the different options such as the device so we're going to have an iphone if we go back in to the play version so obviously you need to find one which is going to fit your account with your frame up perfectly you can also change the background so for example if you want a white background in the prototype you can do that very easily you can also adjust the starting frame since uh by default the very first frame is going to be the starting one but you can select any of the frames right here so for example if i select the fourth one i can simply click on play and the fourth one is going to be the default and a quick shortcut is simply dragging around this icon in order to change the starting frame so yeah just something to keep in mind now let's go and let's start actually doing the the prototyping so as you can see we created this very first interaction i'm going to delete it and what we're going to do is we're going to link this button to go to the next page instead so we're going to essentially create this link right away and we're also going to change the animation so we're going to go in and select the push and as you can see we have the different options available we can push it from top left to bar bottom and so on and you can see the preview of the animation right here so this is going to be really really useful so let's go ahead and let's see what actually that looks like so as you can see if i click on get started boom i go to the very next screen directly from here so let's do the same also for this button right here so we're going to link it to the very next screen going to have a push animation and let's do also the same for this one right here and as we click on play and let's actually go back to the very first one so you can simply go and go back over here by clicking the r button so it's going to bring to the very first one so as you can see get started continue and boom we are on the very last frame so that's a pretty easy way to create a quick animations but now we're going to go one step further and before we do that we're actually going to change the background of the prototype just so that it stands out a little bit more and one more thing that i want to show you is how you can actually create a different type of interactions so of or actually micro interactions so as you can see over here if we say something around the lines of uh hey figma i want to connect this button to this other one so that when i hover over it i'm going to see a different version of that button now you can easily do that by simply making this a frame so as you can see frame selection and then i go back over here and i link it and now we're going to explore these elements right here so we're going to use it while hovering and now what we're going to say to figma is that hey while i'm hovering over this button i wanted to open an overlay and now we have the options of the overlay opened and i want it to be manual now what manual basically it's going to enable you to change the uh the setting manually so i'm just going to do it one more time since it didn't uh fully got that so open overlay and as you can see we have manual and the menu is going to overlay uh manually wherever you put this uh this overlay so once i click on the play button and i go back to the first one nothing should happen because i haven't changed the color of the button yet but if i do so let's do it like that play again as you can see now i have this nice over effect which is essentially going to give me a quick over and uh just a a very small you know animation which you can easily tweak afterwards so let's use the prototyping again let's select this uh this effect and let's say for example that want the animation not to be instant but i wanted to have a dissolve so this is essentially going to give us a nice smooth effect when it comes to this micro animation so this is just a small hacker which i use from uh from time to time obviously you will need to adapt and create an additional hotspot and just be you know mindful of how you're using it but i just wanted to share this this week hack which i use from time to time when it comes to prototyping now i want to also show you these smart animation features over here so let's duplicate the screen twice and what i'm gonna do is i'm actually going to bring this card over here in order to access the smart animator you simply have to select the very first one actually i think it linked like the very complex illustration behind so be sure that the link the first screen with the other screen and then what you're going to select over here in the animation panel is smart animate and if you go back on the play button of course we need to tell it that it's uh while hovering you can see that now we can create like this very cool effects and essentially bring our prototypes to the next level when it comes to animations and things of that nature we're gonna do is we're going to actually have a look at the scrolling behavior since this can be really useful inside of figma so the very first thing that we're gonna do is we're actually going to duplicate this group and bring it over here on the right so we can create a horizontal scrolling behavior now in order for this to work we actually have to select both groups group them all together and we need to create a frame selection of this group we're going to see why in just a minute so let's go over here on the prototyping and let's select with this frame selected the horizontal scrolling and as you can see if we go back over here we can now scroll but the issue is that it's not going to go all the way to the right so in order to solve this we simply have to use a command key and just bring this to the part of the section where we want the scrolling to behave as you can see now it's working totally fine so another thing when it comes to this uh specific uh part of the flow is that if you don't want to see the protruding elements you simply have to click on the frame itself click on clip content and then you're only going to see the portion which is actually visible so i hope this uh quick prototyping of figma video tutorial was helpful and i want to remind you that on my youtube channel i have over 400 videos sharing my over 8 years of experience working as a ux designer both software tutorials and also freelancing and job and career advice so i'll see you in the next video

Channel: Pierluigi Giglio

Views: 11,823

Keywords:

Id: LX7Mfj-1tiA

Length: 9min 49sec (589 seconds)

Published: Thu Apr 15 2021