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.


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.


Add comments to the published Figma page. I will fix any problems.


Screenshot of Tree Component in Action

3 responses to “Interactive Tree Component in Figma”

  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?

%d bloggers like this: