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

[@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!

[@KandraLundstrom]

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!

[@romainaranda19]

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 =)

[@cristinacolls9716]

Yes! It works. Thanks!

[@xovert5347]

Thank you so much!

[@corneliakocher]

Thank you, it works now! :)

[@lokemis]

The greatest of heroes. Thank you very much

[@mikechiu8512]

Very helpful. Thanks!

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

[@mavidesign]

I agree. Took me a while to think of a workaround :) if would be simpler, even though it might be difficult to create an intuitive interface for that

[@beebopcola]

@@mavidesign Even with a basic understanding of Figma I'd hardly call this intuitive...

[@mavidesign]

"Intuitive" is describing the potential Figma interface required to incorporate IF / ELSE logic. Not the tutorial workflow

[@otistheshoemaker]

😂So right. The problem is that figma, as well as most of these prototyping tools have chosen a hierarchical dependency scheme. I have designed logic systems for game engines. What they need is independent object logic. In this case, the system doesn’t care about parent child relationships. You can just set up whatever you want and apply conditions as you’ve mentioned here such as if and else, and many more, and they will just work. No need to go into this cascading complexity for such a simple thing. Non-entertainment design systems drive me crazy. They’re so much farther behind the gaming industry. Prototype users can’t even use a keyboard as they interact with a prototype. It’s just stupid. And designers just put up with it. It’s as though they don’t have enough imagination or desire to demand better solutions. Seriously don’t you want your prototype user to be able to use a keyboard when they fill out a form. And if the form is for their user profile don’t you want it to store the value they put into the user name so that you can populate the profile page with the name they typed? these things are totally possible and amateurish compared to what we do in games.

[@lika_cola]

Well, now Figma did introduce If.. Else logic. l I can't figure out how to use it yet

[@MariaVictoria-rb5rk]

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?

[@ketij4759]

did you ever figure this out? I also don't have content panel

[@hieuhuynh9218]

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

[@viniared]

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!

[@LBoogie820]

I am LITERALLY following this exactly to the dot over the i and at minute 6:49 when you talk about the fill container, I do EXACTLY that and everytime i move the frame, it does not state in fill container. I have done this over and over and over and either Figma changed something as of today or I am missing something. Help?

[@pratheeshsa784]

same thing happening to me now, anyone help!

[@astartay]

Same problem, but I managed to find a fix, you need to manuallynselect each text option and set them allmto fill one by one, also doing it all together as fill, only then it works

[@mahnoorsh7504]

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.

[@cassiamegumi]

I followed your tutorial and it worked very well! Thank you!

[@cielopezcielopez]

such a thorough video, tysm!! it worked for me

