Create a TOGGLE BUTTON (Option Switcher) With a HOVER Functionality (Figma Tutorial)

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

[@christophernelson2261]

Thank you! I have been watching tutorials all day and yours is the first that helped solve my problem!

[@skpapic]

This is amazing, just what I needed to know!

[@prajwalsharma2794]

This is one of the best channels for UX Design. Super helpful for beginners

[@max-yq1ch]

Easy to understand and learn
Thank you

[@Rep1nS]

Easy to follow, thank you

[@AmericanAbroad70]

Wow very helpful thanks a lot!

[@daianaluna8807]

You win a new suscriptor today :-) The video helps me a lot! Thanks!

[@SisiBisi-zh1cj]

Thank you so much

[@khanhvybella8151]

thank you so much!!

[@jahiruljitu3255]

thanks a lot

[@AllenCenteno]

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? 😊

[@erenkaya4474]

Thanks for video

[@mavidesign]

You're most welcome, Eren:)

[@roshnimondal7056]

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?

[@arnavprusti]

where can I find this code?

[@999KJKJ]

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

[@YorichiXDesigns]

it is not working😭😭😭😭

[@spykap21]

10 minutes to create a hover and a toggle effect, in xd all these take 20s

[@mavidesign]

XD has a very similar logic to Figma and therefore I don't think what you're saying is correct

[@webelieveintrump8949]

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

[@yousseffam9454]

I have the same problem, you managed to solve it ? if yes, how ?

[@webelieveintrump8949]

@@yousseffam9454 yes bro

[@jacobshevchuk8011]

@@webelieveintrump8949 how, i have the same

[@adhamastito8564]

@@webelieveintrump8949 how you solved this??

[@athulkumar23]

active not working properly