Skip to main content
Question

Trouble using advanced prototyping features with variant components, boolean variables, and conditional logic?

Allison_Woo

Hi all!

Working on a prototype for a form where the interaction needs to be:

  • user can check a checkbox and a set of fields appears
  • user unchecks the same checkbox and the set of fields disappears

My checkbox component is built with variants and conditional logic where “Yes” means the box is checked, and “No” means the box is unchecked. There’s also already a prototyping “Change To” interaction on them.

I created my boolean variables and set them to the fields I need to show and hide so that their Layer panel uses “showLayer” variables.

I’m running into the issue during prototyping when I try to use the Conditional interaction to set the “showLayer” variable to true or false AND also use the Change To interaction have the checkbox check and uncheck. It works for the first click (as in the checkbox will turn checked and the fields appear), but I can’t get the checkbox to uncheck and have the fields disappear on the second click. Only the fields show and hide but the checkbox remains checked the entire time. Screenshot attached of my prototyping interaction.

Screenshot 2023-07-26 at 3.09.10 PM

Any help is GREATLY appreciated! Thank you!!

This topic has been closed for comments

5 replies

tank666
  • tank666
  • 4863 replies
  • July 26, 2023

Move the existing “Change to” action to the if block, and add a new “Change to” action to the else block and change the variant.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Allison_Woo

Hmmm I tried that and I’m still having the same issue. The checkbox checks and the fields appear upon first click, but only the fields hide and the checkbox still remains checked on any subsequent click. I need it to uncheck as well.

tank666
  • tank666
  • 4863 replies
  • July 27, 2023

Can you please tell me if this interaction is added to an instance or to a variant in a component set?

Try adding and changing this interaction in variants in the component set to the following:

// "No" variant
if (ShowLayer == false) {
    Set ShowLayer to true;
    Change to Yes
}

// "Yes" variant
if (ShowLayer) {
    Set ShowLayer to false;
    Change to No
}
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Allison_Woo

Yes i have that set on the variants of the main component itself, not the instance!

Now when i set it, the checkbox is checking and unchecking, but the layers are not showing and hiding, only showing. I can’t get the layer to hide even though the box while check and uncheck. 😅

tank666
  • tank666
  • 4863 replies
  • July 28, 2023

Could you share a link to an example file?

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Terms & ConditionsCookie settings

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