I want to create a component which 1) has an arbitrary number of instances inside, and 2) I want those instances to be reorderable
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.
Page 1 / 1
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
If you don’t mind me asking, what about “making anything a component” so those things can be swapped into a slot (like a slot in a Modal) feels bad?
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.
But as far as I know, components are not any more costly in memory than a regular layer. Happy to be corrected if that’s not true. But that’s my understanding from running my own experiments. I think there’s also a talk from Figma’s engineering team about variant explosion where they describe something similar. I’m having a hard time finding it. Anyway, for me, if the memory cost is the same, I’d rather have the ability to swap instances without detaching parent components.
That being said, I can appreciate how creating more components could clutter the asset panel. Is that one you mean by “makes organization difficult”, or is there another aspect to it that I’m missing?
I’m gonna bump this up!
It’s a pain in the ass to make consistent tables, lists, menus, etc… unless you can add and remove a set set of sub components at will (like the instance swap property, but with the ability to add another instance) and the ability to toggle on allowing reordering a component.
This way I can have a “list” component with the ability to add an arbitrary number of specified sub components, and reorder them at will, all while staying consistent with my styling and the rest of the surrounding component.
Right now I either have to have 15+ variants (one for each amount of items needed), or 15+ booleans to toggle them on or off. And I can’t reorder them because it’s a shared component (which is the whole point of a component, no?).
Thanks for considering!
This is what I was looking for plus maybe more in-depth than what I was thinking.
Currently, I’m working on chip selectors in an input field component. The amount of chips in that section could be less or more than what I put in the component. After reading what you said I thought: what if I could establish the chip component to act as a list component? I could then add this list component into another component. A section similar and near the component properties could allow you to add and remove list items dynamically from that space. That way Icould type the content of each chip in and be able to add and remove from the list.
This is similar to how code works. Set a style type that applies to a specific class’s list item. In this example, the chip component would establish the style type for list items within the chip input field.
