Home
Tutorials
How to Make a Search Bar Design in Figma: 2-Min Guide

It is very easy to make a search bar design in Figma. Here’s a short tutorial on how to do it:

1.With the rectangle tool, draw a rounded shape as your main layer for the search bar.

2.Set a small magnifying glass icon on the left to let visitors know that they can search with your site.

3.Add a hint next to the icon using light gray that reads “Search here...” to allow input easily.

4.To keep everything aligned, select the icon, text and shape, then group them once the search bar is in place.

5.Include soft shadows or borders and make the search box interactive by adding a hover effect.

FAQ'S

How to Make a Search Bar Design in Figma

We make websites that bring joy and meet your goals.

We create digital experiences that not only capture the users but also empower businesses in a highly competitive world. We are dedicated towards developing creative solutions that will easily fuse creativity with functionality, with long-lasting effects.

Get in touch
Schedule a call with Webflow Certified Partner
Schedule Consultation
icon tick
Link Copied!
cross icon