Figma Interactive Tree v3b

Figma Community File

Rule of product design #7: Always show your work in prototype. Never make people look at your canvas.

There reason to use a prototype is to curate the experience for your consumer which may include engineers, product managers, and even users/prospects. Having your designs be nearly high fidelity and realistic will get you the most accurate feedback to your design iterations.

With that philosophy, it is crucial to have a solid design system that makes it easy to build prototypes. (See difference between prototypes and storyboards) I just published my third iteration of an interactive tree. I think this one works the best yet.

Figma Prototype

In this version, I am using the new Figma functionality released in Spring of 2022. I simplified some of the internals and made sure to fix some logical errors. You can open and close the nodes and it remembers all of the information inside.

Please give it a try and see if you like it. Feel free to improve upon it or make suggestions.

The instructions on how to use it are inside the file itself. If you have questions, please let me know.


2 responses to “Figma Interactive Tree v3b”

  1. Nice work, Glen!

    In my limited tree UI work, I remember doing a lot of thinking about when and whether the selection of a node updated the details view (or not). That would be an obvious next step for a proto like this.

Whatya think?