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.
Many layers can have additional behavior set elsewhere on the canvas. For instance, a Layer can:
- have an Interaction
- be set as the Home frame, making it the first screen in the Preview or prototype view
- contain a Comment
- be locked, causing the layer not to be selectable on the canvas
- 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.
To select a layer in the Layers panel, click on its name.
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.
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
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