The Layers panel is like a table of contents for everything on your page. Every frame, text block, image, and component has a layer. Understanding how it's organized helps you find and edit things quickly.

Opening the Layers Panel

The Layers panel is always visible in the left sidebar. If you don't see it, make sure you're on the Layers tab (the icon that looks like stacked rectangles) rather than the Assets tab.

How Layers Are Organized

Layers in Framer are nested — like folders inside folders. The structure typically looks like this:

Page └── Section (Stack) ├── Navbar │ ├── Logo │ └── Nav Links └── Hero ├── Heading Text └── Button

Frames

The outermost containers are usually Frames — they represent sections of your page. You'll recognize them by the frame icon (a small square outline).

Stacks

Inside frames, you'll often find Stacks. These automatically arrange their children horizontally or vertically. They appear with a slightly different icon.

Components

Layers shown in purple are Component Instances — meaning they're linked to a master component and will update if the master is changed.

💡 Tip: Double-click a layer name in the panel to rename it. Well-named layers (like "Hero CTA Button" instead of "Frame 38") make editing much easier later.

Finding an Element Quickly

1. Click on any element directly on the canvas — its layer will highlight in the panel automatically.

2. Alternatively, use Cmd/Ctrl + F to search for a layer by name.