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!
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 =)
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!
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.
😂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.
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!🤩
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!
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
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.
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!
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.
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.
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?
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
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.
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...
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-f1cy-cQod_Y.html. If anyone runs into the same issue as me, I highly recommend to check out that video.
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!
@@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?
@@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:)
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?
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!
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?
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.
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?
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
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?
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 ? 😢😢
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!
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 😥
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 RU-vid - thank you for your understanding! Mavi
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!
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
uggggh so we have to create a separate component for every single option 😖 why is figma's prototyping so messy. put the AI away and fix your core features damnit lol
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.
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
