What are the best practices for click Interactions with variants and variables

Hi there,

Im curious to see what the best practices are when it comes to wiring prototypes using variants and variables. I came across a design where I had to create multiple variants of the same component to be able to apply different variables to do the same action.

Im almost certain this is not the right way but would love to hear any tips to make this more efficient.

Example:

Background:
I have a table control component that allows users to turn on/off columns in a table. This component has multiple column categories with multiple column toggles. I added an accordion caret at the category level where users can click to expand and view all the column toggles under that category. The mechanism works the same for all categories.

image

Solution:
I created a component variant with one caret icon going up and the other down. Then, I connected the two with a click interaction to show the transition from variant to variant (show accordion open/close). Then, I created a boolean variable to hide or show the set of column toggles under that category. Caret up is mapped to a variable to set the boolean to True, and the caret down is mapped to set the variable to False.

Problem:
I had to create one set of variants per category and repeat the process one at a time. This resulted in about 10 different sets of variant components (for the same caret) to do the exact same thing.

Is there a better way? Hope that makes sense.

Hey @Pablo_Torres, thank you for reaching out! I’ve asked the team internally to share best practices for your case. I’ll get back to you, once I’ll get more information. Appreciate your patience!

Hey @Pablo_Torres, apologies for the delayed update. The team confirmed that unfortunately there isn’t a better way to do this at the moment than creating multiple variables or variants that handle each set of expandable items individually.

However your issue was acknowledged from the product team, stay tuned for future updates!

Thanks again for sharing your case with us and please let me know if you have any further questions.