Figma Layers and Groups

Every object you place on the canvas becomes a layer. Managing layers well keeps your files clean, searchable, and easy for both you and your teammates to navigate.

What Is a Layer?

A layer is a single object — a shape, a text block, an image, or a group of objects — listed in the layers panel on the left. Layers stack on top of each other. The layer at the top of the list appears in front on the canvas.

Layers Panel            What You See on Canvas
-------------------------   --------------------------
▼ Frame: Product Card       +------------------------+
    Text: "Buy Now"         |  [Image]               |
    Button Rectangle        |  [Title text]          |
    Product Image           |  [Price text]          |
    Background              |  [ Buy Now ]           |
                            +------------------------+

Selecting Layers

Click any object on the canvas to select it. Click its name in the layers panel to select it too. To select multiple layers, hold Shift and click each one, or drag a selection box across several objects on the canvas.

When objects overlap, clicking on the canvas might select the wrong layer. Right-click on the overlapping area to see a list of all layers at that point. Pick the one you want from the list.

Reordering Layers

Drag a layer up or down in the layers panel to change its stacking order. Moving a layer up brings it visually in front of layers below it.

Keyboard shortcuts for reordering:

• Ctrl/Cmd + ] – Bring forward one step.
• Ctrl/Cmd + [ – Send backward one step.
• Ctrl/Cmd + Shift + ] – Bring to the very front.
• Ctrl/Cmd + Shift + [ – Send to the very back.

Renaming Layers

Double-click a layer name in the layers panel to rename it. Use clear, descriptive names so you can find any layer quickly. Avoid default names like "Rectangle 4" or "Group 12."

Good Layer Naming Examples

Bad names          Good names
-----------        ----------------------
Rectangle 4    →   card-background
Group 12       →   nav-bar
Text 3         →   price-label
Ellipse 1      →   user-avatar

Hiding and Locking Layers

Hover over a layer in the layers panel to reveal two icons on the right:

• Eye icon – Click to hide the layer. Hidden layers do not export or show in prototypes.
• Lock icon – Click to lock the layer. Locked layers cannot be moved or edited by accident, but you can still select them to view their properties.

Groups

A group combines multiple layers into one container. Moving or resizing the group moves or resizes everything inside it together.

Creating a Group

Select two or more layers, then press Ctrl/Cmd + G. The selected layers collapse into a group in the layers panel. Double-click the group on the canvas to enter it and select individual layers inside.

Before grouping:
  Text: "Buy Now"
  Rectangle: Button

After grouping (Ctrl + G):
  ▼ Group: button-buy-now
      Text: "Buy Now"
      Rectangle: Button

Difference Between Group and Frame

Groups and frames look similar in the layers panel but behave differently.

Feature              Group              Frame
-----------------    ---------------    -----------------
Clips content?       No                 Yes (optional)
Has background?      No                 Yes (fill + color)
Auto Layout?         No                 Yes
Constraints?         No                 Yes
Used in prototypes?  Rarely             Yes

Prefer frames over groups for any design section that will be used in Auto Layout, prototyping, or component building. Use groups only for quick, temporary organization.

Collapsing and Expanding Layers

Click the arrow next to a frame or group in the layers panel to expand or collapse it. Press Alt/Option + click on the arrow to expand all nested layers at once. Press it again to collapse all.

Searching Layers

At the top of the layers panel, click the magnifying glass icon to open a search field. Type any layer name to filter the list. This is invaluable in files with hundreds of layers.

Layer Organization Best Practices

• Name every layer immediately after creating it.
• Group related layers (all parts of a card, all parts of a nav bar) right away.
• Use frames instead of groups for interactive or layout-driven content.
• Lock background layers to prevent accidental moves.
• Use consistent naming conventions across your whole team.

Selecting Parent and Child Layers

Press Esc to move the selection up to the parent (from a child layer inside a group or frame, to the group or frame itself). Press Enter to move the selection down into the first child. This keyboard navigation is faster than clicking in the layers panel once you get used to it.