# Layers > Learn how to work with different types of layers in Lunacy A **layer** is any element you see on the canvas. There are several types of layers in Lunacy: * Frames * Text layers * Vectors * Shapes * Images * Components and component instances * Icons * Hotspots * Slices * [Sections](#sections) Follow the links above to learn how to work with specific layers in detail. In this section, we’ll go over the basics: how to create, edit, and organize layers on the canvas and the Layer list. ## Adding layers **Add layers** to the canvas using the corresponding tools on the toolbar:

For most of the tools (except for the Select, Hand, Eyedropper, and Comment tools), all you need to do is: 1. Enable them (use shortcuts for a faster workflow). 2. **Click** or **click and drag** on the canvas to add the respective layer.

Note the different icons these layers have before their titles in the Layer list. **See also:**
Tools<.mda> ### [Layer properties](#layer-properties) The properties displayed in the right panel when a layer is selected depend on the type of layer. The ones listed below are universal for almost all layer types: | Right panel properties | Description | |---------------------------------------------------|-------------------------------------------------------| |

| **Alignment and distribution controls** appear when you select two or more layers. | |

| **Layer size and position.** Change the size of your layers and their position on the canvas. Use the buttons next to the position controls to flip your images and toggle the lock button on and off to preserve aspect ratio when resizing. Controls vary depending on the selected layer. | |

| **Rotation and corner radius.** Rotate your layers and change their corner radius properties. Use the two buttons on the right to adjust the radius of individual corners and to enable smooth corner radius like in iOS interfaces. | |

| **Component options.** Use this section to manage components. Create new component states, switch between them, and detach instances from main components. | |

| The **Style** section displays the styles applied to your layer (text styles, color styles, effect styles, etc.) You can add styles from UI kits, create your own, and detach layers from applied styles. | |

| **Opacity and blend mode settings.** Set the overall opacity of a layer and its blending mode. | |

| **Fills.** Change the color of your layer. | |

| **Borders.** Add borders to your layers. | |

| **Effects.** Add effects (shadows, blurs) to your layers. | |

| **Prototyping.** Activate prototyping options and turn your static designs into interactive prototypes. Here's how it works. | |

| **Selection properties.** Shows the colors and fonts used in selected layers. | ### Locking and hiding layers **Lock layers** to protect them from accidental edits using the `Ctrl + Shift + L` / `⌘ + Shift + L` shortcuts. To **hide a layer** from the canvas, press `Ctrl + Shift + H` / `⌘ + Shift + H`.

## [Frames](#frames) **Frames** are special types of layers that work like containers for your designs. Using frames is optional, but they come in handy when you’re designing for a specific screen size or device, and they are a must for prototyping. This is how frames appear in the **Layer list**:

### Adding frames To **create a frame**: 1. Press `A` or select the **Frame tool** on the toolbar. 2. **Click and drag** to add a custom frame or **choose a preset** from the right panel. The list features presets for popular devices, screen resolutions, and social media templates.

Tip: When you're creating a frame on the canvas, blue + signs will appear around the borders, indicating pre-existing presets. Drag the corner of the frame you're creating to a + to snap it to a preset (the name of the preset will appear in the Layer list). To hide the + signs, hold down Ctrl / ⌘.

You can place layers inside frames by: - Selecting one or several layers and pressing `Ctrl + Alt + G` / `⌘ + ⌥ + G`. - Drawing a frame over them. To **remove a frame**, use the ungroup shortcut: `Ctrl + Shift + G` / `⌘ + Shift + G`. Check out the full list of handy Lunacy shortcuts. #### Custom presets You can also a **add custom presets** to this list: 1. Select the custom frame. 2. Click the **Create Frame Preset** button in the Preset size and orientation section. 3. Name the preset and press `Enter`.

From now on, the custom frame preset will appear at the bottom of the preset list in the right panel. ### Frame properties Right panel properties for frames are more or less identical to [layer properties](#layer-properties), except frames don’t have Style and Prototyping options. They also have these additional properties: | Right panel properties | Description | |--------------------------------------------------------------------|--------------------------------------------------------------------| |

| **Frame preset, size, and position.** The same options as for layers. You can also change your frame size preset. | |

| **Clip content.** Select this checkbox to hide content outside of the frame boundaries. | |

| **Auto layout.** A set of parameters for configuring auto layouts. | |

| **Background color.** Change the frame color. | |

