Create a SINGLE CHOICE (RADIO) Interactive Component in Figma (Tutorial)

In this Figma interactive prototyping tutorial, we're going to create an interactive single-choice (radio button) selector component prototype in Figma. Single choice (radio) selectors are different from checkboxes, because you can only select one single option. This component also features a hover state, adding a layer of interactivity to your UX / UI prototypes.

Make sure to check out my similar video – multiple choice component:

How to create / design / build an interactive single-choice (radio) option selector component prototype in figma (step-by-step explanation tutorial)

————————
© 2022 Mavi Design

[andrewstrasser]

isnt' there a faster way of doing this with conditional logic and variables? i want something that dynamically allows me to scale and add more options!

[romainaranda]

Great tutorial but sadly this does not work in the latest Figma version. You cannot select an option when clicking because the interaction is based on "Default" state and not the "hover" state.
But I've found a workaround :
In the latest Figma version, you need to check the "Reset component state" checkbox when defining the interaction in the single choice component.
This does not work with the "empty variant" trick as presented because the checkbox will not appear. Instead, we need to do things in a slightly different order.
Define the interactions before emptying the variants (don't forget the "Reset component state" checkbox). Then, delete all the options and copy the ones from the first variant, where the interactions are defined, just like in the video.
I hope it helps =)

[ythnish]

Amazing video! I was able to follow along step-by-step much more easily than some other tutorials I've watched. :) Thank you so much for the quality content!

[jdkforchrist]

Figma does a ton of things well, but in this scenario, I think they do not present an easy way to handle single choice interactions. A better way would be to introduce logic for IF, ELSE IF, ELSE. Or Case. Something like that makes defining the logic easy.

[karenrose]

thanks a million!
To be honest I wasn't sure will it work or no, cause there were some issues with "tap" animation, but I continued to stick to your tutorial, and it 100% worked!🤩

[falfi]

I did it step-by-step twice but in the test it can not be clicked (selected).It only stands out when I hover the mouse over the options... help me plss

[viniciuscarliiared]

Thank you for posting it! I used it as a reference to create a logic for audio messages, in which only one audio could be reproduced at the time and your tutorial helped a lot!

[MujahidOmer]

I love the tip on copy pasting the inner components to avoid manual prototype linking. However, I feel figma can do better with the prototyping logics here. Since all radio selections can only have one active state at a time, it'd be much more amazing if figma prototype could have this logic: Have only one component with 'active' state at a time. They already have everything needed to build this logic. I wonder why they haven't yet. I'm sure it'll come handy to every designer.

[mahnoorsh]

I got a problem. After making the file, when I played and selected the option it turned back to the initial radio button option instead of staying option.

[MnMustafa]

Thanks a lot for the video. I wanted to know what is the purpose of "Nested instance"? What will happen if we don't?
And before that why did you create content component property? I can still edit the text (in its instance) even without setting that property. So what's the reason?

[tykill]

Nice tutorial, I wonder if its better/easier to do this with variables. What are your thoughts? Performance on large prototyping files is also important for me, not sure which method would be best.

[hieuhuynh]

Genius move at 9:49 ! That saves people a lot of time! Thank you sir!

[fqoqkbz]

OMFG I've been looking for this tutorial for two days !!!! You've saved my life !!!! THANK YOU SO MUCH

[chrysantdesu]

Thankyou for this! newbie in figma and kind of hard to follow this but once I finish it somehow I manage to understand and make it again ^^ thanks for such helpful tips & tuts!

[DBUSTIN]

Thank you for this video. It helped me solve a problem I was having with a project I am working on.

[xvhqffs]

Amazing, this video really helped me out at work. Thank you

[MariaVictoria-rbrk]

I am stuck at minute 7:15 . I am not getting the Content panel while I select the content in the component, any idea why?

[MariannaSurzenko]

Thank you for this video and all the other content on your channel! I've learned so many useful tips from your tutorials! 🔥🧡

[lahcorreia]

Hello good afternoon, when going to test my radio button does not click, what could it be? I reviewed the tutorial 2x and did exactly like you, but it doesn't work...

[sasrss]

thanks for the video and it seems to be very helpful. I followed all the steps carefully and when I present the prototype, the hover option is working but the select option docent work. I tried to follow all the steps again and again for few time and the same issue happed every time. Could you please help me move this issue. thanks