Skip to main content
Question

Nested Slot (Beta) Experience and Feedback

  • March 13, 2026
  • 3 replies
  • 237 views

Martyn_Stivala

Hi all!

My first time posting here, and I thought I’d share my experience and feedback on the new slots feature that was recently released.

 

I’m working on a pattern builder component concept for our design system. The component has a master base slot nested within a single-row, 12-column grid auto-layout. This layout has variants for different patterns and breakpoints. The grid is then nested within another slot in the main component, allowing rows to be duplicated to build a layout. The component also includes various other elements and tokens to control spacing. The hierarchy looks like this:

 

* Pattern Builder (main component)

    * Row container (Slot)

        * Row patterns (this can be duplicated to create more rows)

            * Grid (1 row, 12 column auto-layout in Grid mode)

                * Slot Base (contains master slot to insert atoms and organisms)

 

For my initial testing, I recreated several layouts for the desktop breakpoint. The component worked well in this scenario. However, when I tried to switch the layouts to another breakpoint using a variant set at the top level of the Pattern Builder component, the Row Pattern did not update as expected. Instead, I had to select the rows and change them manually. This is workable, but not ideal behaviour.

 

After further investigation, I found that if I reset the component to its default state, switching between breakpoints works as expected - the Row Pattern updates automatically. It appears that the component behaviour breaks only when a slot is modified.

 

I also noticed that nested variants applied to the main Pattern Builder component disappear once a slot has been modified.

 

I hope this explanation is clear, unfortunately I'm unable to share images due to company policy. Has anyone else experienced similar issues, or is there a known fix?

 

Thanks M

3 replies

Martyn_Stivala
  • Author
  • New Member
  • March 13, 2026

I’ve just has another thought.

 

Is there way to set the default width behaviour for a component added to a slot? When adding a component via the Inspector their width is always set to fixed, which then needs to be manually set to fill. 


Suvvari Kiran

When am using a slot for a component which has multiple variants. On the instance level if there is any modification happened. I am unable to fetch the states(Default, Hover, Selected) of the instance. How to solve this?


UsabilityJeff
  • New Participant
  • June 10, 2026

Nesting an instance with a slot inside a component with a slot is pretty broken. Here’s my use case. I’m creating a Left Nav Menu.

Menu Item: a component with several states including enabled, hover, and pressed
Menu Group: a component with a slot for Menu items. The Menu group can be collapsed or expanded.
Menu: a component with a slot for Menu Groups.

It’s a joy to build with these components… just paste in new instances into their respective slots.

However…

When I run the prototype, interacting with the most nested instances, the Menu items, is broken. The hover and pressed states show the placeholder values of that component, not what appears on the enabled state.

My set of nested slot table components is similarly broken in prototype mode.

Figma. Never has so much potential failed to be realized in the face of poorly implemented features. After banging my head against countless bugs for so long, I’ve finally realized… it’s not me, it’s you.