Tree view
Nested, expandable lists for files, folders and navigation hierarchies.
In Figma
Section titled “In Figma”From guidelines/components/tree-editor-color-picker.md
Properties, variants and anatomy of the Figma components.
Tree view
Section titled “Tree view”Example tree built from Tree items.
Variants: 1
Tree item
Section titled “Tree item”Row in a tree; levels 0–2.
Variants: 18
| Property | Type / options |
|---|---|
| Label | text |
| Icon swap | instance swap (icon) |
| Type | Folder · File |
| Level | 0 · 1 · 2 |
| State | Default · Hover · Selected |
Tree view
Section titled “Tree view”Do
- Use for files and categories.
- Show expand and collapse chevrons.
- Highlight the selected item.
Forbidden
- Never nest deeper than four levels.
- Never use a tree for flat lists.
- Never load a huge tree at once — load children on expand.