Skip to main content
Question

Issue with components slots, swap instance inherits incorrect height

  • January 29, 2025
  • 2 replies
  • 186 views

Martin Eriksson

I’ve recently tried to dive into the use of component slots. It sounds great in terms of keeping the components more flexible and discouraging the need to detach. 

However i’ve hit a wall when it comes to swapping instances. Let me try to explain:

 

  1. I create a component and include the slot component into it, I’ve made the slot component so that i can through the properties panel adjust how many slots i want (as columns or rows). So that works fine.
  2. When i swap a slot through the properties to another component instance it looks OK the first time.
  3. However, if i were to click on same slot again in the properties and change to another component. Ex. If i first added a image component and then switched it to a button component. It will have the size of the “default” slot component and ignore the correct size of the button, image or whatever component i replace an already instance swapped slot with. So if the slot size is 64px in height, the button in this case would have 64px (even though it’s correct size is 56px) and so on.
  4. This seems to be the case regardless if i change a slot’s instance in for example the card “Component” (master) or in an instance of that card component. 

 

I want to mention that all my component slots does have “hug” as setting for height and so does the components that i instance swap, so everything looks correct from what i can tell.

 

This image shows how the “blank-card” looks with the slot setup, on the card to the right of it i’ve changed the instance of a few slots and it looks fine. But if i change for example the text instance slot to a button instead, it will change back to the original slot size 64px in height and ignore the true height of said component instance.

 

 

Here is another example where i had a text block component (that has two variants, one standard and another that has article card text content. If i change to the other variant type in the properties it resets at 64px height which again is incorrect as it inherits the wrong height from the default slot component.

Now, i can fix this “easily” by simply going down to the height section and change to “hug contents” and it will look correct again but this feels like a very annoying way of working, having to do so every time someone switches a instance.

 

 

Does anyone have a clue about what is causing this or is this how it is for everyone? Seems unlikely… but i can’t wrap my head around how other people do it. I’ve watched to many videos and read articles on the slot component topic and i should be doing it correctly but please enlighten me if i am not :). Thanks

Benji_Greig1

Yeah I have experienced this as well. Especially things like heights really mess up the whole idea of instance swapping.

I had a simple example where I was building menu items and dividers so that it was easy to build out a menu and limited to only accepting menu components.

But it exhibits the same kind of issues, if I replace a menu item with a divider then the divider inherits the height of the menu item…. So I end up with very high dividers :-P

Frustrating and makes the idea of using ‘preferred’ in instance swapping borderline useless unless you’re swapping things that are exactly the same size.

 


Sheila_Sheikh

Same issue here. Instance swap just doesn’t support fixed sizes, which really makes slot components unusable in many cases.

In general, it would be nice if Figma implemented more flexibility for instances: resizing fixed size children, changing order of children, adding new children. That would eliminate the need to detach in most cases.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings