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!
@MerwanH
4 күн бұрын
Thank you for the empty variant trick, it made me save so much time and awkward fidgeting with proto-noodles!
@romainaranda19
9 ай бұрын
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
9 ай бұрын
Yes! It works. Thanks!
@xovert5347
9 ай бұрын
Thank you so much!
@corneliakocher3846
9 ай бұрын
Thank you, it works now! :)
@lokemis
9 ай бұрын
The greatest of heroes. Thank you very much
@mikechiu8512
7 ай бұрын
Very helpful. Thanks!
@cassiamegumi
10 күн бұрын
I followed your tutorial and it worked very well! Thank you!
@user-yt7hn9is5h
Жыл бұрын
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.
@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
@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
@viniciuscarliiared2253
7 ай бұрын
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!
@karenrose2504
4 ай бұрын
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!🤩
@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.
@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?
@hieuhuynh9218
9 ай бұрын
Genius move at 9:49 ! That saves people a lot of time! Thank you sir!
@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!
@DBUSTIN11
Жыл бұрын
Thank you for this video. It helped me solve a problem I was having with a project I am working on.
@MujahidOmer
3 ай бұрын
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.
@user-fq7oq5kb4z
Жыл бұрын
OMFG !!!!!! I've been looking for this tutorial for two days !!!! You've saved my life !!!! THANK YOU SO MUCH !!!!!!!!!
@mavidesign
Жыл бұрын
🥰 happy to help
@user-xv4hq8ff5s
6 ай бұрын
Amazing, this video really helped me out at work. Thank you
@MariannaSurzenko
Жыл бұрын
Thank you for this video and all the other content on your channel! I've learned so many useful tips from your tutorials! 🔥🧡
@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?
@tykill
2 ай бұрын
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.
@david05
Жыл бұрын
Thank you! I have been hours with this
@geethas6973
5 ай бұрын
Its really amazing..Thank you for this video
@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?
@nourhanali1331
10 ай бұрын
This was awesome, thank you
@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...
@pavlinastankova1198
7 ай бұрын
Thank you very much, Mavi!
@mavidesign
7 ай бұрын
Za málo;)
@arnaudakotonou6254
Жыл бұрын
Great tutorial thank you for sharing
@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!
@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?
@abhishekburnwal1961
3 ай бұрын
Thanks 👍🙏
@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: kzitem.info/news/bejne/x2eZ32GZiqGVko4. If anyone runs into the same issue as me, I highly recommend to check out that video.
@aasthadoshi145
9 ай бұрын
We can do it only if we have the paid version
@Justeen15
9 ай бұрын
@@aasthadoshi145 yeah I found out too. Quite unfortunate.
@kelseyw587
9 ай бұрын
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!
@yasemintopuz
Жыл бұрын
I did every step but actually it didn't work for me. I really don't know why 😢
@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:)
@ZedKaa
Жыл бұрын
Genial, me ayudo demasiado.
@rukminikotamraju
Жыл бұрын
Thank you so much.
@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.
@MetalHero73
Жыл бұрын
Thx a lot sir
@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?
@Senazz100
9 ай бұрын
guys i got a problem why i just can select once after that what i can is just hovering
@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
@SaraTarannum
11 ай бұрын
Your voice & accent sounds exactly like @withmarko
@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
4 ай бұрын
did you ever figure this out? i'm struggling!
@magdalenam6866
9 ай бұрын
How to use it for more than 5 options ?
@khairiyyahasna8279
10 ай бұрын
I've followed the step by step but why can't I?
@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 :)
@niklastsalkos
Жыл бұрын
Is there a way to move around on the radio button options?
@niklastsalkos
Жыл бұрын
Like move singular lines, not the whole component at once
@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 :)
@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
@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
@sharvarimarathe6390
11 ай бұрын
tried this. Mine is getting all clicked and not any one of it. why?
@mavidesign
10 ай бұрын
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 KZitem - thank you for your understanding! Mavi
@user-gm5gq6bd7u
Жыл бұрын
now this is some engineering level sht
@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!
@dwiseptia4728
Жыл бұрын
AAAAAAAAAAAAAAAAAAA MANUAAAAL ONOOOOO I HAD MORE THAN 20 BUTTON WITH SINGLE CHOICE COMPONENT
@_pjd
11 ай бұрын
XD does this a lot faster. What a pain in the A.
@mavidesign
11 ай бұрын
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
@AnnaWillo
2 ай бұрын
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
@ghzlSHCH
5 ай бұрын
:D
@AnnaStark-hs1vg
9 ай бұрын
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__
8 ай бұрын
The video is from 2022, blame figma not the video, things changes
@arifblack9620
4 ай бұрын
Start from 04:50 if you want to skip all the boring BS
@vemmaster
9 ай бұрын
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
@mariaisabelgomez9561
2 ай бұрын
All fun and games until you need a sixth option
@smitpatel9995
11 ай бұрын
Can't we just tell the engineering team to make radio buttons by themselves? 🥲
Пікірлер: 114