Layers Panel

The Layers panel, located on the Editor's left panel, contains a list of all of the Frames, Components, and other layers that exist on your canvas. You can use the Layers panel to select a layer, change its name, or change its place in the list.

How Layers Are Organized

Layers in Framer are organized in a tree structure. When describing the relationships between layers, we borrow words from a family tree.

Some layers (like Frame and Stack) can contain other layers. If a layer contains other layers, we call those layers its children. A layer can have any number of children and those layers can have children of their own.

If a layer is contained by another layer, we call that containing layer its parent. A layer can only have one parent. If a layer is directly on the canvas, it has no parent layer — instead, that layer's parent is the canvas itself.

Layers with the same parent are called siblings.

In the Layers Panel, a layer's children are shown indented beneath their parent. In the order of children, a child layer that is listed "above" its sibling layer will appear in front of that sibling on the canvas.

A layer with children will display an arrow next to its name. To hide or show a layer's children, click on the arrow.

Working with Layers

You can use the Layers panel to organize and edit the layers in your project.

Selecting

To select a layer in the Layers panel, click on its name.

Organizing

To change a selected layer's place in the Layers panel, click and drag it to its new place. A blue line will indicate where the layer will go.

To change a selected layer's parent, click and drag it onto the name of the new parent, or else drag it into the indented list of the parent's children.