[@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?

[@东方白-o1z]

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

[@mavidesign]

🥰 happy to help

[@karenrose2504]

WOOOOOOOW 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!🤩

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

[@MerwanH]

Thank you for the empty variant trick, it made me save so much time and awkward fidgeting with proto-noodles!

[@lilbob-f2v]

It worked for me in the last version, nice thanks!

[@alessandrodjordjevic8023]

Very strong video, I managed to do everything. But I would definitely like to add the option to go from a selected option to the default option by clicking on it again. What exactly do I need to prototype and where in order to get this to work?

[@Epsio0]

Having the same problem as a few other users, followed the steps up until the Expose Properties section but the option is not appearing for me with. I initially thought it was with the way I set my component up as I have an addition text area for a description. However I tried following this tutorial with just a radio button and a text label and the Expose Properties option is still not appearing. Is there a step that I've missed? Has this option been moved somewhere else?

[@mavidesign]

Hi, I'm aware there have been multiple comments suggesting the same thing. I'm however still getting the intended result (I can see "expose nested properties") and am unable to replicate the problem. Could you share your file with me? I'm trying to undersand the nature of the problem. Thanks!

[@Epsio0]

@@mavidesign Unable to share as it was a throwaway page. I did find a page somewhere on the figma forum that implies that option is a BETA feature.

[@mavidesign]

@@Epsio0 that’s interesting - maybe this feature is gradually being rolled out across all accounts? That would explain a lot.

[@tomascoox]

U need to turn this on in settings

[@treyy7366]

@@tomascoox thanks for the help! Finally got it to work, had no idea it needed to be turned on in the settings, appreciate your help!

[@JamesWaters-w4o]

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

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

[@antoniodisilvestro7886]

Hi, i have the same issue, have you found a solution? I think that the problem is because the click interaction working between the default state and selected date, and when you are in hover state the click doesn't work properly.

[@omotayoyohan3217]

Have you found a solution? .. I am having same issue can we connect ! ?

[@sasrss]

​@@antoniodisilvestro7886 unfortunately I couldn't solve it. I end up buying the file

[@sasrss]

@@omotayoyohan3217 unfortunately I couldn't solve it. I end up buying the file

[@madelynlee2732]

Hello! I am having the same issue. Can we connect and discuss the solution?

[@falfi6073]

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

[@Underhills]

I have the exact same issue. I went back to the radio button and the radio button option components originals and added a click even from hover to selected, then it worked in the demo as well. That's very odd cause he didn't do that in this demo at all.

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

[@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!

[@TheGuyYou]

Bro you just save my day. Many thanks

[@MariannaSurzenko]

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

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

[@Blessing-Adedokun]

Thank you so much. the video was helpful but how to you return to an empty state? I mean I can only select the next option, I cant deselect a previously selected button.

[@david05]

Thank you! I have been hours with this

[@DBUSTIN11]

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

[@jodjadien]

everything worked right until I play the prototype the selected oprions doent showup only the hover states work.

[@syuhaime]

please tell me why it does not uncheck the button when I clicked the other button. I need help. I did check the "Reset Component State" but it does not change anything.

[@geethas6973]

Its really amazing..Thank you for this video

[@Underhills]

Thanks for sharing. Btw, I never got the on click event on my last instance demo, only hover states. I followed all your steps to a tee. I went back to the radio button and the radio button option components originals and added a click event from hover to selected, then it worked in the demo as well. That's very odd cause you left that out in your tut. Figma doesn't allow multiple events to be triggered on the same component, so adding both a mouse over AND a click event from the default state button won't work. So adding a click event on the hover was my only option, that's a very strange interaction. I think it's safe to say that Figma is very over engineered and not very logical 😵

[@Justeen15]

Very thorough tutorial but I followed every step and the clicked state never shows up. I find this video "One Choice Radio Buttons with Variables in Figma" a lot easier with advanced prototyping: kzbin.info/www/bejne/nGLGqmCZhtSXlbs. If anyone runs into the same issue as me, I highly recommend to check out that video.

[@aasthadoshi145]

We can do it only if we have the paid version

[@Justeen15]

@@aasthadoshi145 yeah I found out too. Quite unfortunate.

[@kelseyw587]

ahhh thank you!!! Great tutorial. I've been wanting to utilize booleans and variables for a cleaner prototyping approach, and this was perfect. had to watch it a few times to understand, but it's great, thanks for sharing!

[@chorizo-seele]

Thank you for this tutorial, it has helped me a lot. I have a question, why when the cursor is over the selected option the fill disappears from it? is there any way to correct that?

[@JC-xp9lu]

Let's say I want data below to change based on the single-selection, could I still use this method, or am I stuck with noodle-soup prototype screens?

[@nourhanali1331]

This was awesome, thank you

[@pavlinastankova1198]

Thank you very much, Mavi!

[@mavidesign]

Za málo;)

[@sharon_hart]

Edit: I'm a noop, For the new version there's a plus at the bottom of the component to add a variant. -- prev. remark also works: to "add variant" right click on the Component in the layers, go to "Main Component" then choose Add Variant (no key command).

[@Moonya-v3p]

You are a GOAT.. thank you!

[@simisolaodukomaiya151]

Figma is crazy!!! All these steps just to create a single selection radio button. Adobe XD does it better within few seconds.

[@mavidesign]

Really?! How?

[@simisolaodukomaiya151]

@@mavidesign how? Creating a single selection radio button in Adobe takes a few seconds. Look at all of the steps one has to go through just to create that from your video. Haven’t you used Adobe Xd before?

[@mavidesign]

@@simisolaodukomaiya151 Oh I have used Adobe XD before. I can't however recall a workflow with if statements, meaning the structure needs to be similar to this tutorial if you want to create something that works similarly. The problem is not designing a single radio button but rather creating a set of these, where if you click one, the other gets automatically de-selected. As far as I'm aware this needs to be done through a specific structure as shown in this tutorial or using "if" statements which, to my extent of knowledge, are not present in Adobe XD nor Figma. Please correct me if I'm wrong:)

[@arnaudakotonou6254]

Great tutorial thank you for sharing

[@Senazz100]

guys i got a problem why i just can select once after that what i can is just hovering

[@olivialozy5081]

So helpful - thank you! Is there a way to prototype conditionally such that the selected radio button + tapping another button (a 'next' or 'ok' element, as if taking a test or a survey) brings the user to another frame?

[@alyssafrank4227]

did you ever figure this out? i'm struggling!

[@magdalenam6866]

How to use it for more than 5 options ?

[@yasemintopuz]

I did every step but actually it didn't work for me. I really don't know why 😢

[@niklastsalkos]

Is there a way to move around on the radio button options?

[@niklastsalkos]

Like move singular lines, not the whole component at once

[@illonawidjaja]

Hi, I hope this message get to you. I have tried your step from the beginning, but at the end I could not find the nested instance option in properties 😢😢 what should I do ? Can anyone help me ? 😢😢

[@mavidesign]

That is weird, could you share the file with me somehow?

[@Letzzzzz]

I had the same problem, so I made some research and found out this is a beta feature. you have to go into your account settings and check the box for beta features!

[@mre5406]

@@Letzzzzz Thanks - got me there too! Coulda mentioned in the video - not only in beta but be switched on as well :)

