Skip to main content
Question

Best way to make radio buttons function in prototype?


Rene_Norton

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!

10 replies

Jake
  • 48 replies
  • February 27, 2021

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


Priya1
  • 1 reply
  • May 11, 2021

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


Kublaiboy
  • 5 replies
  • August 8, 2021

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


tank666
  • 4859 replies
  • August 8, 2021

Kublaiboy
  • 5 replies
  • August 8, 2021

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!


tank666
  • 4859 replies
  • August 8, 2021

Kublaiboy
  • 5 replies
  • August 8, 2021

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


Ki93
  • 1 reply
  • July 27, 2022

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


tank666
  • 4859 replies
  • July 27, 2022

Prabaharan_CS

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings