Component overrides with slot component and layout grid

[brianstefanfrg]

Hi,

I am trying to wrap my head around (and staying in control) using slot components in a layout grid component. I might be overcomplicating things, so any input to keep it simpler please pitch in.

First off, some sources and background.

Inspiration for slot component and layout: https://medium.muz.li/design-systems-101-placeholder-components-in-figma-17da55125572

Might be related to Library Component Overrides Broken (makes it useless).

What
Having a reusable component where I can change number of items in instances and layout direction.

Why
Having control of instances of master/base components, while having the flexibility of adjusting number of “items” without using show/hide layer, and minimising variants work.

I can somewhat follow why the overrides do what they do, but I still see some behaviour that could be a bug or for me at least unexpected.

Instance resets to slot component

Some changes are kept on reset

Multiple resets to slot component (no text overrides)

Maybe I’m doing something wrong, maybe I am using nested components and overrides in an unintended matter.

Here is a playground file as well: Layout and Slot Component playground | Figma Community

Edit 1: Moved videos up and added title.

[Pavel_Kiselev]

Hey mate. You should name your slots, something like “item-1” and so on. Giving the name to each slot would preserve your overrides as you change number of items in your layout grid component.

Right now your slots does not have any name overrides so when you change number of items via variants Figma does not know how to preserve your overrides

UPD Does not seem to work… For some reason Figma does not keep name overrides, whenever I swap a slot with test component it seems fine, however when I change the number of slots it drops the name override

In the video below you can see that whenever I change the number of items rows are loosing their name overrides somehow

[brianstefanfrg]

Thanks! Naming, of course!

I fiddled a bit with changing back and forth between direction and items:

It seems, that switching direction with maximum items reverts the first instance drop. I might be able to use this work around for now, but curios to hear others thoughts on this.

Thanks for the help!

[tank666]

You linked to the thread where I gave the solution to the original author.

@tank666

Solution:

1. Place a “slot” instance in a auto layout frame (let’s call it “content”, for example).
2. Apply the component’s instance swap property to the “slot” instance.
3. Then control the visibility of the “content” frame in your variants.

Have you tried it? The same solution works for your case as well (even without the “Instance swap” property).

I edited the “LayoutGrid” component and added exposed nested instances properties for the “TestItemGrid” and “FormsCheckboxList” components (to change variants at the top level), and added text properties for the “TestComponent” and “FormsCheckbox” components (to preserve overrides when swap nested instances).

Figma

[brianstefanfrg]

Thanks for pitching in!

Ahh now I see what you did; you have all slots in all variants but hidden. I will give this i try!

Thanks!

For reference:

[brianstefanfrg]

Can confirm this works, thanks again @tank666!