I have a component “Root” that it build upon component “Node” which also build upon component"Leaf".
Is it possible to modify the “Leaf” to make its branches of type “Root”?
In other words how to create an infinite expanding tree?
Solved
How to make recursive nested components?
Best answer by Ilya_Ivanov
I believe Figma won’t let you place an instance of a parent component into an instance of a child component. Which is reasonable in order to avoid infinite loops and memory leaks.
However, you can emulate “infinite” interactions by workarounds. They won’t provide the real look & feel of a real product, but can be fine for quick prototyping (MVPs, proof of concepts etc).
The first approach is to use a pair of overlays. Click handler of Overlay1 opens Overlay2 with manual positioning and vice verca. This provides infinite (hypothetically) count of iterations. But since you can only interact with the last layer in the stack, others won’t be clickable. This may flattern the prototype behaviour and make it’s flow almost linear.
Another approach is to simply prepare a bunch of collapsed/expanded component pairs to emulate a sufficient depth for the tree. The Node1 contains a Leaf1 with onClick = “change to the Node2”. Node2 contains a Leaf2 binded to change to the Node3 and so on. This solution won’t be infinite. But it provides the real N-level depth (supporting all possible combinations) with only N pairs of components which is acceptable in most cases. No overlays, every level is clickable.
Quick Demo: Figma
Source: Figma
Feel free to play with it
P.S. In general, such kind of a task is much simplier to implement with scripting)
This topic has been closed for replies.
I believe Figma won’t let you place an instance of a parent component into an instance of a child component. Which is reasonable in order to avoid infinite loops and memory leaks.
However, you can emulate “infinite” interactions by workarounds. They won’t provide the real look & feel of a real product, but can be fine for quick prototyping (MVPs, proof of concepts etc).
The first approach is to use a pair of overlays. Click handler of Overlay1 opens Overlay2 with manual positioning and vice verca. This provides infinite (hypothetically) count of iterations. But since you can only interact with the last layer in the stack, others won’t be clickable. This may flattern the prototype behaviour and make it’s flow almost linear.
Another approach is to simply prepare a bunch of collapsed/expanded component pairs to emulate a sufficient depth for the tree. The Node1 contains a Leaf1 with onClick = “change to the Node2”. Node2 contains a Leaf2 binded to change to the Node3 and so on. This solution won’t be infinite. But it provides the real N-level depth (supporting all possible combinations) with only N pairs of components which is acceptable in most cases. No overlays, every level is clickable.
Quick Demo: Figma
Source: Figma
Feel free to play with it
P.S. In general, such kind of a task is much simplier to implement with scripting)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.