> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/building-a-template/layers.md).
# Layers
Everything on the canvas is a layer: a piece of text, an image, or a shape. Layers stack, and **the top of the Layers panel is the front-most layer** - the one drawn over everything else.
The left rail keeps your layouts pinned at the top, with two tabs underneath:
| Tab | What it shows |
| ------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Layers** | Every layer in the template, front to back. Each one expands to the variables bound to it |
| **Variables** | Every variable in the template, whichever layer it belongs to. See [Variables](/studio/template-builder/variables.md) |
### Adding a layer
Use the toolbar under the canvas.
| Tool | How it works |
| ------ | ---------------------------------------------------------------------------------------- |
| Text | Drag a box on the canvas. The text editor opens straight away so you can type |
| Image | Opens the asset picker. Choose an image from your library and it is placed on the canvas |
| Shape | Choose **Line**, **Oval** or **Polygon**, then drag on the canvas |
| Select | The default pointer, for selecting and moving what is already there |
A new layer is added to every layout at the same position and size, in pixels - it is not scaled to each canvas the way layers are when you create a layout. Add a layer while working on a 1080 x 1080 canvas and it can sit outside the visible area of an 800 x 400 one, so check your other layouts and reposition it there.
### Selecting and arranging
* Click a layer on the canvas, or its row in the **Layers** panel.
* Press Esc to deselect.
* Drag a row up or down in the panel to restack. Dragging a row to the top brings that layer to the front.
* Use the collapse control at the top of the panel to fold or unfold every layer's variables at once.
### Moving, resizing and rotating
| Action | How |
| -------------- | -------------------------------------------------------------------------------------- |
| Move | Drag the layer, or use the arrow keys |
| Resize | Drag one of the four corner handles |
| Rotate | Drag the handle above the selection. Hold Shift to snap to 15 degrees |
| Precise values | Type into **X**, **Y**, **Width**, **Height** and **Rotation** in the properties panel |
### Common properties
Select a layer and the properties panel on the right shows its **Name**, then a **Transform** section shared by every layer type. Text, image and shape layers add their own sections above it.
Naming layers pays off as soon as a template has more than a handful, and a **Name** belongs to the layer itself: rename it once and it is renamed in every layout.
| Property | What it does |
| --------------------- | ----------------------------------------------------------- |
| **X**, **Y** | Position of the layer's top-left corner, in pixels |
| **Width**, **Height** | Size in pixels. The lock between them keeps the proportions |
| **Opacity** | 0 to 100 percent |
| **Rotation** | Angle in degrees, with buttons for a quick -90 and +90 |
Everything under **Transform** belongs to the layout you are working in. Switch layouts and you are editing a different set of numbers for the same layer.
### Layer actions
Hover a row in the **Layers** panel and open its menu:
| Action | What happens |
| ------------------- | ----------------------------------------------------------------------------------------------- |
| **Rename** | Edit the name in place. Enter keeps it, Esc abandons it |
| **Duplicate** | Copies the layer, offset slightly, in every layout |
| **Add variable** | Turns part of the layer into a variable. See [Variables](/studio/template-builder/variables.md) |
| **Hide** / **Show** | Hides the layer from the canvas and from the rendered image |
| **Delete** | Removes the layer from every layout, after a confirmation |
### Keyboard shortcuts
| Shortcut | Action |
| --------------------------------- | ------------------------------------------------------------ |
| Arrow keys | Nudge the selected layer by 1 px |
| Shift + arrow keys | Nudge by 10 px |
| `[` / `]` | Rotate 15 degrees counterclockwise or clockwise |
| Shift + `[` / `]` | Rotate 1 degree |
| Delete or Backspace | Delete the selection |
| Ctrl/Cmd + Z | Undo |
| Ctrl/Cmd + Shift + Z, or Ctrl + Y | Redo |
| Ctrl/Cmd + C, Ctrl/Cmd + V | Copy and paste a layer |
| Ctrl/Cmd + D | Duplicate a layer |
| Esc | Deselect |
| Ctrl/Cmd + scroll | Zoom towards the pointer |
| Ctrl/Cmd + plus, Ctrl/Cmd + minus | Zoom in and out |
| Ctrl/Cmd + 0 | Fit the canvas to the window |
| Space + drag | Pan the canvas |
| Scroll, or swipe on a trackpad | Pan the canvas, once you have zoomed in past the fitted view |
Shortcuts are ignored while you are typing in a field or in the text editor.
### Zoom and pan
The zoom control sits in the header, between the canvas dimensions and the undo buttons. Use the minus and plus buttons for fixed steps, or open the percentage to choose **Fit size**, **Actual size (100%)** or a preset level. Zooming and panning never change the design.
### Where to go next
* [Text layers](/studio/template-builder/building-a-template/text-layers.md)
* [Image layers](/studio/template-builder/building-a-template/image-layers.md)
* [Shape layers](/studio/template-builder/building-a-template/shape-layers.md)
