How to Make a Search Bar Design in Figma

This guide is an interactive LiveDemo. Create interactive demos of your own product: Interactive demo software · Interactive product tours for your website · Start free

How to Make a Search Bar Design in Figma: step-by-step guide

1. Navigate to the bottom section of your Figma design canvas and then access the menu bar. From there, you can use the provided options to add shapes and texts, draw sketches, enable plugins, and more.

2. After that, use your mouse cursor to add the objects to your design canvas and start creating the structure of your search box.

3. Arrange each element according to your liking. At the same time, make all the necessary adjustments. For instance, you may resize, scale, or move the objects in order to fit them accordingly.

4. Once done, select the elements individually and then go to the right-side panel for further customization. From there, you can reconfigure the Position, Layout, Appearance, and Visual Effects of your search box design. Just provide your input to change the default settings based on your preferences.

5. Select all the layers of your search box design. Following that, right-click on the selection to access the options.

6. Tap 'Copy' afterwards.

7. Subsequently, right-click anywhere around the canvas and click 'Paste Here'.

8. Click on the duplicate and reconfigure its default design settings to create a variation. You can use the options on the right-side panel or the menu bar at the bottom section.

9. After that, select the main design of your search box. Ensure that all layers are included.

10. Head over to the right-side panel and tap the 'More Actions' icon.

11. Choose 'Create Component' from the list of options. Subsequently, repeat the same series of steps for the variant of the main design.

12. Once done, tap the 'Prototype' tab to create a responsive connection between the main design of your search box and its variant.

13. Select the main design and then hover your mouse cursor over it.

14. Next, grab the 'Add' icon attached to one of its sides and drag it to the variant.

15. Configure the Interaction settings accordingly. Specify your preferred Trigger, Action, and Animation.

16. Finally, click the 'Present' button at the top-right corner.

17. At this point, you can now test out your search box design. Review its aesthetic and functional quality. If necessary, don't hesitate to make revisions until you achieve your desired results.

Quick answer: To make a search bar design in Figma, navigate to the menu bar to add shapes and texts, arrange and customize the elements, duplicate the design for a variation, create components for both, and set up a prototype connection with specific interaction settings before testing the result using the Present button.