Hello! It seems like the new variables could be helpful in creating single select radio buttons that work more easily in prototype mode without as much effort, but I haven’t quite figured out how to do that. Right now the way I do radio buttons is just create a component with a different variant for each selected option, but that means I need a separate component for every question that has radio buttons. I’m hoping variables finally makes this easier. Any thoughts on how to do this?
I was just playing around with this today, and the best I could come up with is to define a variable to store the selected state of each option: option1Selected=false, option2Selected=true, etc… Then bind the selected property of the option component to that variable for each option. When you click on one, set the variable for that option to true and all the others to false. It works, but this is even more tedious and time-consuming than just a different variant for each state. The one benefit might be that it’s cleaner within the design. The other downside is that I found the bindings get removed by Figma automatically if you then group those options together into a component. That is to say, property bindings to variables are not available within nested components.
It does seem like this should be possible, but I’ve yet to discover it.
1 Like
I found this example in the community, and it seems to be using that same system.
2 Likes
Still the same roadblock - the example you found works if they’re separate, but you can’t pull them into a component. There’s a layer of nesting that’s missing.