Skip to main content
Question

How to best utilise Boolean variables in prototyping?

  • February 9, 2024
  • 2 replies
  • 613 views

Vincent_Schlothauer

I feel like I’m going to break my brain thinking about this, so I’d be super curious to hear how others are handling their prototypes.

Our design system provides an ā€œapp launcherā€ component consisting of a button and a dropdown menu. The app launcher has a property ā€œIs openā€ that can be either true or false. Other elements have the same type of property – on a page with several dropdowns and menus you can have dozens of components that are either open or closed.

What I do want: All the components that have an ā€œIs openā€ property close on click anywhere on the screen that isn’t one of the components.
What I don’t want: All the components that have an ā€œIs openā€ property open on click on any one of them.

What works is to create a Boolean for each component – ā€œApp launcher is openā€ (true/false), ā€œPersonal menu is openā€ (true/false), ā€œHonorific selection is openā€ (true/false) and so on. Then I can create an on-click event for the entire page to set all these to false. However I also need to create on-clicks for every single component to set every other component’s ā€œIs openā€ variable to false.

E.g. Component: App launcher
On click: ā€œApp launcher is openā€ == true
PLUS ā€œPersonal menu is openā€ == false
PLUS ā€œHonorific selection is openā€ == false
…
PLUS
Screen: Customs form
On click: ā€œApp launcher is openā€ == false
PLUS ā€œPersonal menu is openā€ == false
PLUS ā€œHonorific selection is openā€ == false
…

Is there any more efficient way of doing this that I’m not seeing?

This topic has been closed for replies.

2 replies

Gayani_S
Figmate
  • Community Support
  • February 12, 2024

Hey @Vincent_Schlothauer, thank you for reaching out! I’ve shared this internally with the team. Once I get a response, I’ll update you. Appreciate your patience!


Gayani_S
Figmate
  • Community Support
  • February 21, 2024

Hey @Vincent_Schlothauer, apologies for the delayed response!

I’ve got the following recommendation from the team:

Given the ā€˜only one can be opened’

  • One interactive component that has the individual states for the menu as individual variants.
  • One variable that changes the entire state of the menu to opened/closed.

That way you reduce the need for so many state variables.

Please let me know if this helps or if you have any further questions!