| **Layout grid.** Add a layout grid to the frame.| |

| **Grid.** Add a square grid to the frame. | ## [Working with layers](#working-with-layers) This section covers basic operations with layers, including [selecting](#selecting-layers), [grouping](#grouping-layers), [duplicating](#duplicating-layers), [arranging](#arranging-layers), [moving](#moving-layers), and [resizing](#resizing-layers) layers. ### [Selecting layers](#selecting-layers) You can **select layers** in the **Layer list** or directly on the canvas. To **select a layer on the canvas**, click on it when the **Select tool** (`V`) is active. Hold `Shift` to select several layers. You can also drag to create a selection around one or several layers. Clicking on a [group of layers](#grouping-layers) selects the entire group. To select individual layers inside it, hold down `Ctrl` / `⌘` as you click, or first click to select the group, then double click to select the layer. Read more about [groups](#grouping-layers) below. To **select all layers** on the canvas (except for locked layers), press `Ctrl + A` / `⌘ + A`. To **select a layer in the Layer list**, find it in the list and click on it. Hold down `Shift` or `Ctrl` / `⌘` to **select multiple layers**.

**See also:**
Select tool #### [Selection fonts and colors](#selection-fonts-and-colors) When you select two or more layers, the right panel displays all of the **fonts and colors** used in those layers in the right panel. This way, you can quickly switch fonts and colors for several layers at a time.

Click the target icon (

) next to a property to select just the layers using this color/font. ### [Grouping layers](#grouping-layers) You can combine multiple layers together in a **group**. You can then modify the group and resize it along with the elements it contains. [Frames](#frames) are more versatile, but groups are also a great way to organize the **Layer list**, which can include hundreds of items or more in some projects. You can **nest groups** in other groups or inside frames in whatever way is most convenient to you. To **create a group**, select two or more layers and press `Ctrl + G` / `⌘ + G` or click the **Group** button (

) on the **context toolbar** at the top of the canvas.

To **select a layer inside** a group: - Hold down the `Ctrl` key and click the required layer. OR - Click to select the group, then double click to select the layer.

After you select a layer within a group, you can switch to other layers of that group simply by clicking them. If needed, you can also enable the **Select group's content on click** option in the right panel, so a click over a group automatically selects the layers inside it.

Alternatively, you can select layers inside groups through the **Layer list**, which may be more convenient in some cases (for example, when handling fully overlapping layers). You can **move layers into or out of a group** by dragging them in the Layer list. To **ungroup layers**, select the group and press `Ctrl + Shift + G` / `⌘ + Shift + G` or click the Ungroup (

) button on the **context toolbar**. ### [Duplicating layers](#duplicating-layers) To **duplicate a layer**: - Select it and press `Ctrl + D` / `⌘ + D`. OR - Hold down `Alt`, select the layer, and drag to where you want to place the copy. You can also use the standard `Ctrl` / `⌘` + `C` / `V` shortcuts, but in this case, the layer copies will appear right on top of the original.

Tip: Lunacy remembers the offset of the latest duplicate. So, if you press Ctrl + D / ⌘ + D shortly after you create a duplicate of a layer, Lunacy adds new duplicates with the same offset as the previous one.

If copied layers include generated content, like avatars or generated texts, duplicates will appear with new content (provided the Auto refresh option is enabled). #### Repeat grid Another convenient way to duplicate elements is to use the **Repeat grid** feature. You select two or more layers, drag the

near the lower-right corner of the bounding box to duplicate the elements in a grid.

Combining **Repeat grid** with the Avatar tool and generated texts can save you a lot of time when designing UIs with placeholder elements.

#### Copy/Paste style You can quickly **copy and paste styling properties** (fills, borders, effects) between layers. To **copy the properties of a layer**: 1. Press `Ctrl + Alt + C` / `⌘ + ⌥ + C`. 2. Select another layer and press `Ctrl + Alt + V` / `⌘ + ⌥ + V`.

#### Copy/paste context menu options Various copy/paste options are also available on the context menu: | Menu option | Shortcut | Description | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Copy | `Ctrl + C` / `⌘ + C`| Copies the selected layer.| | Cut | `Ctrl + X` / `⌘ + X`| Cuts the selected layer and copies it to the clipboard. | | Paste | `Ctrl + V` / `⌘ + V`| Pastes the content of the clipboard onto the canvas. | | Paste here | - | Pastes the content of the clipboard onto the canvas, depending on where the cursor is. | | Paste over | - | Pastes the content of the clipboard over the selected layer. | | Copy as Text | - | Only available for text layers. Copies only the text content of the layer, excluding its properties. | | Copy as CSS/SVG/XAML/PNG | - | These options allow you to copy the code of the selected layer in the required format. | | Copy style/Paste style| `Ctrl + Alt + C` / `⌘ + ⌥ + C`

`Ctrl + Alt + V` / `⌘ + ⌥ + V` | These options allow you to copy the style of the selected layer and apply them to another layer. | | Export as PNG to cloud, Copy URL | `Alt + C` / `⌥ + C` | Exports the selection to the Icons8 cloud and copies the link to your clipboard. You can share the link to your design with other people. | ### [Arranging layers](#arranging-layers) #### Auto Z-index Lunacy automatically determines the order of layers (the Z-index) on the canvas depending on their size. For example, if you drag a smaller layer (that’s at the bottom of the layer list) over a larger one, Lunacy places the small layer on top.

You can **adjust layer order manually** in the **Layer list** and also use shortcuts or context menu commands: | Context menu command | Description | Windows/Linux shortcut | MacOS shortcut | | -------------------- | ---------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------| | Bring forward | Moves the selected layer one step forward.| `Ctrl + ]` | `⌘ + ]` | | Bring to front | Places the selected layer at the top of the stack, above all other elements. | `Ctrl + Shift + ]` | `⌘ + Shift + ]` | | Send backward | Moves the selected layer one step backward. | `Ctrl + [` | `⌘ + [` | | Send to back | Places the selected layer to the bottom of the stack. | `Ctrl + Shift + [` | `⌘ + Shift + [` | #### Aligning and distributing layers To quickly align and distribute layers on the canvas, use the Align and Distribute spacing controls in the top row of the right panel.

They become active when you select two or more layers on the canvas or when you select a single layer on a frame (in this case, Lunacy will align the layer relative to the borders of the frame).

| Icon | Description | Windows/Linux shortcut | MacOS shortcut | | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | --------------- | |

| **Distribute vertical spacing.** Distributes vertical spacing evenly between the selected layers. The layers at the top and on the bottom of the selection always preserve their original position, while the layers between them adjust their positions so that the spacing between all elements is equal. | `Ctrl + Shift + V` | `⌘ + Shift + V` | |

| **Distribute horizontal spacing.** Distributes horizontal spacing evenly between the selected layers. The layers at the right and left borders of the selection always preserve their original position, while the layers between them adjust their positions so that the spacing between all elements is equal. | `Ctrl + Shift + H` | `⌘ + Shift + H` | ##### Smart distribute Use **Smart distribute** to arrange multiple layers into grids with equal spacing between rows and columns. The **Tidy up** button becomes active when you select two or more layers on the canvas and either looks like three straight lines (

) or a grid (

) icon:

To use **Smart distribute**: 1. Select the required layers. 2. Click

3. Once the layers get organized, pink controls appear in the middle of the layers and between them. Click and drag them to rearrange the layers or adjust the spacing between them.

#### Creating hyperlinks between layers You can **create hyperlinks** from one layer to another in your document, even if the layers are on different pages. his can be useful, for example, for simplifying navigation in large documents. To do this: 1. Select the target layer and press `Ctrl + L` / `⌘ + L` (or select **Copy/Paste as → Copy link** on the context menu). 2. Select the layer that should lead to the target layer. 3. Press `F2` to rename the layer, paste the target layer link from your clipboard, and press `Enter`. 4. Hold down `Ctrl` / `⌘` and click the layer you renamed, and you’ll be redirected to the target layer.

### [Moving layers](#moving-layers) To **move a layer**, just click and drag it. If you want to **restrict layer movement to the X or Y axis**, hold down `Shift` while you’re moving the layer.

For precise positioning, use the arrow keys. Each keystroke moves a layer by one pixel. Holding down `Shift` increases each step to 10px.

You can also adjust a layer’s position on the canvas or frame using the **X and Y controls in the right panel**: - If a layer is on the canvas, the values in the X and Y fields show the absolute coordinates of its top-left selection handle. - If a layer is a part of a frame, X and Y display the coordinates of its top-left selection handle relative to the frame’s top-left corner.

Tip: Measuring distances between layers can also help with positioning them more accurately. Simply select a layer, press Alt / ⌥, and hover the cursor over another layer to measure the distance between them. Read about all measurement options in Lunacy in the Basics page.

