Designing Micro-interactions using only Figma

hey guys what's up welcome back and in today's video i didn't have much of an agenda actually i was just browsing through dribble and i found this awesome shot by uh salomon for horizon um in this shot he has designed a bottom navigation interaction it's a micro interaction where if you can if you click on different uh tabs on the icon on the bottom it expands and has a quirky animation where it expands and show you the name as well as the icon so this is the shot as soon as i saw this shirt i thought can you do this just using figma i mean just use the figma prototyping that we have on figma and not use anything else to do this i'm not sure how he has designed it but i just wanted to try it out in just figma so yeah that's today's video let's get started [Music] okay guys so before we start let's have a really quick look on the interaction that we are going to make in figma today so if you see it's a bottom navigation and before clicking the state before clicking on any of the icons in the bottom it just shows the icon and when you tap on the icon it expands with how with the background as well as a label with the icon and the color of the icon and the text also changes on selection so to do that let's just hop on to figma and quickly set up the artboard and then we'll start to animate it okay so guys we are in figma right now and this is the figma file that i have what i have done is i have just quickly set it up the four states before tab selected states of all the items so here you can see in the first one home is expanded the second one the likes is expanded the third one search is expanded the fourth room profile is expanded okay let me just quickly give you the overview of what exactly the selected will contain so in each of the selected pill you have a label an icon and you have a background right uh same for everything actually just that the colors is different based on the selected states what i have also done is i have in the selected set i have written the background and the label for all the other items so because we just want home to be highlighted in the first one i have hidden the uh background for the like as well as the label for life by giving it a zero percent opacity so that's not visible so if i just quickly make it like hundred percent so if you see uh it's actually there but i have hidden it by giving it a pass through of zero percent so that we don't see this uh particular background and the like one in the first frame similarly in the second frame i have hidden the backgrounds of all these um other icons and the third one i have written for everyone so this is what i have done now uh what we are going to use is we are going to use the property of prototyping in figma called auto animate and what auto animate does is um it basically animates the difference between the two states so if there is a difference in one state and there is a difference in the second state it will try to animate it animate between it okay so it's really important that you name the uh files really correctly remain the layers actually really correctly so that it can automate it automatically in each of the frames okay so uh what we'll do is right now is we want to animate uh when you click on the like button we'll go in the prototyping setting and what we want to do is we first want to animate um the like button uh to expand it so what i'll do is i'll just drag it here and select it um yeah and it says on tab navigate to and will navigate to the second screen we have selected auto animate smart animate here and we are giving it as an ease and ease out so it automatically is individual and 300 millisecond is typically a sweet spot of animations when you do micro interactions so that's why it's kept to 300 milliseconds just keep it to default and you have smart animate enabled and what we also want is when we click on home in the second tab we should be able to go to the first app right and again we will keep the same uh settings navigate to smart animate easy measured and 300 milliseconds now just let's quickly review what and how it looks like so we are in the prototyping one if i click on this one uh okay one minute i need to refresh this one let's just quickly see how it looks like so we are loading the yeah so we are here in the screen and if you click click on the home icon you see home the tab moves to the home and this collapses if i click on this one you see so it's partially working now if you see here yes so ah we are able to do it like really partially so what uh we can so this is almost like almost eighty percent there very simply i just tagged the two things uh if you can just quickly look at the animation that there on the shot you see uh the home icon expands from the left whereas all the other icons expand from the right so the home expands to the left and pushes the icons on the right and all the other i can expand from the left and pushes the other icon on the left to the more left right so to do that animation uh in figma we need to do the same thing as well so what we want to do is we will go to the home tab right and home we want to expand it from left to right so what we'll do is we'll come to home we'll go to the background and we will make just go to the design bit and just so that everything is visible i'll just quickly make it 100 what i'll do is i'll just squeeze it down to the left so that when i move from this frame to the first frame it looks like it's expanding as i told you smart animate will uh animate the difference between these two states so it will also animate this the changing state of the background so we want to do it smaller and we'll again give it a positive represent now we just have to look at how the home thing works okay so let's just see how it works sometime it takes time to load actually so yeah so i'll go here likes and let's see if the homeworks work yes so if you see yeah so if you see the home is expanding from the left because we have given it the background to be squeezed in the first frame right um so what we'll do is we'll do the same thing for all the tabs and i'll quickly uh do about this bit and we'll come back actually okay so i'm just gonna speed up this [Music] [Music] guys i have just mapped out all the uh screens from the prototyping bit uh what i have done is the same thing i have just linked actually the all the states to the highlighted sets if i click on the like one then it's linked to the like state from all the like icon it's linked to the like expanded state all of the close collapsed profile icon it's linked to the profile state which is here and all of the collapsed search icons it's linked back to the search state so now just let's quickly look at how it turns out so we are at home and we click on the likes voila it works search works profile also works and if you see it's all almost the same the home expands on the left pushes the icon to the right and all the other bits pushes the icon to the left right and it collapsed really smoothly so i think we are we made justice to what the shot was um we made it like really close to 1995 of what it is by just using figma right uh i'll try to link up this file in the uh description below so that you can try it out and also let me know i'll keep coming with small uh prototyping and micro interactions just using figma and other tools and if you like to see more just comment below let me know what you want to see next and i'll try to bring it for you so guys do share and subscribe and i'll see you in my next video [Music] you

Channel: Akash Yadav

Views: 19,914

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, sketch

Id: o2lasfxSALw

Length: 10min 0sec (600 seconds)

Published: Sat Aug 22 2020