Search bar prototype in Figma

Figma is free to use. Sign up here: bit.ly/3msp0OV
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 ⬇️
Twitter: / figmadesign
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #nothinggreatismadealone #design #shorts #tips #tipsandtricks

[@Figma]

Use this community file to follow along: bit.ly/3NQj2sf

[@kolmercm]

That “Let’s go” in the beginning 🔥

[@Rhidayah]

Goo lets

[@KienTran-kz2qd]

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

[@ToniGameiro-ec9xz]

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

[@Levanooo]

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

[@davidmapundula9954]

Am loving these shorts🔥

[@jimslyrics8071]

I did it
With open overlay and it worked

[@That_FoodGuy]

Just replicated this. Nice one!

[@Figma]

Awesome!

[@jacobs492]

I’ll be making this later in VS code for sure. Love all the new dev stuff! I do design and dev and these updates make it so much faster

[@cybercassie]

Love the short format inspiration!

[@Akashsoodin]

How we can export this for developer

[@jeroo8323]

Wooow

[@EbeleRachelOkafor]

Very helpful

[@konstantin_davydov]

Please write what music is playing in the video?

[@jepai9731]

slower version pls

[@RobinBli]

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

[@fayella9]

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

[@ananthadm]

What is the necessity of clip content here ?

[@KienTran-kz2qd]

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

[@Figma]

Hi Kien, thanks for flagging! That's a mistake on our end, sorry about that!

[@aregtigranyan]

Still can’t add, it’s not working

[@emmanuelonwuka1532]

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

[@Figma]

Thanks Emmanuel! You should be able to find all of our Shorts in our UA-cam channel. There is a playlist for Shorts at the very bottom of our UA-cam channel homepage, you can also find them under the "Videos" tab too!

[@ravindug]

How to code those🤔

[@harshak1ng237]

Use Js (onclick function) , Css Html.

[@federalbureauofinvestigati426]

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

[@Figma]

Hello, there are few ways to create a variant. Check out this help center article to learn more: help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#create-new-variants

[@federalbureauofinvestigati426]

@@Figma Thanks I've found it in the assets

[@naNa-xn4fq]

超棒的分享

[@JedHurricane]

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

[@star-devil9157]

Fantastic 🎉❤😊

[@subhanayub2596]

just a few days ago i started learning figma

[@fragrantbloom]

Wow

[@azar.azar.0]

I want to see more of stuff like this

[@KT-User]

superb

[@kart182]

Love these

[@nabilarahmh]

Very clever, amazing✨

[@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!

[@Figma]

Hi Siddhayak, thanks for the feedback! We actually put the result at the beginning of the video, since UA-cam Shorts cannot go over 1 minute.

[@Bengmor]

@@Figma pls I tried designing this but my prototype isn't working. I don't understand how to assign variable

[@yzahak]

I love it! 😍

[@Figma]

Glad you like it! 😊

[@muzammilshakoor5404]

Cool 😙 helpful 👍

[@olajumokeawal8057]

Love this❤

[@adevikthur]

Awesome stuff

[@johnmarkbondad6009]

great!!