Create an Interactive SEARCH BAR in Figma

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Get the SOURCE FILES for this project ($1.99): payhip.com/b/qldcx
This is a Figma interactive prototype / prototyping tutorial that will teach you how to create an interactive search bar component with a magnifying glass / search icon. Great for designing websites, user interface, UX / UI design and creating a design system.
----------
© 2022 Mavi Design

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

[@delfinjraurbano6588]

More vids like these. This is amazing.

[@strykom]

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

[@j.trulyrandom]

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]

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

[@j.trulyrandom]

@@mavidesign So true 😂

[@listentoyourheart563]

hi do you have a plugin for this?

[@AndrejaPopovik]

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.

[@user-gd9df6cq4m]

Hello where a can contact you please?

[@trickygazelle3795]

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

[@mavidesign]

Make sure Constraints are set up properly:)

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

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 TH-cam - thank you for your understanding!
Mavi

[@user-gd9df6cq4m]

Hello where can I contact you please?

[@mavidesign]

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

[@Nasrin.Designer]

🥰