Creating a search bar in Figma is a quick and easy process that can be completed in just a few minutes. To get started, simply create your search bar’s body. Next, add a text box to the search bar and type in the placeholder text of your choice such as “Search…”. Finally, add a button to the search bar and style it to your liking.
Assuming you already have a Figma account set up, follow these steps to create your own search bar:
1. Create the search bar’s body by selecting the “Rectangle Tool” in the top toolbar. Make it so that the ratio of the dimensions is just right for a search bar. Then, adjust the corner radius to make it rounded. This will serve as the search bar itself.
2. You can style your search bar’s body using the sections under the Design tab on the right menu.
3. With the rectangle selected, click on the “Text” tool in the left toolbar and then click inside the rectangle to add a text box. This is where you’ll type in your search terms. In the text box, type in placeholder text such as “Search” or “Enter keywords here“. You can also style your text using the sections on the left under the Design tab.
4. To complete the search bar, we need to add a search button. To do this, first, create a copy of your search bar’s body.
5. From there, adjust the size of the rectangle just to make it fit the left-side corner of your search bar. In this case, I adjusted the top-right corner radius and the bottom-corner radius of the button to zero to make it have a straight edge. Also, decrease the width to about 15-20% of its original size.
6. Once done, place the search bar button you created just above the search bar’s body on the left-side corner.
7. Finally, we need to add a search icon to the search bar’s button. To do this, go to Resources > Plugins then search for an icon plugin and run it.
8. In the running plugin’s window, search for the search icon then place it on your design. Do this by clicking and dragging on the search icon.
9. And that’s it! You’ve now created a fully functioning search bar in Figma that you can use on your website or app design project.