[@Jairo0784]

Hello, I followed all the steps and when I get to "properties" the "nested instance" selection does not appear

[@mavidesign]

I believe you need to enable beta features in settings as others suggested

[@ZedKaa]

Genial, me ayudo demasiado.

[@brendaj1265]

Hi, I followed all the steps but when I tried to launch the prototype, I can select all the radio buttons at once. Selecting one doesn’t uncheck / untick the others - mind letting me know what’s wrong? Thanks!

[@mavidesign]

Hello, I’d have to see the source file to determine what’s wrong. You can reach out to me via Instagram or Discord (Patreon)

[@brendaj1265]

@@mavidesign I have reached out to you on Instagram, appreciate it.

[@harishgv9370]

Hi, I also had the same issue. Have you solved it ? If solved means, Please let me know. Thank you

[@RobinKosnas]

You have to check at the State management options and make sure the "Reset component state" is on for the interactions.

[@EduardDruzhynets]

@@RobinKosnasthank you!! This advice helped me a lot!

[@khairiyyahasna8279]

I've followed the step by step but why can't I?

[@rukminikotamraju]

Thank you so much.

[@abhishekburnwal1961]

Thanks 👍🙏

[@MetalHero73]

Thx a lot sir

[@sharvarimarathe6390]

tried this. Mine is getting all clicked and not any one of it. why?

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

[@nexcauradicau]

I was trying to follow the tutorial, but for some reason the fucking expose properties from didn't appear, I tried creating another file and following the tutorial again. I didn't know what to do so I ended up buying 😥

[@tomascoox]

U need to turn this on in settings

[@miguelkillki]

This is wrong, the design is supposed to take less time than the development. that is done in seconds with html, figma has to work on that.

[@mavidesign]

Explaining adds a lot of time but otherwise I agree. On the other hand, there needs to be a good balance between ease-of-use and features :)

[@sophiavigano6773]

i didnt get it

[@SaraTarannum]

Your voice & accent sounds exactly like @withmarko

[@MissileFlying]

now this is some engineering level sht

[@lucialopezbertram4174]

It works well for me, but after a while it doesn't... looks like a bug

[@dwiseptia4728]

AAAAAAAAAAAAAAAAAAA MANUAAAAL ONOOOOO I HAD MORE THAN 20 BUTTON WITH SINGLE CHOICE COMPONENT

[@arifblack9620]

Start from 04:50 if you want to skip all the boring BS

[@AnnaStark-hs1vg]

Wow so much work for nothing, I wasted a lot of time following this TWICE. And now I'll go to the safer option which is to simple create the number of instances you need to show, (3 in my case) each one with a radio button selected and a simple instant transition. This isn't working. I was hopeful.

[@fsm__]

The video is from 2022, blame figma not the video, things changes

[@Edd_3]

what a sigma

[@_pjd]

XD does this a lot faster. What a pain in the A.

[@mavidesign]

I’m afraid that’s not true. I’ll be happy to correct what I’ve said if you point me to a specific XD workflow - I have done research on this because someone already left a similar comment. The functionality of Figma and XD is similar in this case which means that the process would be of similar length - it’s important to not forget that a radio button requires if-then logic which has to be worked around using prototyping mechanisms

[@vemmaster]

I thought I was the only one, but it seems like there are many others experiencing the same issue without any comments explaining. It's quite time-consuming. Dislike and unsubscribe

[@ghzlSHCH]

:D

[@mariaisabelgomez9561]

All fun and games until you need a sixth option

[@smitpatel9995]

Can't we just tell the engineering team to make radio buttons by themselves? 🥲