Figma Search Bar Animation | Search Box Input Field Interaction (2021)

In this video i will show you how to design a figma search bar or search box with input field interaction in a few simple and easy steps

[@elenabenedetto9807]

I just want you to know you just saved my life with this tutorial, thank you so much

[@whatis4882]

This is what a tutorial should be like!! Thank you for your help! You did a great job explaining and going at a great pace.

[@dorijankos7804]

very clever, thank you, you saved our project

[@caught.in.neverland]

This was really helpful, thank you!

[@ewatrzaska7005]

this was extremely useful, thank you so much :)

[@user-zk8jy6hq5n]

Very elegant. Thank you so much. It really helped me out.

[@Santistreta]

Wonderful. Tks for your time!

[@kpsayshey]

Super helpful! Made my search bar more interactive with this tutorial. Very clear and instructive.

[@CreateBeautifulThings]

You're welcome. Am glad it helped. Thanks for watching.

[@snigdhachakraborty8367]

It was very helpful. Nicely explained .

[@toridust]

very clear, thank you

[@cosmos7880]

Thank you very much !

[@cold_man16]

Thank you so much!

[@loosehugsseattle]

Super Helpful! Thank you for talking through your steps!

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@anyN]

very nice! thank U!!

[@FC-dz2to]

This tutorial was super helpful, thank you for creating it

[@CreateBeautifulThings]

Glad it was helpful! Thanks for watching

[@mattsullivan8996]

This was a really nice and simple tutorial! It helped me with my design challenge for my course :) Thanks

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@shan21261]

Really nice explanation and tutorial ❤

[@thanhtrung2377]

This helps a lot!! Thank you so much

[@user-hs8wm3md4u]

amazing brother very helpful

[@lorrainekanana3094]

so helpful thank you

[@mohammadakhmalfirdaus6299]

when i drag my default it just break from shearching component

[@katewalker9763]

Thanks for the tutorial! Really helped with my uni work, thank you!!:)

[@CreateBeautifulThings]

I am glad the video helped. Thanks for watching

[@ugochiinyama909]

Thank you so muchhhh
I have watched so much videos, yours has been the easiest!

[@stickyyhead1904]

Thank so much 🥰

[@AAzizi-cr3gy]

thank u for tutorial

[@tennisskiervr]

how do you actually add it to the frame on windows, alt copy doesnt work 4 me?

[@TheMiguelhendrix]

thanks, it was clear and helpfull!

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@radhikachhabra1742]

Thankyou so much sir

[@hanami_patrick]

Thanks, bro you have really helped a comrade

[@CreateBeautifulThings]

Glad it helped. Thank you for watching

[@cassava1234]

thank youuuu helpful

[@chhumchanleak7642]

Thanks a lot, gentleman.😁

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@allshadesofojaay]

Thank youuuuuu

[@kaluolanma9571]

Mheeeeeeeeeeeeen this is gooooood

[@kzeugma]

thanks!! :)

[@nomprenom5370]

Fantastic work !

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@KT-User]

creative :)

[@vanessaf.602]

Thank you so much for the thorough video. I really appreciate your content as I am a new Figma user.

[@CreateBeautifulThings]

You are so welcome! Thanks for watching

[@michelleolashile4082]

Great tutorial. but how do you prototype the components if a user clicks on one of the suggestions?

[@lamideinreallife9407]

I tried but I couldn’t get it to blink 🥺

[@olalolalola]

when I copy search bar to the screen it does not work

[@lifebydottie]

But how do you get it to select from the drop down =( I need that for my project lol

[@annachwal9555]

Thanks a lot

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@akinrujomukemisola]

Thank you ❤❤

[@CreateBeautifulThings]

You are so welcome! Thanks for watching

[@arjundixit5982]

amazing cool trick

[@CreateBeautifulThings]

You're welcome. Thanks for watching

[@nyahantoine4609]

wow! I'm so happy and will like to learn and share ideas with you as I enter the world of ux through My google certification. please I really wish we relate and create a better user experience . can't wait to link up with you

[@CreateBeautifulThings]

You always can. The email is on the channel page

[@verad5458]

