Interactive Dropdown Menu Animation in Figama

today I'm going to show you how we can create this drop-down animation in pigma so first let's take a look what we are going to create today so when you mouse over you get this overnight and then when you mouse over in each item you get these nice smooth animations so this is what we are going to create today let's take a look so in this case I have already created a UI just for this test case and you can see I also have several components at the top here and I will explain you one by one how we create that but you don't need to worry about this UI complicated part here you can even do with your own so for that I just create a new screen here at the right side and I will show you how I created here so first let's take a look at so let's say this is our bar like this here so for that first let's change the background color to something similar so let's get this pick and then sorry we just want to change the background color of the yep that's good and then we change this to white so we just change the background of the frame to this light gray and then the menu item as white now we have it and if you notice here I have a slight shadow there that's why it just pops out so of course you can click here and you can be in the effects you can add a drop shadow and then you can private it with functions also there's a plug-in that I will show you in the next video how you can arrange that I mean you can play with them the shadow effects and then how you can make it looks that so for this case let's add us maybe a small border here just one pixels and then just radius to 4 pixels and then just give a maybe a label menu drop-down yep there we go so we just okay put it there in the center so this is our writer next we need now we have this ready next we need like a three dots so for that we just create a small circle here let's click the shift and then just drag and drop so maybe let's make it a little more bigger just in case for okay I know it's bit bigger but for this case it works and then we just duplicate good next so we need the drop down so for drop down items we select a rectangle and then we create a rectangle here maybe let's keep it same with last he mini wait and then we give a radius of four and and change the color to dy good and then we also give a stroke of four pixels and then maybe okay next we need the items to write so for that let's type menu list items here cool now we have item so we just duplicate here and then you keep using command D u so that it just keeps duplicating so it's a very nice function in pigma so you just select all and then just in the central they're cool now as you notice it's this a static item so how do you make it as an animation right so for that we just take this and then put it outside here there good and then we click on this item these three dots and then he'd right slightly click the prototype and then right after he click hold and you see there's a small circle pops up here so you click on that and then just drag to hear so I see notice when you draw here nothing happens because this is now just an item it's not a component or app tray so when you want to move to that it has to be a frame or it has to be a component so let's change it as a component so for this case let's create a component and then now from here if you notice now you can link to it so we just click on that now it's linked to that so after you linking to that you get some interactive properties here at the moment it says as on click you can make it as on click or all over so for this case let's make it a font week and then what you want to do after you click on this it says navigate to component 1 which is this one means it will go from here to there no we don't want this to be navigated to there instead we want it to open it as an overlay or a drop down line so let's change it to us and overlay I will show you how to navigating navigating is like from one screen to another screen its jumps to that screen here it's just an overlay so let's create it as an overlay so for all the way also there are other settings here that is centered top left top right blah blah blah but we want it right below oft it so for that what you have to do is there's no option for that just go manual so you select manual and what happens is danica naughties a new item or something similar to that duplicate right Oh shows here actually this is mr. preview that shows how it will be looking like when you select to the manual so you can just click drag and drop it right below this so that when you click on these it shows or it drops down right below that ok good and next other properties we have here is director so whenever you click outside you notice that the properties goes off so you make sure you click on this arrow so that the properties comes back here so you also want to click or close this overlay when you click outside so basically when you click outside in the normal HTML it is closed off right so we want to so you just check on this one so that it goes off add background behind overlay you don't need that so what is that we basically we use it for pop-up like normal so that you will have a bad I mean you don't need to make a transparent background by yourself so this program creates that for you so that is very good next so let's just go take a look so also I forgot to mention you can see and small playhead icon shows here that means now this is animate it is playable or an animated and this is the first frame that will be played let's say you have so many other animated frames there as well and this is a starting frame for your animation so make sure that if you want to change from this frame to some other frame so you need to go to the properties settings and then change the starting frame to some other frame if you want to so in this case we already we only have one frame that is animated so we just keep it there and yeah so now let's go and take a look at this so let's click here and then at the top right you can see a percent icon which is like a play button so you click on that so it takes you to the play page so now when you when you click outside you can see a small blue highlight here that that's the item that we can I will just zoom in here to show you that clearly here you can see this one so yeah so that's a writer you know it's linked to that pop-up so let's click and you see that it shows there and we click outside it goes off that's because you selected this option here to click outside let's say a lot if you uncheck here what happens is that it comes and then even if you click outside nothing happens so make sure you choose close when clicking outside so that it disappears when you click outside but still if you notice it's good but the navigation is not that smooth so how can we make a little more smoother so for that it comes and if you notice here the type of animation it's like an instant so instead of that you want to make it like am I mean this all function you also have move in and out but that doesn't work for in this case let's see you see does dissolve so what happens is that you can see a preview here this is what happens so there's ease in and ease up which is like when it pops it disappears it just fades out and I mean it appears it's fading now let's go back and take a look at our animation now so pick out you see here it just fades in and fades out it seems and fades out nice so that's it it's very simple and we have two more things that we need to do is linking to these or winning mouse over the other items how it looks like so for that what you have to do is you just need to duplicate so first before that you need to go to the design time here and then you just click on the component and then they just duplicate it so it's just simple [Music] and you just duplicated these three items they're good now you click here and if you come back here prototype you can notice that okay this is your first night I'm sorry I just need to drop it here so that it looks nice now okay let's put it somewhere there good now when you mouse over the first item I want this to be are different colors so for that we come to the design and we just changed let's say a pink or something like that yep and then second item and I come here I want the second item to be pink ass so for that I just do something like this I think you get the idea so what happens is that you double click on this and you go to the prototype and you get this circle click drag to there and then change from unclick to while over in that means when you mouse over over it it just go it supposed to go to this word so how do you do that it's a navigate no you shouldn't navigate to that instead you should swap so what happens it just replaces this with this one something like this that's called swapping right so it just swaps so you will see this one now let's go take a look at our animation come here plague comes Minnie Mouse over you see that what happens is that the second item which was showing here is slapping with this current element and Minnie Mouse out it goes back to the other item so let's do the same for the another one here here while overing instead of navigate slap and that's it and also you can do it is in and out there's a piece all there's also smart animate you can do that here which is also cool you can play with it let's try here for smart animate if it works let's see how that goes but basically the same because it it just checks the component and then gives you an animation that works best for it so even if you use the smart animate or easy name basically it works the same in this case so yeah so that's it that's what we gonna I wanted to show you today so let's take a look at this in this example with a good design one so if you wanted to take a look at here so it's simple I will quickly show here because this is already a component so I create here and navigate to on plague I bought it as an all-pro name and you can see here it just shows right bottom there so it's good and then close when clicking outside and then instead of in instant I change to dissolve East in and out and timing is good for me and then from open service when I click on this I want this to be as a mouse over so when you like overing I want to slap to that and then this hole is in and out cool the same way I do the same for the other two everything while overing while overing [Music] yeah quickly change all the other animations so that we can see how that looks let's go back now if you notice the play it still shows here right how do I go back to that play icon there so for that we do our settings change here because I want this to be the first item to be played so for that I go here and I change the starting frame to dashboard my services so now you can see that play button came here so now it will be the first item to be played so when I go back here and click play icon or person icon now you can see this is my first thing to be played so when I click over you can see here that's the item so when I click here it shows there and when I mouse over it started animating so thanks for watching that's what I wanted to show is here today hope this helps you to create a better interactive animation in pigma so I will be keep posting more useful real-life examples of my projects that I used to do and keep watching and keep practicing and play subscribe to my channel I will be keep posting more videos similar to this Thanks

Channel: Interactive Design Studio

Views: 33,773

Keywords: UI/UX, UI, UX, Interactive, Design, Figma, Animation, UI Animation, User Experience Design, User Interface Design, Web Design, App Design

Id: LiNnpD8SbIc

Length: 15min 31sec (931 seconds)

Published: Tue Apr 07 2020