Layer Panel: Figma-Style Page Hierarchy
Complex pages have complex structures. A dashboard might have a header, two columns, a metrics row, several panels each containing components, and nested tabs inside some of those panels. Navigating that structure by clicking around the canvas works for simple pages — but for dense ones, a better tool is needed.
The layer panel solves this.
A Tree View of Your Page
The layer panel sits alongside the visual canvas and shows your entire page structure as a collapsible tree. Every component on the page appears as a node. Nested components appear as children of their parent containers.
You see the hierarchy at a glance: which components are inside which panels, which panels are inside which columns, how deep the nesting goes. For a complex page, this is the most efficient way to understand the structure without clicking around the canvas trying to discover it.
Click to Select
Clicking any item in the layer panel selects that component on the canvas and opens its settings in the side panel. You can navigate your entire page structure without hunting for elements by clicking — just scan the tree, click the layer you want, and configure it.
The reverse also works: clicking a component on the canvas highlights it in the layer panel. The two representations stay in sync at all times.
Drag in the Tree
Components can be dragged directly in the layer panel to reorder them. If you want to move a component from one panel to another, drag it to the new parent in the tree. The canvas updates to reflect the new structure.
This is faster than canvas-level dragging for precise structural changes, especially when components are small or tightly packed on the canvas.
Show and Hide Layers
Layers can be collapsed in the tree to reduce visual noise when you're focused on a specific section. Expand only the part of the page you're working on; collapse everything else.
For very long pages — detailed record views with many sections, dashboards with multiple panels — this keeps the layer panel navigable without scrolling through every element.
The Designer's Tool in a Business Context
Designers who work in tools like Figma or Sketch will recognize this interaction model immediately. The layer panel is a direct translation of that mental model into a business application builder.
You're not designing visual pixels, but you are composing a structured layout — and the same organizational tool applies. See the hierarchy, navigate the tree, manage the structure deliberately.
The layer panel is available in the builder alongside the canvas view, toggled with a single click.