Figma Search Bar Animation | Search Box Input Field Interaction (2021)

hi everyone and welcome to today's video in today's video i'm going to be showing you how to create a search bar animation in figma in a few simple and easy steps so what we're going to have is we're going to have a product like this in our phone so this is something that looks like the google animation but when what happens is when you click into this search bar you can see there's actually an animation running and then as you can see there is that dot click and then we can even go further and click on our on our keyboard and type in some words for example let me type in somewhat f for example and as you can see it creates an animation that looks something like the way it would look in a search bar icon and then what you can do is you can also click on this and then you can close that and go back so i'll show you how to do this in a few simple and easy steps so if you want to learn how to do this watch this video all right let's get into today's video [Music] alright so first things first we're going to create a new project just click on this so our project is loading so we're going to rename it to anything we want but we're going to call ours search animation all right so that will do so next we're going to insert a frame we're going to choose the iphone 13 pro max i love this okay so next time we're going to change this to some form of dark gray just make it a little bit dark gray something like that right so it will do so next i'm going to type in some text so let's just make sure our text is size 50. i'm gonna use the font type poppins all right then i'm gonna use the phone the size medium all right so i'm gonna type in some text i'm going to call this search all right so this is gonna be our design then we're gonna space this a little bit we're gonna space it by five all right so we're gonna place this right around there this is gonna act as our main icon then we're gonna give this different colors all right so we're gonna color this s we're gonna give it uh a blue yeah some form of blue all right that would do then we're gonna give our re some red color we have red i'm gonna give our a a yellow color i'm gonna give her our blue color just give it that blue and i'm gonna give this c a green color just make sure it's something greenish that would do now gonna give our edge a red color right that's it basically then we're gonna um create our search so i'm gonna give this there some dimensions that i already typed on mine is 366 by fifty one uh yours can be any size we're just gonna center that i'm gonna give this a radius of 30. all right so the size does not matter so gonna give this a stroke just want to make sure the stroke is is that so we can set the fill to white it can be white actually so we're going to change the stroke color just gonna make it something lighter right around there some lighter gray all right that would that looks better much better right then we're gonna design the bottom of it so just zoom in i'm gonna design the bottom of it so i'm gonna draw some small tiny boxes right here this just this is just for design purposes don't worry about that so i'm going to type in some texture i'm going to type in search then i'm going to change this font to font 15. all right then we're gonna set that to extra light okay let's set that to light i'm gonna duplicate this text just make sure it's right at the top i'm going to change this to language all right that's just for design purposes but it's going to be our focus so we're going to design this a little bit we're going to make use of a plugin i have i'm going to make use of the font or some icons just wait for it to load and i'm going to search for search barcode search i'm gonna make use of this search icon all right this will be useful all right then we're gonna open the the font assignment icons again then we're gonna select a microphone right that would do okay so you have our microphone right there and then we have our search right here then gonna zoom in and just reduce the size of that a little bit they're gonna just give it a darker color just adjust this all right that looks much better all right then off to our microphone right here then we're going to reduce the size of this slightly just make sure to hold shift while reducing it so to maintain the size all right then i'm going to zoom in i just want to change this red this top to something red in color so i'm going to draw a rectangle right there all right then i'm going to give this a radius of 10. i'm gonna place that right right on top of it i'm going to give this a blue color it's going to be blue and i'm going to change the sh the color of the entire microphone through something red all right so after that we can zoom out and yeah we have our design right there all right so next we're gonna highlight the entire search icon then i'm gonna right click and then we're gonna make this a component so i'm gonna create a component of to that so gonna call this search for net all right so next we're going to just drag our our search component to the site for just some few minutes right so i'm going to create some animations we're going to create some effects on our search we're going to make use and create some effects so next we're gonna add the variant so after we made this component we're gonna add the variant so in our first variant we're gonna so we wanna make sure when the user clicks in this box you want to just make sure that these there is a shadow that appears right around the back and that there is a a blinking a blinking icon right around there so i'm going to change the variance we're going to give it uh an effect we're going to give it a shadow effect we're going to give it so the effect we're going to set this way to zero we're going to change the blur to 10 then i'm going to change this to 20 right as you can see there is some shadow it's not too much i don't want it to be too much okay so actually let's make that a little bit more visible let's change this to um 30 all right that would do right so next we want want an icon that actually blinks all right so we're gonna uh so there is this icon right there so i brought that so when i type in that icon so this is actually a text so this is uh that's straight bar so we're gonna give this a phone to of 20 right that looks much better then we want it to appear right around there okay all right so next we want to create that blinking uh kind of effect so uh what you want to do is want to want want it to be that when a user clicks on the on the main search component it actually changes to this so what you're going to do is we're going to create a prototype so just go to prototyping then i'm going to add an interaction so i'm going to say on tap when i use the tabs in here it's going to change to variant 2 and then we want that to happen on smart animate that can happen smartly we just want that take only 100 milliseconds so it should actually happen quickly all right so that that that will happen now what what next what next we want this to actually have a blinking kind of effect okay we don't need to just stay the way it is so wanted to be reversing and having a blink so what happens is just select the main search component back to your design then we're going to add a new variant so click right here on these three dots we're going to add a new variant so only for any variant it's actually going to be like this but then we're gonna we're also gonna give our new variant the same the same effects we gave this we're gonna give it uh we're gonna give the y value zero i'm gonna give it a blur of ten then i'm gonna change this opacity to thirty okay so just like the former so what happens is we want this to be transitioning between this and this after a certain delay so we're gonna go to variant two then we're gonna create an interaction we're gonna say after delay of um let's change this to 400 after delay we want that to change to variant three so you can actually happen instantly then we're gonna go to variant three then you also wanna create a an effect so we actually don't need any we we actually don't need any tap effect so we actually don't even need that drag effect so on variant three we're just gonna add another interaction we're gonna say uh also after a delay of 400 milliseconds we want this to be transitioning back to this and back and forth it's just like that it's going to change back to variant two so this will happen uh instantly so variant two keep changing divine three and warranty will be going back and forth just like that all right and there we have it so we can test our sorry before we test it so uh next we can we can drag the main component so just alt and copy alt and drag they're gonna drag our main component place it back center it right so we can test it let's run and see what it will look like all right so our app has just loaded so as you can see it has loaded so when someone clicks in the box it will actually be blinking like that it will be actually after after it has clicked it will go to variant 2 and then variant will be interchanging with variant 3 as you can see so that we've achieved the blinking effect okay so next we are going to work on the search when someone types on the keyboard all right so next one add another variant so we're going to go back to the main search component so we're going to uh so just make sure such component is selected then we're going to add a new variant click on the three dots we're going to add a new variant all right so we can zoom in so out to variant for so inside variant for we're going to enlarge the rectangle so let's first enlarge the entire component so inside variant we're gonna enlarge this rectangle a little bit just like that all right so next we're gonna uh draw a line just make sure that line is selected we just wanna make sure it's at zero okay so the angle is actually at zero all right so we have a line right there so we're going to change the line size to 0.5 then i'm going to change its color to something light grayish right right around there actually let's set its size to one that won't do any harm in any way all right so uh we want to make sure that when the user types in the keyboard we can actually have another variant come in place so we're gonna type in the text so when the user clicks on f we want to make sure that a variety of options actually pop up for the user to select from so i'm going to duplicate this search bar let's make a duplicate three times i'm holding alt on my keyboard all right so let's position that slightly right so we're gonna duplicate this so we're gonna type in some text so when a user types types in we're going to have some options pop up figma search animation it's actually going to give a user some hints so i'm going to change these sizes to size 15 just change this let's reduce this font size to 15 all right that's much better duplicate that duplicate that again um so i'm going to have another option mobile app so i'm gonna change this to figma uh ui that should be fair enough i'm just gonna change this f to size um 15 right so we just want to position that right around there so that's actually okay okay so we want that to appear when a user when it is actually clicks on the keyboard okay all right so we are we're going to create a transition between this and that so this is very variant for so gonna go back to variant two right here then we're gonna create a prototype so when i say on now we're gonna choose a new option so i'm gonna say when a user clicks on the key gamepad okay so that allows a user to press anything on the keyboard so i'm gonna press f on the keyboard so just make sure to press f on the keyboard wanna make sure that it actually changes to variant four and we want that to also happen instantly okay i just want that to happen instantly so i'm going to add some uh just want to make sure that all these text actually variant variant for okay so we also want to make sure that uh when the user clicks wasn't given user an option of going back to the main search so we're gonna uh draw actually a straight line right here so gonna just make sure this is set to 90. so i'm going to give a user an option to cancel in case they've typed in text that they want to change so i'm gonna type in something else just type in an x so i'm gonna change this x font to something comic comic new okay i actually prefer that so i'm gonna change that to regular it's going to give place that right around there i'm going to give this a font of 18. so this x actually is simply going to be an option for user to cancel when they want to actually type in again so i'm going to give this a light gray color something like that so i'm going to position our x slightly around there all right so next we're gonna so actually that's it so i'm gonna give this x and an up we're gonna probably type the x so i want to say when that x is clicked on when the x is stop turn change to so to go back to variant two okay so i want to make sure the same option is there for variant theory so on variantly we're also going to add the option of of the key gamepad when the user clicks on f i want to make sure it actually changes to variant four because uh remember we have an effect where variant two changes to variant three so i wanna make sure it's actually there in both and uh that's basically it so next we're gonna run this let's just save that then run that all right so as you can see in our prototype right here we actually have the option so we have this blinking so if someone clicks on the f sound clicks on the f you can actually see these different options pop up allowing use that search sony user so clicks on the x it takes them back to the original and uh that's basically it that's how we create uh this animation i did show you in a few simple and easy steps i hope you learned something if you if you feel this helped you just feel just just feel free to tell me below in the comments i'll be glad to reply and if there's something you could have done but you can always share with me tell me and i'll be ready to make a video for you and then last if you're new to this community i encourage you to join in by liking and subscribing and then hit that notification bell and that you not miss any updates when i upload a new video every single week otherwise thank you so much for watching i didn't want to make this too long i'll actually see you all in my next video thanks for watching bye [Music] you

Channel: Create Beautiful Things

Views: 674

Keywords: Figma Search Bar Animation | Search Box Input Field Interaction (2021), figma interactive text field, figma editable text field, figma input field interaction, Designing a search component in figma, components and variants in figma, Search box animation in figma, Search icon input field animation, search box animation from scratch, figma search, figma search bar component, figma search bar prototype, figma search bar, figma edit form tutorial

Id: yBarT7wG2qQ

Length: 19min 39sec (1179 seconds)

Published: Tue Nov 23 2021