Create an Interactive SEARCH BAR in Figma

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

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

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

    Great video.
    About the issue with close button not appearing, I think this is just a Figma bug. I just restarted prototype, and after few tries it worked (also with hover state).

  • @KristenBecker-jy4kx
    @KristenBecker-jy4kx Год назад

    Thank you for making this you have made it easier for me to understand the components and I want to learn more about interactive components and your vids help a lot

  • @j.trulyrandom
    @j.trulyrandom 2 года назад +2

    Thanks for making this!
    There is indeed something funny about variants inside variants with the similarity functions.
    What I did for the closeting animation to work, was to create another 'open' variant in which the 'X' button is the darker version. The interactions then go; 'X' button to the new variant with 'whole pressed' & 50ms, and the new variant to default with 'mouse up' & 200ms.

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

      Absolutely! The key thing is to always keep looking for workarounds 😄

    • @j.trulyrandom
      @j.trulyrandom 2 года назад

      @@mavidesign So true 😂

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

    More vids like these. This is amazing.

  • @AndrejaPopovik
    @AndrejaPopovik Год назад +1

    For me the X button that closes the search-bar does not work. It is made exactly as you made it, but it still won't close the search bar.

  • @ronaldorochayucra854
    @ronaldorochayucra854 4 месяца назад

    How can I make it slide from right to left, I can't find a guide for help...

  • @justblaz604
    @justblaz604 14 дней назад

    how do I add a keyboard to the search icon ?

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

    The close button worked for me, however if i click on the magnifying glass it wont open the search bar, instead i need to click on the rectangle shape to open it.

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

      To get personalized help and feedback on your project, please join my free Discord server.
      You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
      I'm unable to help everyone over RUclips - thank you for your understanding!
      Mavi

  • @trickygazelle3795
    @trickygazelle3795 Год назад +1

    How do you make it come out from right to left? It's killing me!

    • @mavidesign
      @mavidesign  Год назад +2

      Make sure Constraints are set up properly:)

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

    hi do you have a plugin for this?

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

    Hello where a can contact you please?

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

    Hello where can I contact you please?

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

      Contact form on the mavi design store
      Or email that you can find in the “about” section on my channel

  • @Nasrin.Designer
    @Nasrin.Designer Год назад

    🥰