I am ne to Figma and design generally, this is an awesome and helpful video, but how do I prototype SELECTING one of the options? I was looking forward to see it in the end, but I only see that options appear...

[@CreateBeautifulThings]

Oh, in this video i was simply demonstrating the search basics. I didnt go to that depth. But if you want i have a video on select menus ua-cam.com/video/Z92j1VOOB9U/v-deo.html. I hope it helps with what you want to learn. But thanks for watching.

[@verad5458]

@@CreateBeautifulThings thanks a lot! You tutorial was very understandable und clear btw, thank you for you work, it's much appreciated!

[@ismailshaik8817]

Can you share the figma link of this design please

[@ferdyherdiansyah7664]

gOOD JOB brooooo

[@CreateBeautifulThings]

You are so welcome! Thanks for watching

[@nywebdiva]

I was hoping that you’d be able to show a keyboard that moves in and interact with the search bar as well

[@CreateBeautifulThings]

Oh, i didnt intend to do that on this video. I wanted to illustrate the keypad option figma makes available during prototyping. But for the one you are looking for you can check out this video ua-cam.com/video/LDXb6eckTQ4/v-deo.html . Thanks for watching

[@banetepavcevic7228]

Thanks for tutorial! Any idea how to prototype search result to next screen?

[@CreateBeautifulThings]

Yes I do. Will do that very soon

[@diensilmimaulidyah7161]

Hey, can i get this link figma?

[@chantellevandaalen6337]

Hello CBT. I am new to Figma and am developing a website. I have a search icon but learn in your video how to create a search bar. I am more familiar to Wordpress, where you just drop in a plugin and that's it. I like your video and agree it is very clear. My question is, would I need to put in manually all the search strings of the alphabet. How does it pick up search strings in my text if I can put it like that. Chan.

[@CreateBeautifulThings]

Hello Chan. What you see me designing here is simply a prototype. If I was designing a website like you, there will be a real database where all your search queries are stored. That would be a different case. WordPress provides an online sql database for you to store your search queries. Thanks for watching

[@chantellevandaalen6337]

@@CreateBeautifulThings Thank you CBT for your reply. That is very helpful to be advised that. Well done on great and clear instructions. Have a nice day. Chan.

[@don-chi6420]

What if someone try’s another letter apart from f

[@christianguenther2963]

how to drag tho

[@nancyabuga1727]

Hi..., this works fine when you prototype on a PC because then you can easily press 'F' on the keyboard. However, when projecting on Figma Mirror, it doesn't work: no keyboard exists

[@CreateBeautifulThings]

I am currently doing this on a PC. It's the best way to demonstrate a prototype. I suggest we stick to using a PC keyboard

[@gandrage120]

why my prototype interaction doesnt have "on tap"

[@CreateBeautifulThings]

Depending on the figma version you are using. It may say "On Click". I use a desktop version. But you should see it.

[@kaluolanma9571]

Plss can you make a video where you can search anything like all he letters

[@CreateBeautifulThings]

Thanks for giving me something to think about

[@balramsing]

Can you share this file

[@19_jellyjelly70]

Why is my 'Change to' interaction greyed out?

[@19_jellyjelly70]

I figured it out. ahhahahahah

[@olive_and_her_four_kids]

but after typing the word also there should be blinking bar at the end of the word

[@CreateBeautifulThings]

You're right. I was just making a simple demonstration. I just wanted some to get overall point of the concept. Thanks for watching

[@sophiemorris8059]

Ive tried this twice and it didn't work??

[@CreateBeautifulThings]

Oh sorry to hear that. But I believe it should work. I have done this on many projects. I hope you are using latest figma version. I don't know if you are new to figma. But it should work

[@ArgentaOfficial]

Good but TOOOOOOOOOO SLOW

[@CreateBeautifulThings]

I had to make sure steps are easy to follow for anyone new to this. Thank you for watching

[@Dan-bq2mq]

great tutorials but is hard for me to suit this accent, especially how you pronounce (Gonna)

[@pearlite6243]

Thank you so much!

[@CreateBeautifulThings]

You are so welcome! Thanks for watching