So this is just something I hit my head on all the time. I have some components which are meant to hold a list of instances of another component. The solution I always use is to create like 20 instances inside and then hide all the ones I don’t need for a given design. Many of these designs contain far fewer than 20, but other designs can get close to that number. It just depends. Having all this unused junk in my layers is just irksome.
A related problem is that the interior elements cannot be reordered without a lot of work. Ideally, it should be possible to create a component, which can have an arbitrary number of a particular instance (like "list row"s in a “list”) and those instances would be reorderable and removable in the layers panel.
It seems like this should be doable with a special component property applied to the embedded instance that I want to have arbitrarily many, freely reorderable copies of.
Other posts make a similar request, but I wanted to add my own to emphasize that it would also be important to be able to reorder these instances.
The next-best method to “customize” the contents of a component is to only provide 1 nested instance (it doesn’t even have to be a UI element, it can just be a frame with a random fill color that you call ⬦ Placeholder or ⬦ Slot). This allows you to swap out that nested Placeholder with your own content (which would itself need to be a component I call these “content carriers”). If you wanted to re-order the content in your Content carrier, you just re-order it on the main component!
I also can’t remember where I saw this (likely twitter), but I saw a designer advocate from Figma confirm someone’s inquiry if Figma would make this “slot swapping” workflow more baked-in. So while we don’t know when, we know that Figma is well aware of this kinda clunky work around and will likely address it someday.
Yes, I’ve watched that video and I am using that solution currently.
The issues comes down to layer pollution and difficulty reordering.
To be clear, I’m not able to reorder at the main component level because my main component doesn’t know what content is going to be in it. Think of a card-like component that’s used as a container for a shopping list. The exact items, let alone the order, can’t be baked into the main component.
When I’m dealing with the instance of the container component, I use boolean properties to show/hide the correct quantity of instances contained in it. And then, there are only two ways to reorder—replace the content of each instance such that each item contains the right content OR detach the component.
I do hope Figma finds and ingenious solution that makes it easier to create container components that hold an arbitrary number of freely-rearrangeable items.
Unfortunately, this is not a good solution for big component libraries or design systems across many products. We’re forced to make anything a component to put it inside the eg. modal.
They also closed the original Slot feature request. I don’t like Figma anymore.
Reopened it here
because not everything is a component. A single instance of content should not be a component. making useless components everywhere makes the file performance bad and makes organization difficult. When you have already large files this is not a good solution.
