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.
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.
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.
To see more ways of modifying a layer, right click on its name.