Interactive Tree Component in Figma

Published 3 Comments on Interactive Tree Component in Figma

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

  1. 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.
  2. No one (AFAIK) has built something like this before. It took me about 4 days of messing with it on and off.
  3. It probably is plugin-friendly. Might make it easier to control the nodes from a google doc or maybe sheet?
  4. 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!

Screenshot of Tree Component in Action
Published
Tagged ,

3 comments

  1. Very nice work, Glen! Thanks for sharing this well-crafted and helpful component! I hope Team Figma takes note and builds something like this into a future version, because I’ve needed this tree-structure capability on many projects…

    Also, how rad that you dreamt the way to solve this! Love it.

Whatya think?