Skip to main content
Question

Component overrides with slot component and layout grid

  • October 28, 2022
  • 6 replies
  • 2142 views
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.

3 Attachments
This topic has been closed for comments

6 replies

Pavel_Kiselev
  • Pavel_Kiselev
  • Power Member
  • 438 replies
  • October 28, 2022

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

1 Attachments
brianstefanfrg
1 person likes this
  • brianstefanfrg
    brianstefanfrg
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! 🙂

1 Attachments
tank666
  • tank666
  • 4870 replies
  • October 29, 2022

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

Figma – 29 Oct 22
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
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:

image

brianstefanfrg

Can confirm this works, thanks again @tank666!

A
  • Anonymous
  • 0 replies
  • November 27, 2022

This topic was automatically closed after 30 days. New replies are no longer allowed.

Terms & ConditionsCookie settings

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