How To Create Radio Button On Figma

Step by step guide on how to create radio button from scratch using Figma.

[@bhagag]

The video Product Meow is very helpful. It is clear that there are a few steps missing in this video. Here is what you need to do... Select the components (Option A & Select state) and create a value like A,B,C,D for the name property. You can create a name property by clicking on the Name drop-down.

[@productmeow]

Thanks for the info!

[@ofredbircham2005]

Excellent!! This is just what I needed, thank you for sharing. A little tricky but works great once I understood the logic. Now I just have to connect the buttons depending on the option that is selected.

[@productmeow]

Excellent!

[@FlaviaThais-y6g]

thank u!! i was trying in a modal and didn't work but when i changed to ''open overlay'' or ''swap overlay'' worked just fine

[@productmeow]

Great!

[@jameskale8922]

Hello Mate, I guess you skipped some part in the video because at 7:20, you can see only two states while we see a list of the variants created by copying the multiple elements.

[@lz3083]

This video was extremely helpful however, I ran into an issue at the end. My flow works in the prototype however, in my assets, when I go to place this into my design - the asset component only shows the first, option a. So, when I drag the asset into my design it only shows asset a.

[@productmeow]

Make sure the component varients have different property values; i.e values A, B, C, and D. Then, when you drag the component from asset ~> canvas, you will need to manually change the property value between A, B, C, and D.

[@kehindechidiebere]

It was hard to follow the naming part

[@BanuNefes]

Thank you

[@productmeow]

You're welcome!

[@soheilamohamadzadeh1036]

hi, I did the all steps, but It's going to collect in the left corner of the frame when I click on the radio buttons. what should I do?

[@productmeow]

Sry I don’t quite get whats the issue you’re facing. Perhaps you can send me a screen recording of the issue via email and I can help with the troubleshooting. Email to: [e-mail]

[@catfamluna]

How can I make this option not to overlay the whole page when I am playing it?

[@productmeow]

Create a frame that wraps the radio button component and play from that frame

[@catfamluna]

@@productmeow I created a frame that wraped the radio button componet and put it upon the home page frame but it overlayed :(

[@productmeow]

@@catfamluna perhaps it is best that you do a provide a screenshot / video that describes your issue (you can paste a link) - I'll take a look and assist

Thanks!!

[@productmeow]

Glad it helps :)

[@alphaly3673]

Hi there, You dragged Option A down from Assets and copied and pasted it 3 times. Then you applied the Auto layout property to the selection and went to the right panel to pick A, B, C, and D from a drop down menu. My question is how did you get that drop down menu. I followed step by step and I still don't have that drop down menu. Thanks

[@guidoa6034]

Hello! Excellent creation, thank you very much for the video. See, once the radio button has been developed, what and how do I incorporate it into my wireframe? I can't implement it. Greetings from Buenos Aires

[@productmeow]

Hi ! You can simply drag "Option set" into your wireframe. What is this "Option set"? Go to 8:48 , you will see 5 option sets. The first option set (left most) is the one you should be using.

[@BanuNefes]

​@@productmeow can we save 8:48 "Option Set'' into Assets? I thought it will become an Asset automatically, but it is not.

[@rimayadi5659]

Hello Banu nafes , i have the same problem as you , did you found a solution for that

[@BanuNefes]

@@rimayadi5659 Hey, i try out this Video and it worked out kzbin.info/www/bejne/eXy2l5Koqtt0r5o

[@hanacopakova5801]

I donť understand the name state, it is ok, but my solution can change the btn only once and then not. The name doesn't give me option to select A/B/C/D so it is for nothing, i dont understand why :D

[@productmeow]

Which part of the video you don’t understand? Perhaps you can list the timestamp (range) so that I can elaborate for you here.

[@josephugwu9760]

@@productmeow explain from 5:00 to 6:30

[@JM-kq4tx]

for some reason it's only letting me choose option A. I made it with two options instead of four bur I followed your exact steps

[@Sumee21051987]

Thank you so much brother. You saved my life. I spent 2 days to figure out how to prototype the radio button and failed. I watched your video for 10 mins and I already built my radio buttons. Thanks a ton. However I am running into a problem. Let's say Flow 1 takes me from chapter 1 to 2 and Flow 2 enables me to choose the correct option on a quiz. Can we merge these two flows? Like a nested flow.

[@productmeow]

Yes you can. The key idea is to duplicate the entire frame which has more than 1 state.

[@Musikahua]

why u cut?

[@mustafatahir1448]

I've run into a problem. When they're not placed in a frame they work great but when I want to use them in a frame and then I press the button they navigate to the original frame created in the beginning.

[@scrambledID]

Super elegant solution. There has to be something I'm not seeing though. I've followed these steps exactly repeatedly (I even tried copying from your layers panel) and I'm still getting invalid variants and glitchy prototypes. Any way to share a file? 😅🙏🙏🙏

[@productmeow]

Helloo ! You might want to check your variant’s property name and values. There shouldn’t be any two or more components within a set that has duplicated value

[@scrambledID]

@@productmeow thanks for the reply! would you mind being more specific? I'm still very new to Figma. One of the things I tried though was giving every element a distinct name if that's what you mean by value.

[@scrambledID]

@@productmeow I think it might have something to do with the dropdown for the name property. I only have default as an option, not A-D. Not sure why that is :-/

[@scrambledID]

@@productmeow I figured it out! Thanks for the tip! :)

[@productmeow]

@@scrambledID hey ! glad you figured it out ! Happy learning ! 🔥

[@motecaca]

thank youuu so muchhhhh. It helps me a lot

[@Roosterhoot2024]

Could not get this to work. there is a certain part that is skipped over in assigning the properties and I think I figured it out, however, when I try to set up the prototype part, it will not allow my to navigate from the circle to a frame of components

[@productmeow]

Can you elaborate on “when I try to set up the prototype part”? See if I can help you with your situation

[@himanshubokil2547]

Thank you so much bro. Your explanation is very good. It works.

[@productmeow]

Glad it helped !