Anyone created mutually exclusive behaviour using conditional logic and variables?

Ask the community
1

I have been trying to create components for navigation controls, radio button sets, and dropdowns that show an existing selection with a checkmark. Each of this interaction use cases calls for mutually exclusive logic for a successful prototype:

  • Navigation Control: Only one section/page/screen can be shown at a time and thus the corresponding section needs to be “highlighted” in the Nav Control. By default, one section should always be “highlighted” as selected while the other sections are not.
  • Radio Button Set: One option needs to be shown as selected by default (there is no “no selection” for radio button sets by default). When the user selects a different option, all other options must be deselected.
  • Dropdown List: In some cases, Dropdown Lists will show an existing list option with a checkmark next to it. This reflects an existing choice made among the options (it might very well be a system default shown the first time a user encounters this list of options). When the user selects another option in the Dropdown List, the checkmark will appear next to it and be removed from the previous option, leaving only a single checkmark in the list to indicate the currently selected option.

What I’ve been trying to do in each of these cases is use Figma’s conditional logic and variables to create components that won’t force me to create, for example, a Nav Menu component that requires 7 variants (for 7 different sections that can be navigated) with a spaghetti of connecting logic per variant. We’ve all created these in the past. The maintenance and customization for each instance of implementation opens up a great deal of user error — particularly for a non-Developer like me.

My unsuccessful attempts at creating this conditional logic for the Nav Menu component involves the following:

  1. Create a boolean variable for each selectable option in the menu. For each of the 7 sections, I created a unique boolean variable called NavSection01, NavSection02, NavSection03, etc.
  2. Apply these variables to the “Selected” property of each corresponding Nav Menu component
  3. Use conditional logic for each click interaction that essentially says:
    On click
    IF NavSection01 == False
    Set Variable
    NavSection01 == True
    AND NavSection02 == False
    AND NavSection03 == False
    AND NavSection04 == False
    AND NavSection05 == False
    AND NavSection06 == False
    AND NavSection07 == False

Needless to say, this has not worked. I’m stymied as to why it doesn’t, but I’m not a Dev and I may be missing something obvious. This is why I’m throwing it out to the community to see if anyone A) spots an issue with my logic or B) has a better way to achieve the results I’m looking for WRT mutual exclusivity.

Thanks in advance for any and all help. :slightly_smiling_face:

2

Hi @RhizomeTodd, Thanks for reaching out about this! I really appreciate for sharing the details. I want to help in any way I can!

It’s a bit challenging to identify the issue with your logic without reviewing your design file. You may already be aware, but I wanted to share these articles from our Help Center with you:

I looked through our community to help you explore alternative ways to achieve the desired results. While these resources may not be an exact match for what you’re seeking, they could still be useful in creating components:

Feel free to explore on your own at: https://www.figma.com/community

I hope this sheds some light. If anyone in our community has experienced similar situations and has insights or suggestions, please jump in!

Thanks,

3

@RhizomeTodd - I believe you can achieve what you set out to do with using sections as well in this manner as an alternative method I guess.

4

Thx, @Sharpener. I’ll give this a try. It seems less related to what I’m trying to achieve but is totally an eye-opener because I didn’t know you could use Sections like this. :smiley:

1 Like
5

Thx, @Junko3! I really appreciate your help here. I’ve gone through a few backflips over this but due to deadlines, I’ve had to discontinue this approach and go old school by creating multiple variants of a Nav Control to create the illusion of a selected (or “highlighted”) section mutually exclusive to the others. However, in my off time I’ll experiment with what you’ve shared and see if I can make it work. If I can, I’ll post my results here.

Of course, I’m still open to other options if anyone else is monitoring this thread. :wink:

2 Likes