To rearrange layers in Figma, the most common method is using the Layers panel. You can easily change the stacking order or hierarchy of elements in your design.
Methods for Rearranging Layers
Figma provides several intuitive ways to adjust the position of layers within your design file.
1. Using the Layers Panel (Click and Drag)
This is the primary and most visual method for reordering layers.
- Select the Layers: Find the layer(s) you want to move in the Layers panel (usually on the left side of your screen). You can select a single layer or multiple layers by holding
ShiftorCmd/Ctrl. - Click and Drag: Click and drag the layers(s) to another location within the selection in the Layers panel.
- Identify Placement: As you drag, a blue indicator shows you where you can move the layer to. A solid blue line indicates placing the layer between two existing layers, while a blue box around a frame or group indicates placing the layer inside that container.
- Confirm Position: Release [the mouse button] to confirm the new position of the layers.
This method allows you to place layers exactly where you need them in the stacking order, whether inside a frame, group, or at the root level of your canvas.
2. Using Keyboard Shortcuts
For faster adjustments, particularly for moving layers up or down the stack relative to others, keyboard shortcuts are invaluable.
- Bring Forward: Moves the selected layer(s) one step higher in the layer stack.
- macOS:
Cmd + ] - Windows:
Ctrl + ]
- macOS:
- Send Backward: Moves the selected layer(s) one step lower in the layer stack.
- macOS:
Cmd + [ - Windows:
Ctrl + [
- macOS:
- Bring to Front: Moves the selected layer(s) to the very top of the layer stack within their current container (frame, group, or page).
- macOS:
Cmd + Option + ] - Windows:
Ctrl + Shift + ]
- macOS:
- Send to Back: Moves the selected layer(s) to the very bottom of the layer stack within their current container.
- macOS:
Cmd + Option + [ - Windows:
Ctrl + Shift + [
- macOS:
These shortcuts are efficient for quickly adjusting the visual hierarchy without needing to click and drag precisely in the Layers panel.
3. Using the Context Menu
You can also access layer arrangement options by right-clicking on a layer, either on the canvas or within the Layers panel.
- Right-Click: Right-click on the layer you want to rearrange.
- Hover over 'Arrange': In the context menu that appears, hover your mouse over the 'Arrange' option.
- Select Action: Choose one of the arrangement options:
- Bring to Front
- Bring Forward
- Send Backward
- Send to Back
This method is useful when you're already interacting with an object on the canvas and want to change its position quickly.
Summary of Rearranging Methods
| Method | How it Works | Best For |
|---|---|---|
| Layers Panel | Click and drag layers in the list. A blue indicator shows placement. Release to confirm. | Precise placement within hierarchy, reordering multiple layers to specific spots. |
| Keyboard Shortcuts | Use Cmd/Ctrl + ]/[ (Forward/Backward) or Cmd/Ctrl + Option/Shift + ]/[ (To Front/Back). |
Quickly moving layers one step or to the extremes of the stack. |
| Context Menu | Right-click layer > Arrange > Select action. | Accessing arrangement options directly from the canvas or panel context. |
Tips for Managing Layers
- Name Your Layers: Give layers meaningful names (e.g., "Header Text," "Background Image," "Primary Button") to make them easy to identify and rearrange in the Layers panel.
- Group Related Layers: Use
Cmd/Ctrl + Gto group layers that belong together (like elements of a button or a card). This keeps your Layers panel organized and allows you to move entire groups easily. - Use Frames: Frames (
F) act as containers and are essential for organizing sections of your design (like screens or components). Arranging layers within frames helps maintain structure.
By utilizing these methods, you can efficiently manage and rearrange layers in your Figma designs to control their visibility and hierarchy.
