How to Make a Search Bar Design in Figma

Quick summary

This tutorial walks you through the complete process of designing a search bar in Figma, from adding shapes and text using the menu bar to creating components, setting up variants, and connecting them with prototype interactions. By the end, you can preview and test your search box design using Figma's Present mode.

Steps

1. Navigate to the bottom menu bar of the Figma design canvas to access tools for adding shapes, text, plugins, and sketches.
2. Use your mouse cursor to place objects on the canvas and begin building the structure of your search box.
3. Arrange and adjust each element by resizing, scaling, or repositioning objects to fit your layout.
4. Select elements individually and use the right-side panel to customize Position, Layout, Appearance, and Visual Effects.
5. Select all layers of your search box design, then right-click the selection to open the context menu.
6. Click Copy from the context menu options.
7. Right-click anywhere on the canvas and select Paste Here to place the duplicate.
8. Click the duplicate and reconfigure its design settings using the right-side panel or bottom menu bar to create a variant.
9. Select the main search box design and ensure all layers are included in the selection.
10. Go to the right-side panel and tap the More Actions icon.
11. Choose Create Component from the options, then repeat the same steps for the variant.
12. Tap the Prototype tab to begin setting up a responsive connection between the main design and its variant.
13. Select the main design, hover over it, and drag the Add icon from one of its sides to the variant to create a prototype link.
14. Configure the Interaction settings by specifying your preferred Trigger, Action, and Animation.
15. Click the Present button at the top-right corner to enter presentation mode.
16. Test your search box design by reviewing its aesthetic and functional quality, and revise as needed until you reach your desired result.