Search bar prototype in Figma

Today we’re going to show you how to make an interactive search bar component in Figma.

1. Start with a search icon (24px x 24px) and a text layer (font size 12, opacity 30%) in the file.
2. Select both the icon and the text layer, and hit Shift + A to add auto layout
3. Change Space between items to 8px
4. Add a white fill to the auto layout layer
5. Change all 4 paddings to 8px by clicking on the on-canvas control while holding Shift + Opt (Ctrl for Windows users)
6. Change border-radius to 24px
7. Add drop shadow to the auto layout layer (#000, opacity 16%, blur 10).
8. Set Horizontal resizing to Fixed and its width to 250px
9. Turn on Clip content
10. Rename the auto layout frame, and turn it into a component
11. Add a new variant, change the property name to “state” and set the variants’ name to “default” and “active” respectively
12. Select the default variant and adjust the width of it so that it turns into a rounded circle and hides the text layer
13. Select the search icon layer and set its rotation to 90 degree
14. Switch to prototype mode
15. Connect the default variant to the active variant, and set the animation type to “smart animate”. Adjust the easing to “Ease out back” and set the animation duration to “500ms”
16. Connect the active variant back to the default variant, set the animation type to “smart animate”. Adjust the easing to “Ease in back’ and set the animation duration “500ms”
17. Place the default variant to the right side of a frame, and set its constraint to “Right”
18. Click the present button to check it out!

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #nothinggreatismadealone #design #shorts #tips #tipsandtricks

[KienTran-kzqd]

Why adding padding all sides not work on my Figma when Shift + CMD?

[Levanooo]

I expected this would finally show the ability to type in text fields in prototyping mode 😅

[ToniGameiro-ecxz]

im sorry, but the constraints are not working for me, the bar still opens to the right side, even thought i set the constraint to the right

[jimslyrics]

I did it
With open overlay and it worked

[fayella]

how do we create the search icon on figma? been dying trying to find the library for it!

[RobinBli]

How did you hide the extended searchbar when you were done?

[subhanayub]

just a few days ago i started learning figma

[konstantin_davydov]

Please write what music is playing in the video?

[JedHurricane]

Ah, I didn't know you could do this in figma lol

[ananthadm]

What is the necessity of clip content here ?

[emmanuelonwuka]

Beautiful.. please put in your channel so we can rewatch

[siddhayak]

Loved it! Would have preferred if you showed the result as well :) helps one keep track of what's important and what's really worth it without trying the entire thing yourself!

[KienTran-kzqd]

This is wrong, it is Shift + Option /Alt? for adding padding all sides

[federalbureauofinvestigati]

Im new to figma I dont know how can I place a variant