Create an Interactive SEARCH BAR in Figma

in this video we're going to have a look at how to create this interactive search bar component in figma you can kind of see that it has a hover interaction as well as press down interaction and then you can close this component with with this little icon on the right side and go back and forth so that's what we're gonna build today in this video and i have two quick reminders if you're a complete beginner with figma make sure to check out my figma basics series and two if you'd like to get the source file for this if you'd like to use this in your own project check the link in the description and now let's see how this is done in figma the very first thing we're going to do is select the ellipse tool and create a small ellipse remove the fill and add a stroke that's going to be 2 pixels wide it's going to be on the center and we're going to make this smaller about 18 pixels let's say and then we're going to use the pen tool to create simple line like this also two pixels and we're gonna make the endings around it right we're gonna rotate this one and make it seven pixels tall and center it against this circle and then move it so that it overlaps a little bit like this yeah so that's our magnifying glass icon that's our search icon that's very simple uh we're gonna take these two and then rotate them 45 degrees and group them um we're gonna also select because we have this empty space we don't want that i'm gonna select the ellipse and press command e that will flatten the selection meaning it will just commit any changes right cool we have the search icon now i'm going to rename this and rename this group to search icon now the next next thing we're going to do is use the text tool and say search the font is going to be i don't know let's say roboto any font basically will do so it doesn't really matter we're going to center these two um maybe we're going to use semi bold yeah and now what we're going to do now is we're going to select both of these press shift a to add auto layout and then add some padding as well as some rounding and a background that's gonna be light gray we're gonna name this frame this auto layout search bar we're gonna increase the size like this right so we have two of the three elements we need we have the magnifying glass icon we have the search text we have it contained in a container but we also need an icon for like closing this search bar so press command and select this tiny line and copy that over here um duplicate that and rotate so we have a tiny little cross like this we're going to turn off the around its endings and go for about this size i think yeah then ellipse tool and just kind of move that against cross symbol and center it yeah we're gonna have to update the size of the size of and position of these lines because it's not centered again i'm gonna press command e and this is gonna say eight by eight right and also the x position is gonna be 13 13 71 right now it's seven pixels from all the edges duplicate and rotate cool and we're gonna make this darker all right and these two lines white we're gonna select this and then turn that into a component we're gonna name this component close search bar close search button right we're going to add a variant i'm just going to move this the property is going to be called state and we're going to have default and then pressed right and pressed one is gonna have a darker background bit more now we're gonna select this one go to prototype and click and drag over here and say while pressing change to state press smart animate it's going to be very quick like 40 milliseconds so that's our search button we're gonna now use an instance of this of this close search button component and paste that inside this search bar and what we're going to do now is this search button is not going to be it's going to have an absolute position we need these auto layout elements to be aligned to the left but we want just one of those to be aligned to the right so i'm going to click this icon right here absolute position and then center that move that to the right maybe a few pixels like this right means that now when we do this these two auto layout elements are going to stay on the left side and this one on the right side also it's going to have a fixed height search bar and that's going to be 50 pixels maybe 45 44. also we're going to make sure distances from the left side are a bit bigger 12. next thing we're going to do is select both of these elements and we're going to want to make the color of the cross to be similar to the color of the background so essentially we have two options we can essentially punch a hole through through the background basically uh which could be achieved by selecting these two and then subtract selection yeah i think second option is not that practical so i'm just gonna use this one so again subtract selection right now now it's transparent and whatever background color is gonna be here that's gonna affect its color of um of the cross and also the color color of search icon is gonna be like gray it's not gonna be really black same with the text maybe even sample this color maybe we want to make this one a bit smaller so let's make this a bit smaller 20 pixels 20 pixels and adjust position right now we can we can actually turn this search bar into a component so go here to create a component again there's going to be a variant definitely and the first variant is going to be called again default this one is going to be called open and the default one here's the thing it's going to be like 44 pixels wide same as the height except the close icon is not going to be visible that's gonna be zero and the text is not gonna be visible as well so again zero so it's just gonna be just gonna be this right and then we're gonna take this and create another variant this variant is gonna be called press down and it's going to do exactly what it says so it's going to be it's going to be a state where this component is being pressed down so that's going to be a bit darker again also we're going to create another variant and that's going to be hover so we're going to have a hover interaction and a press down interaction so it's going to be a very interactive element absolutely the hover one is going to have a lighter background so when you hover over it it's going to lighten up but when you press it down it's going to darken if that makes sense so here's the difference and maybe the icon is going to darken here we accidentally selected search button we don't want to do that we want the search icon right make this a bit darker same here search icon yeah so this is this one is hover and this one is pressed down let's define the interaction so prototype and click and drag like this and we're going to say while hovering change to property hover smart animate ease out 40 milliseconds then we're going to say again from here we're going to go while pressing and then from here so what happens when you click it you press it down and then you release it and you go to the open state so we're gonna do that we're gonna say mouse up and that's gonna go here again smart animate let's just quickly test what we built and also also very important actually i forgot about this when we we we can select this we're gonna define an interaction where if you click the cross it's gonna close so we're gonna select this little icon and then click and drag it like this and say on click and now we're gonna create a frame that's gonna be about this big we're gonna name this test frame and we're gonna test our component search bar let's see what we created that makes sense right so launch prototype i'm gonna fill the screen with this so it this should have a hover interaction right so it has hover interaction then when we press it down okay first problem it doesn't react to the hover interaction how do we fix that instead of press down interaction going from this state it's gonna have to go from this state right so that's gonna be while pressing right but going from this one let's reset the prototype and try again hover press down excellent and then we release the mouse we have this new open state now we will click this it's gonna again darken when we hold it press down we release and it's gonna close so we have this whole interaction where we hover we click we click and it's closed but for some reason the cross symbol is not showing up so what's the what's the issue here what's the issue here let's try and we'll launch the prototype fill screen maybe maybe this component is acting up maybe it should somehow return back to its initial state when it's being released i don't know let's try that all right so it's still not working i'm probably gonna remove the while pressing interaction and just do while hovering instead maybe that will fix the problem i don't know all right we're gonna have we're gonna have to remove all the interactions so i'm just gonna remove this interaction and this interaction and remove this variant all together maybe that will fix the problem i don't know yeah so for some reason you cannot have um in this case we didn't manage to make this little cross interactive but now it it works as intended you click it and then you can close it with the cross and then back and forth with this search bar maybe we're gonna make this interaction bit interactions a bit slower so 100 milliseconds everywhere why don't we try that that is nicer to interact with so that's it for today thanks for watching and i will see you in the next one you

Channel: Mavi Design

Views: 29,828

Keywords:

Id: 9uGxK90QaK4

Length: 11min 1sec (661 seconds)

Published: Fri Aug 26 2022