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.

Use the Layers panel to select a layer

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.

Layer Indicators

Many layers can have additional behavior set elsewhere on the canvas. For instance, a Layer can:

1. have an Interaction
2. be set as the Home frame, making it the first screen in the Preview or prototype view
3. contain a Comment
4. be locked, causing the layer not to be selectable on the canvas
5. be currently visible in the Preview

Five different icons on a Layer: Interaction, Home, Comment, Lock and Preview

To be able to quickly discover which element has an interaction, or which element is locked, each of these states is indicated by an icon next to the layer in the Layers panel.

Layer indicators within the Layers panel

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.

Dragging to reorganize layers

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.

Note: Changing a layer's parent will not change the layer's position on the canvas.

Renaming

To rename a layer, double click on its name in the Layers panel. You can also right-click the layer's name and select Rename.

Tip: When naming a Design Component, add a / to its name to assign it to a folder in the Insert menu.

Renaming a layer

More options

To see more ways of modifying a layer, right-click on its name.

The full right-click menu of a layer in the Layers panel