Allow nesting component instances into the same instances (not directly)

A break down of this while we were discussing this:

@Andrei_Iancu OMG so you typed all that on a phone 🤣

This makes a lot of sense, but I think gives the wrong impression for what Figma needs to implement.

This issue arises because we’re trying to figure out hacky ways to have a reusable Box Component, and ‘replace me’ is the best we can do so far. This ‘cycle detected’ thing becomes an issue only because of this hacky workaround.

Step 1, we need the capability to create a “Frame Component” and put any elements inside them, Components or not.

Loosening the ‘cycle detected’ restrictions is an added bonus, as naturally, people will have reusable components that they would want to use inside this Frame Component and that Frame Component may end up being used inside itself if it’s a very common use case.

Box Components are the foundation to literally every design component. It’s surprising this isn’t the #1 requested feature. It says a lot about the design community and what we expect (or don’t expect) from our tools. /endbabyrant

That’s a very good point! There is a feature request for this already: Fully Editable Component Instances

I think removing the cycle restriction might be easier to implement than a full feature like this. So in the meantime that would be nice. But adding a fully editable content field to components would be life-changing.

I think I found a non-optimal solution #3 by using a component group (variant) container to create a “warp zone” to evade cycle detection. (Getting inspired by @Andrei_Iancu’s Limgo portals! 😆) In this example I have an empty variant slot, and swap one of the ◇ 3-row’s ◇ Placeholders with the empty variant slot. And then I drop in another ◇ 3-row into the empty variant slot. No cycle detected. You just need to keep the first (top left) variant empty and it seems to work.

Edit: You don’t even need to use variants — an empty “❖ Placeholder Holder” could work to prevent cycle detection as well. The component group (variant) container does make it easier to group and create as many as needed, though.

I totally agree. But we have no other way than the hacky one until we have all features we need 😕

That’s interesting!
But you are right in our conversation:

… problem is that you’ll need to create them every time you want to do this and it’s an extra level of nesting.

Although it makes organization of all placeholders easier.

I ran into the same issue today trying to nest my Stack components multi-levels deep.

I think it’s unfair it works this way in Figma, because in code (HTML or React) you can nest the same “component” instance as many levels deeps as you want:

I think the only solution for now is to create a ❖ Main Container component with ◇ slot instances inside. Then you need to create also another component for ❖ Column/Row with variants. With this, you can upto 2nd level only. Unless yo create a similar column component with different name

Can’t understand that why Figma doesn’t allow instance of the component can’t be nested/swapped to instance of the same component.

Fully understand if source component shouldn’t nested with its own instances.

Card instance can contain card instances.

This issue is being a huge road block for us.

Are there any better workarounds known meanwhile?