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:
- 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.
- Apply these variables to the “Selected” property of each corresponding Nav Menu component
- 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. 🙂