**See also:**
Changing values in the right panel #### Rotating layers To **rotate a layer**, select it, then: - Hover the cursor somewhere any corner of the bounding box. The cursor will turn into a bent double-headed arrow, which you can drag left or right. OR - Change the value in the rotation angle field in the right panel and press `Enter`. To quickly return the layer into its initial position, type `0` in the angle rotation field of the right panel and press `Enter`. You can also hold down `Shift` when rotating the layer to rotate at 90° or 45° angles to quickly get it to its original orientation.

#### Flipping layers To flip a layer, use the **Flip horizontally** (

) and **Flip vertically** (

) buttons that appear on the context toolbar (also available in the **Layer** section on the menu bar). You can also use these shortcuts: - `Ctrl + →` and `Ctrl + ←` / `⌘ + →` and `⌘ + ←` — horizontal flip - `Ctrl + ↑` and `Ctrl + ↓` / `⌘ + ↑` and `⌘ + ↓` — vertical flip

Another way to flip a layer is to drag selection handles like in the demo below.

### [Resizing layers](#resizing-layers) There are several ways to resize a layer: - [Dragging its selection handles](#resizing-by-dragging-selection-handles) - [Using arrow keys](#resizing-using-arrow-keys) - [Changing right panel properties](#resizing-by-adjusting-right-panel-properties) - [With the Scale tool](#scaling-layers) #### [Resizing by dragging selection handles](#resizing-by-dragging-selection-handles) To **resize a layer**, drag any of its selection handles at the corners to adjust its height and width or drag the sides of the bounding box to resize a layer vertically or horizontally. Hold down `Shift` while dragging to preserve the layer’s aspect ratio. Also, you can hold down `Alt` / `⌥` while dragging to **resize the layer from the center**, rather than from the edge you are dragging. The `Alt + Shift + drag` / `⌥ + Shift + drag` shortcut resizes a layer from the center *and* preserves its aspect ratio.

When resizing a frame, its content adjusts to fit the new size. If you want to resize only the frame and keep its content intact, hold down `Ctrl`/`⌘` while resizing. #### [Resizing using arrow keys](#resizing-using-arrow-keys) Select the layer and use the shortcuts `Ctrl + arrow keys` / `⌘ + arrow keys` to resize by 1px or `Ctrl + Shift + arrow keys` / `⌘ + Shift + arrow keys` to resize by 10px.

#### [Resizing by adjusting right panel properties](#resizing-by-adjusting-right-panel-properties) Select a layer and change the values in the the **W (width)** and **H (height)** fields in the right panel to precisely define its size. Click the **Lock aspect ratio** button (

) to preserve the layer’s aspect ratio.

#### [Scaling layers](#scaling-layers) Use the **Scale tool** to resize a layer while preserving the aspect ratio and adjusting the size of any borders/effects applied to the layer. To **scale a layer**: 1. Select the layer. 2. Press `K` or select the **Scale tool** (

) on the toolbar. 3. Drag the bounding box to resize it.

When the **Scale tool** is selected, changing layer size values in the right panel will also scale the layer and all its effects proportionally. #### Resizing constraints With **resizing constraints**, you can determine the behavior of a layer when resizing a group, component, or frame containing the layer. This can be very useful when you need to design a user interface for different screen sizes or devices. You can adjust the individual resizing behavior for each layer in the **Constraints** section of the **right panel**: - The **Pin to edge** control, which pins the layer to one or several edges of the group/component/frame. So, when you resize the container, Lunacy won’t change the distance between the layer and the edges it is pinned to. - The **Fix width** and **Fix size** checkboxes restrict the change of the layer’s width or height so they don’t change as you resize the layer.

Note: Resizing constraints aren’t available for layers in an auto layout frame unless the layer has an absolute position.

**See also:**
Resizing auto layout elements ## Sections Sections are a special layer type that helps you keep related objects together and organize your canvas. They work like visual containers for grouping content. With sections, you can: - Give them custom names for better navigation - Set a fill color to distinguish different areas of your design - Move sections across the canvas along with all their contents - Nest sections inside one another to create a clear hierarchy

### Working with sections - To create a section, click

on the toolbar or press `Shift+S`. - To select a section, click its label at the top-left corner. - Once selected, you can move or resize the section. - All objects inside a section move along with it.