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

Поделиться
HTML-код
  • Опубликовано: 12 дек 2024

Комментарии • 97

  • @whatis4882
    @whatis4882 2 года назад +8

    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.

  • @NotGameoverXD
    @NotGameoverXD 3 месяца назад +1

    You're very good in explaining how to do stuff in tutorials step by step the only thing with this tutorial is that the search bar makes a cool blinking aimation but it doesnt do anything other then blinking, you cant type nor get out of the search bar.

  • @elenabenedetto9807
    @elenabenedetto9807 Год назад

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

  • @kpsayshey
    @kpsayshey 2 года назад +1

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

  • @mattsullivan8996
    @mattsullivan8996 2 года назад +4

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

  • @snigdhachakraborty8367
    @snigdhachakraborty8367 Год назад

    It was very helpful. Nicely explained .

  • @DeepakBhat-u3r
    @DeepakBhat-u3r Год назад

    amazing brother very helpful

  • @AmarKhanna-w4g
    @AmarKhanna-w4g Год назад

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

  • @shan21261
    @shan21261 Год назад

    Really nice explanation and tutorial ❤

  • @loosehugsseattle
    @loosehugsseattle 2 года назад

    Super Helpful! Thank you for talking through your steps!

  • @ejiredamilola820
    @ejiredamilola820 Месяц назад

    Good work 👍, please i couldn't extend my variant 4 like you did in -7:04

  • @vanessaf.602
    @vanessaf.602 2 года назад +2

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

  • @thanhtrung2377
    @thanhtrung2377 Год назад

    This helps a lot!! Thank you so much

  • @dorijankos7804
    @dorijankos7804 2 года назад +1

    very clever, thank you, you saved our project

  • @hanami_patrick
    @hanami_patrick 2 года назад

    Thanks, bro you have really helped a comrade

  • @nomprenom5370
    @nomprenom5370 8 месяцев назад

    Fantastic work !

  • @Santistreta
    @Santistreta Год назад

    Wonderful. Tks for your time!

  • @FC-dz2to
    @FC-dz2to 2 года назад +1

    This tutorial was super helpful, thank you for creating it

  • @mohammadakhmalfirdaus6299
    @mohammadakhmalfirdaus6299 2 года назад +4

    when i drag my default it just break from shearching component

  • @tennisskiervr
    @tennisskiervr 2 года назад +1

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

  • @nyahantoine4609
    @nyahantoine4609 2 года назад

    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

  • @verad5458
    @verad5458 2 года назад +1

    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
      @CreateBeautifulThings  2 года назад +1

      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 ruclips.net/video/Z92j1VOOB9U/видео.html. I hope it helps with what you want to learn. But thanks for watching.

    • @verad5458
      @verad5458 2 года назад

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

  • @michelleolashile4082
    @michelleolashile4082 Год назад

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

  • @katewalker9763
    @katewalker9763 3 года назад

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

    • @CreateBeautifulThings
      @CreateBeautifulThings  3 года назад

      I am glad the video helped. Thanks for watching

    • @ugochiinyama909
      @ugochiinyama909 3 года назад

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

  • @banetepavcevic7228
    @banetepavcevic7228 Год назад

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

  • @stickyyhead1904
    @stickyyhead1904 Год назад

    Thank so much 🥰

  • @ferdyherdiansyah7664
    @ferdyherdiansyah7664 2 года назад

    gOOD JOB brooooo

  • @grimoire_music
    @grimoire_music 2 года назад

    thank u for tutorial

  • @radhikachhabra1742
    @radhikachhabra1742 2 года назад

    Thankyou so much sir

  • @arjundixit5982
    @arjundixit5982 2 года назад

    amazing cool trick

  • @KT-User
    @KT-User Год назад

    creative :)

  • @lamideinreallife9407
    @lamideinreallife9407 3 года назад +6

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

  • @lorrainekanana3094
    @lorrainekanana3094 2 года назад

    so helpful thank you

  • @caught.in.neverland
    @caught.in.neverland 2 года назад

    This was really helpful, thank you!

  • @lifebydottie
    @lifebydottie 6 месяцев назад

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

  • @chantellevandaalen6337
    @chantellevandaalen6337 2 года назад

    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
      @CreateBeautifulThings  2 года назад

      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
      @chantellevandaalen6337 2 года назад

      @@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.

  • @akinrujomukemisola
    @akinrujomukemisola 2 года назад

    Thank you ❤❤

  • @toridust
    @toridust 2 года назад

    very clear, thank you

  • @chhumchanleak7642
    @chhumchanleak7642 2 года назад

    Thanks a lot, gentleman.😁

  • @cassava1234
    @cassava1234 2 года назад

    thank youuuu helpful

  • @anyN
    @anyN 2 года назад

    very nice! thank U!!

  • @cosmos7880
    @cosmos7880 2 года назад

    Thank you very much !

  • @kaluolanma9571
    @kaluolanma9571 Год назад

    Mheeeeeeeeeeeeen this is gooooood

  • @ewatrzaska7005
    @ewatrzaska7005 2 года назад

    this was extremely useful, thank you so much :)

  • @olalolalola
    @olalolalola 2 года назад +2

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

  • @allshadesofojaay
    @allshadesofojaay 8 месяцев назад

    Thank youuuuuu

  • @kaluolanma9571
    @kaluolanma9571 Год назад

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

  • @nywebdiva
    @nywebdiva 2 года назад

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

    • @CreateBeautifulThings
      @CreateBeautifulThings  2 года назад +1

      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 ruclips.net/video/LDXb6eckTQ4/видео.html . Thanks for watching

  • @annachwal9555
    @annachwal9555 2 года назад

    Thanks a lot

  • @TheMiguelhendrix
    @TheMiguelhendrix 2 года назад

    thanks, it was clear and helpfull!

  • @ismailshaik8817
    @ismailshaik8817 2 года назад

    Can you share the figma link of this design please

  • @sklip4092
    @sklip4092 4 дня назад

    When I type in the search bar, it only let's me type F and nothing else. Is there anything I may be doing wrong?

  • @kzeugma
    @kzeugma 2 года назад

    thanks!! :)

  • @nancyabuga1727
    @nancyabuga1727 2 года назад

    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
      @CreateBeautifulThings  2 года назад

      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

  • @diensilmimaulidyah7161
    @diensilmimaulidyah7161 Год назад

    Hey, can i get this link figma?

  • @don-chi6420
    @don-chi6420 2 года назад

    What if someone try’s another letter apart from f

  • @gandrage120
    @gandrage120 2 года назад

    why my prototype interaction doesnt have "on tap"

    • @CreateBeautifulThings
      @CreateBeautifulThings  2 года назад

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

  • @christianguenther2963
    @christianguenther2963 Год назад

    how to drag tho

  • @19_jellyjelly70
    @19_jellyjelly70 2 года назад

    Why is my 'Change to' interaction greyed out?

  • @balramsing
    @balramsing Год назад

    Can you share this file

  • @olive_and_her_four_kids
    @olive_and_her_four_kids 2 года назад

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

    • @CreateBeautifulThings
      @CreateBeautifulThings  2 года назад

      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
    @sophiemorris8059 2 года назад

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

    • @CreateBeautifulThings
      @CreateBeautifulThings  2 года назад

      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
    @ArgentaOfficial 2 года назад

    Good but TOOOOOOOOOO SLOW

    • @CreateBeautifulThings
      @CreateBeautifulThings  2 года назад +1

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

  • @Dan-bq2mq
    @Dan-bq2mq 2 года назад +1

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

  • @cold_man16
    @cold_man16 2 года назад

    Thank you so much!

  • @pearlite6243
    @pearlite6243 2 года назад

    Thank you so much!