No video
Create an Interactive SEARCH BAR in Figma
Рет қаралды 40,543
2 жыл бұрынVisit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Get the SOURCE FILES for this project ($1.99): payhip.com/b/q...
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
@ronaldorochayucra854 24 күн бұрын
How can I make it slide from right to left, I can't find a guide for help...
@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 Жыл бұрын
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 😂
@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).
@delfinjraurbano6588 2 жыл бұрын
More vids like these. This is amazing.
@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.
@andreja9119 10 ай бұрын
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 9 ай бұрын
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 KZfaq - thank you for your understanding! Mavi
@trickygazelle3795 Жыл бұрын
How do you make it come out from right to left? It's killing me!
@mavidesign Жыл бұрын
Make sure Constraints are set up properly:)
@listentoyourheart563 Жыл бұрын
hi do you have a plugin for this?
@user-gd9df6cq4m 11 ай бұрын
Hello where a can contact you please?
@user-gd9df6cq4m 11 ай бұрын
Hello where can I contact you please?
@mavidesign 11 ай бұрын
Contact form on the mavi design store Or email that you can find in the “about” section on my channel
@Nasrin.Designer 10 ай бұрын
🥰
Fabiosa Best Lifehacks
Рет қаралды 18 МЛН
Create Beautiful Things
Рет қаралды 71 М.
Mavi Design
Рет қаралды 74 М.
Darren Northcott - Figma, UX & UI
Рет қаралды 58 М.
Raouf Belakhdar
Рет қаралды 9 М.