Create a TOGGLE BUTTON (Option Switcher) With a HOVER Functionality (Figma Tutorial)
Vložit
- čas přidán 25. 07. 2024
- 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
In this video I'm going to show you how to design a Toggle Button / Option Switcher with a hover functionality in Figma.
0:00 - The Result
0:13 - Structure of this tutorial / process
0:40 - Creating the OPTION component
4:14 - Crearing the OPTION SWITCHER (Container) component
5:08 - Result so far - only hover functionality
5:45 - Defining toggle button (option switcher) states
6:58 - Why nesting components is a great way to design User Interfaces
8:10 - Defining interactions (actual functionality)
9:44 - The Result
How to design (create) an interactive Toggle Button (Option Switcher) Component Prototype from scratch in Figma (Step-by-step explanation and clarification of the design process)
----
© 2022 Mavi Design - Jak na to + styl
This is amazing, just what I needed to know!
Thank you! I have been watching tutorials all day and yours is the first that helped solve my problem!
Easy to follow, thank you
This is one of the best channels for UX Design. Super helpful for beginners
Easy to understand and learn
Thank you
Wow very helpful thanks a lot!
You win a new suscriptor today :-) The video helps me a lot! Thanks!
thank you so much!!
Thank you so much
thanks a lot
Thanks for video
You're most welcome, Eren:)
What if I connected the first variant of the first component set to the third variant as state=clicked? Could I skip the second component set? 😊
This is really great and flexible! I question is can we make it flexible enough to have another option say Option 4 at the instance level without touching the Parent component?
@mavidesign
Nice tutorial but not working. I am having same issue as discussed in the comments. Active state not working properly as it firstly reacts to being hovered not clicked.
where can I find this code?
it is not working😭😭😭😭
10 minutes to create a hover and a toggle effect, in xd all these take 20s
XD has a very similar logic to Figma and therefore I don't think what you're saying is correct
Hey great tutorial i followed entire tutorial but when clicking on component the active state doesn’t appear but its hovering though can i send my figma to your email
I have the same problem, you managed to solve it ? if yes, how ?
@@yousseffam9454 yes bro
@@webelieveintrump8949 how, i have the same
@@webelieveintrump8949 how you solved this??
active not working properly