Interactive Tab component set using Variables?

I’ve been pulling my hair out trying to find a way to leverage the new “advanced prototyping” features with Variables to see if I can get around not making an entire component set for a Tab bar control. :sweat: For example, here’s a screenshot of something similar from the Advanced Prototyping Playground file:

Selector interactive component set
Here you can see that every variant needs to be connected to another group, so you don’t end up with multiple active variants in a group.

I’ve not seen any examples or have found a way where we can avoid having to make a group (row in this case) for every active variant. The main issue is if you don’t do this (above), you end up with multiple “active” objects (Tabs in my case) anytime you click an inactive one. So in the first row above, you’d click diamond and both circle + diamond would be active.

I’d love it if there were a way to tell it that "I’ve clicked away from the active variant, so make it inactive now, so that you don’t need to make 3 sets of groups where a single tab is active (like the screenshot).

If anyone has any knowledge of how, I’d love to see/learn more. If this isn’t possible, take this as a formal request/feedback to Figma. Thanks folks! :heart_hands:

I could imagine a simple condition on each tab. Something like “if tab == circle” set state to selected = true else selected = false”

On the source tab component variants themselves or the tab group/row? Would you mind showing a visual example? I’m having a hard time wrapping my head around all this. And you think I can do that without a variable or text string?

Just discovered that using string variables nested inside a component isn’t possible currently. Will find another way with booleans maybe. Will follow-up.

Yeah I discovered the same last week. Nested components cannot accept variables at this moment.

1 Like

We’re also discussing this in the Friends of Figma discord. Think we’ll end up making a few methods in a community file and publish it out. Stay-tuned! :blush:

1 Like

With @megaroeny , we managed to find not just one but three solutions for this - each with its own cons and pros!

We just published it to the community any of you would like to check it out here.


Woohoo!! Thanks so much again Mai!

Nice, that is also something I’m wondering if it can be achieved by variable. However, it seems like having a downside that it can not have transition by adopting this method.

Yes, you can still use Smart Animate if that’s what you mean?

There’s no option for choosing either ‘smart animate’, or ‘dissolve’ on click for set variable.

1 Like

Ahhh got it. Yeah I didn’t realize that. That stinks. I’m sure they will later.

@ohbox0408 I was actually just able to get Smart Animate to appear, but that’s because I am also including a “Scroll to” for the tab group content (in my personal file). See:



This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.