Recreate the YouTube Studio CHOICE CHIPS (Option Selector) in Figma (Prototyping Tutorial)

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/u...
In this Figma interactive component prototyping tutorial, we'll create 'choice chips' / option selector / toggle button switch that can be found for example in KZbin Studio along with their hover states and full interactive functionality. We will be using the Prototype section in Figma to recreate the final result, analyze the component screenshot and use it as a guide + we'll go over the logic of creating a simple interactive component with variants in Figma.
How to recreate / mimic / design / build an interactive choice chips (option selector toggle) component prototype in Figma (step-by-step explanation tutorial with the full process)
---------
© 2022 Mavi Design

[@khushneetkaur5929]

Really great video, thank you so much for the tutorial! In my case I wanted to make selectable size options for my clothing app on my products page and this video made my life easier.

[@stavsharon994]

this tutorial is super helpful and the only one I could find for this function somehow! thank you for also explaining the login of why it works that way and not just how

[@benjamincranwell]

Great tutorial

[@barbare.simonishvili]

so good tutorial

[@Nega_Samurai]

Very helpful! Thanl you so much! Only one question: is there another option of changing the button state when clicking on it without replicating the frames? Cause I'm also trying to have them all selected.

[@khushneetkaur5929]

You can have one "All" button, then if you create one variant in which all other buttons are selected and connected to the "All" button then that might help you achieve your wanted state.

[@ivanjose6325]

This tutorial is very helpful, but I have one situation. When I see my prototype on pc (on Explorer), I can't see the active state, but when I open it on my phone it's ok, and it runs perfectly. What would be?

[@东方白-o1z]

After 2 hours, it worked lol

[@o_o-w9c]

what did you change, what was wrong?

[@Rahul_Lata_]

how you did ? not working in my case

[@CRAismyname]

I can't get this to work. How does the button switcher know to change to each variant if the default button naturally goes to a hover state? Wouldn't you have to assign to each variant from the hover state?

[@S_Moreau]

A few days ago it was working perfectly fine and I was really proud. I didn’t modify anything. But today (3 days later) it stopped working. When I click the button from default it goes to the active but without the name. So a button called Videos when clicked on would now be an active button called Button. Would really appreciate some help.

[@homealive5933]

For me its not working in the right way after multiple clicks

[@东方白-o1z]

I'm not sure why, but the auto layout at 10:07 is not working for me, do you happen to know why please?

[@o_o-w9c]

could someone tell why didn't it work? I literally followed every single step

[@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 KZbin - thank you for your understanding! Mavi

[@RasheedGoudedji-n4n]

what if i have 100's of them, there must be an easier way to do this

[@Rahul_Lata_]

not working its selecting everything

[@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 KZbin - thank you for your understanding! Mavi