Create a SINGLE CHOICE (RADIO) Interactive Component in Figma (Tutorial)
ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2024
- Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Get the SOURCE FILES for this project ($1.99): payhip.com/b/JwN0n
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 a MULTIP...
How to create / design / build an interactive single-choice (radio) option selector component prototype in figma (step-by-step explanation tutorial)
--------
© 2022 Mavi Design - แนวปฏิบัติและการใช้ชีวิต
![[ไฮไลต์] ฟุตบอลชาย ญี่ปุ่น vs ปารากวัย รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/X_BeGaAv1oM/mqdefault.jpg)
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!
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!
Thank you for this video and all the other content on your channel! I've learned so many useful tips from your tutorials! 🔥🧡
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!
Thank you for this video. It helped me solve a problem I was having with a project I am working on.
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!
Amazing, this video really helped me out at work. Thank you
Thank you! I have been hours with this
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 =)
Yes! It works. Thanks!
Thank you so much!
Thank you, it works now! :)
The greatest of heroes. Thank you very much
Very helpful. Thanks!
This was awesome, thank you
Great tutorial thank you for sharing
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!🤩
Its really amazing..Thank you for this video
Thank you so much.
Genial, me ayudo demasiado.
Thx a lot sir
Thank you very much, Mavi!
Za málo;)
OMFG !!!!!! I've been looking for this tutorial for two days !!!! You've saved my life !!!! THANK YOU SO MUCH !!!!!!!!!
🥰 happy to help
Genius move at 9:49 ! That saves people a lot of time! Thank you sir!
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?
Thanks 👍🙏
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?
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.
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
@@mavidesign Even with a basic understanding of Figma I'd hardly call this intuitive...
"Intuitive" is describing the potential Figma interface required to incorporate IF / ELSE logic. Not the tutorial workflow
😂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.
Well, now Figma did introduce If.. Else logic. l I can't figure out how to use it yet
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.
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 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
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?
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?
did you ever figure this out? i'm struggling!
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?
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.
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...
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.
everything worked right until I play the prototype the selected oprions doent showup only the hover states work.
How to use it for more than 5 options ?
Figma is crazy!!! All these steps just to create a single selection radio button. Adobe XD does it better within few seconds.
Really?! How?
@@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:)
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: th-cam.com/video/f1cy-cQod_Y/w-d-xo.html. If anyone runs into the same issue as me, I highly recommend to check out that video.
We can do it only if we have the paid version
@@aasthadoshi145 yeah I found out too. Quite unfortunate.
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!
guys i got a problem why i just can select once after that what i can is just hovering
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!
@@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.
@@Epsio0 that’s interesting - maybe this feature is gradually being rolled out across all accounts? That would explain a lot.
U need to turn this on in settings
@@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!
I did every step but actually it didn't work for me. I really don't know why 😢
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.
Have you found a solution? .. I am having same issue can we connect ! ?
@@antoniodisilvestro7886 unfortunately I couldn't solve it. I end up buying the file
@@omotayoyohan3217 unfortunately I couldn't solve it. I end up buying the file
Hello! I am having the same issue. Can we connect and discuss the solution?
Your voice & accent sounds exactly like @withmarko
now this is some engineering level sht
Is there a way to move around on the radio button options?
Like move singular lines, not the whole component at once
I've followed the step by step but why can't I?
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 thing happening to me now, anyone 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
Hello, I followed all the steps and when I get to "properties" the "nested instance" selection does not appear
I believe you need to enable beta features in settings as others suggested
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 ? 😢😢
That is weird, could you share the file with me somehow?
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!
@@Letzzzzz Thanks - got me there too! Coulda mentioned in the video - not only in beta but be switched on as well :)
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!
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)
@@mavidesign I have reached out to you on Instagram, appreciate it.
Hi, I also had the same issue. Have you solved it ? If solved means, Please let me know. Thank you
You have to check at the State management options and make sure the "Reset component state" is on for the interactions.
@@RobinKosnasthank you!! This advice helped me a lot!
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 😥
U need to turn this on in settings
AAAAAAAAAAAAAAAAAAA MANUAAAAL ONOOOOO I HAD MORE THAN 20 BUTTON WITH SINGLE CHOICE COMPONENT
tried this. Mine is getting all clicked and not any one of it. why?
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 TH-cam - thank you for your understanding!
Mavi
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.
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 :)
XD does this a lot faster. What a pain in the A.
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
:D
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.
The video is from 2022, blame figma not the video, things changes
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
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
Start from 04:50 if you want to skip all the boring BS
All fun and games until you need a sixth option
Can't we just tell the engineering team to make radio buttons by themselves? 🥲