Best way to make radio buttons function in prototype?

Hi,
Noob to Figma. Moved from Sketch. Used Axure for more active protos in the past.
Is it me or is there just no easy way to make active radio and check boxes in Figma? I’ve created components with the proper variants. Can’t figure out how to make them an active element in the proto. Do I need to use overlays? OnClick doesn’t seem to offer the proper options. Please advise!

2 Likes

Smart Animate could do something like this (I think). I’m a noob to Figma too but I recently learned about this feature; and, from what I can tell, It should work.

Figma Tutorial: Smart Animate and Drag Triggers
[Part 1] Smart Animate Tutorial

Hi Rene, I also have the same problem. Have you figured it out?

I’m on the same path as Rene. Mostly a Sketch/Axure user now getting into Figma. I understand the core concept of using Fig Variants/Interactive Components(BETA). My issue with a simple radial button in Fig is that: what if you have more than 2 radial buttons like 3~n radials? So if the user click any one of the radial buttons, two things will need to happen:

  1. Set the clicked radial button to the “Selected” state.
  2. Unselect whichever preselected radial(a variable)

In Axure, this is very easy, you can do it with conditions or variables. In Figma, I still haven’t figure out a way to build this radial button interactive component which can scale to any number of radial buttons. All the radial button tutorials I watched on Youtube only showing two radial buttons as a binary toggle(two choices, either or, true/false). But in the real world, radial buttons can have more than 2. For instance, the gender selection. You can have Male, Female, and Nonbinary.

So can someone help?

Thanks.

KB


Screen Shot 2021-08-08 at 10.31.06 AM

1 Like

This is just what I’m afraid of: a complete noodle soup. There’s gotta be a better way to do this. Come on Fig, get me some advanced conditions/logics!

3 Likes

You can vote for this feature in these topics:

But, I still need to thank you for “cooking” up all those noodles for me. Appreciated. :smiley:

1 Like

Hi @tank666. This link no longer works. Any way I can get access? Either way, thanks in advance!

1 Like

Let’s get a relief from using the noodle soup radio button group. Now we have variables and here I have published a community file for Figma with variables based components and instances where we have functions for radio button group, select all check box group and accordion as well.

File link https://www.figma.com/community/file/1256660046319231869

Try and let me know your feedback.

1 Like