Hi fellow Figma fiddlers!

I’ve run out of help pages and YouTubes on a problem I can’t seem to crack; prototyping

a highly common, verging on trivial, interaction behaviour: A set of toolbar-style navigation tabs, each of which causes a side panel with distinct content to open. That behaviour should be available universally on several different pages of an application.

I’m talking about combining two interaction principles;

1. Tabs with mutually exclusive, radio-button style selection status


2. Slide-in-and-out overlays, or one single overlay with multiple content variants

Building each pattern on its own is almost banal.

There are some UI detailing expectations that aren’t particularly exotic, either:

• Each tab must have an idle, hover, and selected state.


• The tabs have combined radio button (mutually exclusive selected state) and toggle behaviour so that a neutral state—no panel deployed—is achievable.


• The toggle behaviour (on Click: Hover —> Selected) combines with an open …] as overlay action; conversely, (on Click: Selected —> Idle) with close overlay.


• The radio button behaviour (selecting a different tab from the one currently active) merely swaps one overlay for the next without an animation that would tax the user’s patience.

Tabs and overlay frames (panels) are built components to allow for the propagation of style changes, should those become necessary when I see the big picture. The simple photo album app used in Figma’s own YouTube channel to explain the concept of overlays is not helpful—I have no problem with the mechanics of overlays opening, closing, swapping.

No matter which permutation of component nesting I try next: The variant properties of the tabs (mouse enter –> Hover; Click on Hover —> Set to Selected) always, always find a way of fighting against either the intended tab-set internal behaviour (Click on Hover —> Deselect Others; Click on Selected –> Return to Idle) or the overlay interaction (Click on Hover —> Open t…] as Overlay).

How does Figma expect to nest the individual tab into the set of tabs and then into the combination of tabs and overlays so that everything is entirely unambiguous?

This is such a universal UI pattern (just think of an e-commerce app where you might have a ‘view my cart’ next to a ‘user profile’ next to a ‘settings and preferences’ tab-panel) that I’m truly baffled at how immensely fussy it turned out to build. What am I missing here?

Thanks very much in advance for any advice (or links to tutorials or blog posts etc.)!