> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-claude-lucid-mccarthy-czkz3y.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Layers

> Navigate and organize the element hierarchy.

The Layers panel shows your design's element hierarchy as a tree structure.

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-claude-lucid-mccarthy-czkz3y/X83Vp-F6L0in2OPx/images/design-mode/layers.png?fit=max&auto=format&n=X83Vp-F6L0in2OPx&q=85&s=b0476b5252cd39c85d2dbc4c1d944a79" alt="Layers panel showing the element hierarchy" width="380" height="459" data-path="images/design-mode/layers.png" />
</Frame>

The **Layers** section is always visible in the left panel while you design.

<Frame>
  <img src="https://mintcdn.com/subframe-59800133-claude-lucid-mccarthy-czkz3y/X83Vp-F6L0in2OPx/images/design-mode/layers-toggle.png?fit=max&auto=format&n=X83Vp-F6L0in2OPx&q=85&s=c92df8d006ba4f1e9eafff2963492c9b" alt="Layers panel showing the element hierarchy" width="375" height="61" data-path="images/design-mode/layers-toggle.png" />
</Frame>

### Reordering elements

Drag layers up or down to reorder them within the hierarchy.

### Renaming layers

Double-click any layer name to rename it. Use descriptive names to make complex designs easier to navigate.

## FAQ

<AccordionGroup>
  <Accordion title="Why is there a lock icon next to some layers?">
    Some layers are locked because they're essential for the page or component to function. For example, most page layouts have a "children" layer that cannot be deleted because it's needed to render the actual page contents.
  </Accordion>
</AccordionGroup>