Figma Layers and Groups

Every object you place on the canvas becomes a layer. Managing layers well keeps your design organized, editable, and easy for teammates to understand. Groups and frames let you bundle layers together so you can move and manage them as one unit.

How Layers Work

Think of layers like transparent sheets of paper stacked on top of each other. Each sheet holds one object. The order of the stack determines what appears in front of what on the canvas.

Layer Stack Diagram

  LAYERS PANEL (top = front)     CANVAS VIEW
  +------------------------+
  | T  "Buy Now" text      | --- appears on top of button
  | [] Blue Button shape   | --- appears above background
  | [] White Background    | --- appears at the very back
  +------------------------+

  T = text layer    [] = shape layer

The Layers Panel

Open the Layers Panel by clicking the grid icon at the top of the left sidebar, or press Ctrl + Alt + 2 (Cmd + Option + 2 on Mac).

Each layer shows:

• A small icon indicating its type (frame, group, rectangle, text, image, etc.)
• The layer name
• A visibility eye icon (click to hide/show)
• A lock icon (click to prevent accidental editing)

Layer Icons Reference

  Icon    Type
  ------  --------
  #       Frame
  []      Rectangle / Shape
  O       Ellipse
  /       Line
  T       Text
  [img]   Image
  { }     Group
  *       Component
  ◈       Component Instance

Renaming Layers

By default, Figma names layers "Rectangle 1", "Ellipse 2", etc. These generic names make large files hard to navigate. Rename every layer with a meaningful name.

Double-click a layer name in the Layers Panel to rename it. Press Enter to confirm.

Before and After Renaming

  BEFORE (hard to read)      AFTER (easy to read)
  +--------------------+     +--------------------+
  | Frame 12           |     | Home Screen        |
  |   Rectangle 5      |     |   Header Bar       |
  |   Rectangle 6      |     |   Product Card     |
  |   Text 3           |     |   Product Title    |
  |   Ellipse 2        |     |   Profile Avatar   |
  +--------------------+     +--------------------+

Reordering Layers

Drag any layer up or down in the Layers Panel to change its stacking order on the canvas. You can also use keyboard shortcuts with an object selected:

• Bring to Front – Ctrl + ] (Mac: Cmd + ])
• Send to Back – Ctrl + [ (Mac: Cmd + [)
• Move Forward One – ] key alone
• Move Backward One – [ key alone

Hiding and Locking Layers

• Hide a layer – Click the eye icon next to the layer name, or select the layer and press Ctrl + Shift + H. Hidden layers do not appear on the canvas but remain in the file.
• Lock a layer – Click the lock icon next to the layer, or press Ctrl + Shift + L. Locked layers cannot be selected or moved on the canvas.

Lock the background frame or a grid layer so you do not accidentally move it while working on elements in front.

Grouping Layers

A group bundles multiple layers together. Moving the group moves all layers inside it at once. Groups do not create a fixed boundary — they resize to fit whatever is inside them.

How to Create a Group

1. Hold Shift and click each layer you want to group, or drag a selection box around them on the canvas.
2. Press Ctrl + G (Cmd + G on Mac).
3. A new group layer appears in the Layers Panel containing all selected layers.

Group vs. Frame Diagram

  GROUP                          FRAME
  +---...(shrinks to content)    +---------(fixed size)---+
  |  [Icon]  [Label Text]  |    |  [Icon]  [Label Text]  |
  +---...(no clipping)           +---(clips content)------+

  Resize: fits children          Resize: independent of children
  Background: none               Background: has fill color

Ungrouping

Select a group and press Ctrl + Shift + G (Cmd + Shift + G) to ungroup it. All layers return to their previous level in the Layers Panel.

Entering a Group or Frame

To select a specific layer inside a group or frame, double-click the group on the canvas. Keep double-clicking to go deeper into nested groups. Press Escape to move back up one level.

Selecting Multiple Layers

Three methods to select multiple layers:

• Drag selection – Click and drag on empty canvas space to draw a selection box. Every object inside the box gets selected.
• Shift-click – Hold Shift and click each object individually to add it to the selection.
• Ctrl/Cmd + A – Selects all layers in the current frame or page.

Layer Search

In large files with hundreds of layers, use the search bar at the top of the Layers Panel. Click the magnifier icon and type any layer name to filter the list instantly.

Organizing with Sections

Figma has a Section tool (press Shift + S) for organizing groups of frames on the canvas. A section creates a labeled region around frames, like a sticky note label in the background. It does not affect your design — it just helps you and your team navigate large files.

Section Diagram — App Design File

  +--- SECTION: Onboarding --------+  +--- SECTION: Home ------+
  |  [Splash]  [Sign Up]  [Login]  |  |  [Feed]  [Profile]     |
  +--------------------------------+  +------------------------+

Layer Naming Best Practices