Figma (much to my sadness) has no built in UI components like a tree or a table. These are UI elements I use every day. So I have been experimenting with how to make these in the most efficient manner using auto-layout, and interactive components. . I just published my interactive tree component to the Figma community. Please take a look.
UPDATE: I tried out the system using a Figma Library and it didnt work properly. So I broke it down and rebuilt it using a new approach. Which is better? You decide. (I think it works in a library now).
Recently, interactive components was released and would respect autolayout. Previously, that didnt work, so the tree was out of reach. One night, I had a dream about how to do it. So I got to work.
Requirements of a good tree component
- Easy/fast to implement as a designer
- In prototype will open and close on each tree node like you would expect
- Flexible
- Not a pain in the ass
I hope I nailed all of that.
Trivia
Some things I learned in the process
- You can not have a component inside an instance of itself. Trees actually would love this. So I had to make components for each level just to separate.
- No one (AFAIK) has built something like this before. It took me about 4 days of messing with it on and off.
- It probably is plugin-friendly. Might make it easier to control the nodes from a google doc or maybe sheet?
- Problem solving and experimenting is fun. Designers should always do this to stay sharp with their tools.
Questions?
Add comments to the published Figma page. I will fix any problems.
Enjoy!
Whatya think?