In the prototyping part of Figma we can use expressions when using the “Conditional” prototype action. I’d like this functionality to be extended to be used when applying a boolean variable to show/hide a layer or toggle between component variants. The exact same logic/functionality used in the if statement could be used to create a true or false result.
Some examples of desired expressions would be:
activeIndex (number) == 4
isEnabled (boolean) != true
option1 (boolean) == true and option2 (boolean) == true
Example situation and ideal scenario
When creating a button component with a default and active state, you can toggle between the two states with a boolean. When having 5 buttons and only wanting 1 to be active at the time (like in a tab bar), you’d need every button interaction to set its own boolean to true, while setting all the other booleans to false. Add more buttons and you’d need to add new booleans, edit every button and add additional actions.
In the ideal scenario, you’d be able to just set an active index number on click and toggle between the two states based on an expression like activeIndex == 4
.
And why not just use multiple variants of a tab bar for each possible active button? Because adding all tabbed content to each variant would be a massive tasks. Working based on a variable would allow other page elements to interact based on the variable as well.