Skip to main content

I have a component called tabs-btn with these properties:

  • state: active / inactive

  • text

  • showIcon

Then I have a main component Tabs that contains multiple nested instances of tabs-btn.
I exposed all nested properties, so when I select a tab inside Tabs, I can see and edit its props directly — this part works fine.

Now I want to add a visibility switcher (Boolean) for each tab instance — so that I can show or hide specific tabs inside the parent Tabs component.
The problem is that Figma doesn’t allow assigning Booleans directly to nested instances — so I can’t just create a Boolean property inside tabs-btn and expose it upwards.

The only workaround I found is to manually create multiple separate variables like showTab1, showTab2, etc., for each tab instance.
That works technically, but it’s a messy and non-scalable setup (especially if the number of tabs changes).

👉 Is there any smarter way to do this — for example, to let each nested instance have its own independent Boolean toggle (visibility) exposed in the parent component?
Or maybe a known pattern / workaround to simulate per-instance visibility controls for nested components?

Thanks in advance!

Be the first to reply!