The Framer layers panel is the structural backbone of your project, listing every element on the page in a hierarchical tree. It controls stacking order, parent-child relationships, naming, visibility, and selection, and mastering it transforms how fast you can navigate, edit, and refactor designs.
What the Layers Panel Does
Every visual element you place on a Framer page appears in the layers panel on the left side of the editor. The panel shows the document tree, with parent elements containing children, much like the DOM tree in a browser inspector. Selecting a layer here selects it on the canvas, and vice versa. Renaming, reordering, hiding, locking, grouping, and ungrouping all happen through this single panel.
The panel becomes essential the moment your project grows beyond a single hero section. A 20-layer landing page is navigable visually, but a 200-layer marketing site requires the panel to find anything quickly. Treat the layers panel as the source of truth for what exists on the page, with the canvas as the visual rendering of that truth.
Hierarchy and Nesting
Framer layers nest inside each other to form a tree. A Section contains a Container which contains a Heading and a Paragraph. Each level inherits position and constraint behavior from its parent, so the tree determines layout as much as it determines z-order.
Stacks are a special kind of container that auto-arranges children horizontally or vertically with consistent gaps. Frames are similar but without auto-arrangement, giving you absolute positioning inside the parent. Most modern Framer projects rely heavily on stacks because the auto-arrangement keeps layouts responsive without manual position fiddling.
For a deeper dive on stacks, see our framer stacks layout guide.
Naming Layers
Default layer names like Frame 12 or Text 3 become useless once a project grows. Rename every important layer to describe its purpose. Hero Section, Primary CTA Button, Feature Card 1, Footer Container. Good names make the panel scannable and help collaborators find what they need without clicking through twenty unnamed frames.
Adopt a naming convention early. Use Title Case for sections, sentence case for descriptive labels, and avoid abbreviations that lose meaning later. Treat layer names like variable names in code: they communicate intent to future readers, including future you.
Selecting Layers
Click a layer in the panel to select it. Shift-click to select multiple. Command-click to add or remove from selection. The selected layers highlight on the canvas with handles for resizing and positioning.
When layers overlap heavily, clicking on the canvas can hit the wrong layer. The layers panel becomes the reliable way to select what you want. This is particularly true for layers buried under overlays, modals, or transparent containers.
Reordering and Stacking
Drag layers in the panel to reorder them within their parent. The visual order in the panel matches the z-order on the canvas: layers higher in the panel render in front of layers lower in the panel. To bring a layer to front, drag it to the top of its parent. To send to back, drag to the bottom.
Reordering between parents works by dragging across containers. Drop a Text layer into a different Stack and it becomes a child of that stack, inheriting its arrangement. This is how you refactor layouts without rebuilding from scratch.
Grouping and Ungrouping
Select multiple layers and group them with Command-G. Framer wraps them in a Frame and the new container appears in the panel. Ungroup with Shift-Command-G to flatten back. Groups are useful for moving multiple layers together, applying shared effects, or building components.
Group sparingly. A panel full of nested groups becomes hard to navigate. Use stacks instead of groups when you want auto-arrangement, and use frames for absolutely positioned children that need a shared container.
Hiding and Locking
Each layer has visibility and lock toggles in the panel. Hide a layer to remove it from the canvas without deleting it, useful for variant states or temporary designs you want to keep around. Lock a layer to prevent accidental selection or editing while you work on other elements nearby.
Locking is particularly useful for background images and fixed navigation that you do not want to drag while editing content above them. Toggle lock with a single click in the panel.
Components in the Panel
Component instances appear in the layers panel with a distinct icon. Clicking the instance shows its position in the parent layout but does not expose the internal structure. To edit the internals, double-click the instance or open the master component from the assets panel.
For more on components, see our framer components guide.
Layers and Breakpoints
The layers panel structure is shared across breakpoints, but each breakpoint can hide or show layers independently. A complex desktop hero might collapse to a simpler mobile version by hiding several decorative layers at the mobile breakpoint, without removing them from the project entirely.
Pair this with our framer breakpoints guide for the full responsive picture.
Finding Layers Quickly
For large projects, scrolling the panel becomes inefficient. Use the search field at the top of the panel to filter by name. Searching for Button shows every layer with Button in its name. This is where good naming conventions pay off the most: searchable names mean you can find anything in seconds.
You can also navigate by clicking elements on the canvas and using the breadcrumb that appears at the bottom of the editor. The breadcrumb shows the path from the selected layer up to the root, useful for understanding deep nesting.
Layer Outlining and Inspection
Hover a layer in the panel to highlight it on the canvas with a colored outline, without selecting. This is useful when you want to identify something visually without changing your current selection. The same hover works in reverse: hover an element on canvas to highlight the matching layer in the panel.
Keyboard Shortcuts Worth Memorizing
Power users move through the layers panel almost entirely by keyboard. Memorizing a few shortcuts saves hours per week on real projects.
- Arrow keys walk up and down the panel without losing the current selection scope, including expanding and collapsing nested containers.
- Tab selects the next sibling within the same parent, useful for stepping through cards or list items.
- Command-G groups the current selection into a frame, and Shift-Command-G ungroups it back.
- Command-D duplicates the selected layer in place, immediately ready for repositioning.
- Shift-Command-H toggles visibility, faster than reaching for the eye icon every time you preview a variant.
- Command-/ locks or unlocks the selected layer.
- Enter renames the selected layer in place. Combined with Tab to move to the next sibling, this lets you rename a whole stack of layers without using the mouse.
Refactoring Tactics for Large Projects
Once a project has a few hundred layers, the layers panel becomes a refactoring surface as much as a navigation tool. A few tactics keep large projects maintainable.
- Extract repeating layer groups into components. If you see the same three-layer pattern repeated across the panel, select an instance, convert it to a component, and replace the duplicates. The panel becomes smaller and edits propagate.
- Flatten redundant containers. A Frame inside a Frame inside a Stack with no styling on the outer two adds nesting without value. Drag the inner children up and delete the empty wrappers.
- Use sections with collapsible headings. Top-level layers can collapse, hiding nested children until you need them. Name your top-level layers Hero, Features, Testimonials, FAQ so the panel reads like an outline of the page.
- Audit at every milestone. Before publishing a major version, scroll the entire panel and rename anything still called Frame 14 or Text 7. A clean panel makes the next round of edits twice as fast.
Performance and Layer Count
Framer handles thousands of layers per project without performance issues, but extremely deep nesting and large layer counts on a single page slow down editor responsiveness. If you notice lag, audit for unnecessary nesting, consolidate redundant containers, and consider breaking large pages into sections or templates.
For published performance, layer count has minimal impact because the browser receives compiled HTML and CSS rather than the live tree. See our website speed optimization guide for runtime performance tips.
Collaboration in the Panel
When multiple designers work on the same Framer project, the layers panel becomes shared territory. A few conventions keep collaboration smooth.
- Agree on naming up front. The team should align on whether section headings use Title Case or sentence case, and whether components are prefixed (Card / Button) or suffixed (HeroCard, PrimaryButton).
- Comment on layers, not just on pages. Framer comments can attach to specific layers in the panel, which keeps feedback precise instead of vague.
- Lock shared chrome. Locking the navigation, footer, and sticky elements prevents accidental edits while multiple people work on the same page.
- Review the panel during design QA. A clean, well-named panel is a sign of a designer who respects future maintenance. Make this part of your team’s design review checklist.
The Layers Panel as a Debugging Tool
When a layout misbehaves, the layers panel is usually the fastest path to the cause. Most layout bugs in Framer come from one of three things: a stack with the wrong axis, an absolutely positioned frame inside a stack, or an inherited constraint that pulls a child off its expected position. Each is visible in the panel if you know what to look for. Hovering layers in the panel highlights them on canvas, which makes orphaned or misplaced layers obvious. Toggling visibility on suspicious containers isolates the problem one branch at a time. When all else fails, dragging a misbehaving layer to the page root resets its inheritance and reveals whether the parent or the layer itself is the source of the issue. Treat the layers panel like a browser DevTools inspector for Framer: most problems become visible the moment you read the tree from the outside in.
Common Mistakes to Avoid
Leaving default names everywhere is the most common mistake. A project full of Frame 1 through Frame 47 becomes unmaintainable. Spend 30 seconds renaming each significant layer as you create it.
Over-nesting is another. Every additional container adds visual noise to the panel and indirect layout coupling that complicates edits. Aim for the shallowest tree that achieves the layout.
Ignoring stacks in favor of absolute positioning leads to brittle designs that break on different breakpoints. Use stacks whenever children should arrange in a predictable row or column with consistent spacing.
Frequently Asked Questions
How do I find a specific layer fast?
Use the search field at the top of the layers panel. Search by name. This is where descriptive naming conventions pay off. You can also click an element on canvas to jump to it in the panel.
Can I have hidden layers that do not render?
Yes. Click the visibility icon next to any layer to hide it. Hidden layers do not render at publish time and do not contribute to layout. They remain in the project for future use.
How deep can layer nesting go?
Framer does not enforce a hard depth limit. Real projects work fine with 10 to 12 levels of nesting, though anything beyond that becomes hard to navigate and reason about.
Do components show their internal structure in the panel?
No. Component instances appear as a single layer with a component icon. To see internal structure, double-click the instance to enter editing mode or open the master from the assets panel.
Can I select layers across multiple pages?
The layers panel shows one page at a time. Select layers within that page only. To make project-wide changes, use components or shared styles that propagate across pages.