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

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

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 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.

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, 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

This section covers basic operations with layers, including selecting, grouping, duplicating, arranging, moving, and resizing 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 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 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

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

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 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

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.

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

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
	Align left. Aligns the selected layers to the left of the selection.	Ctrl + Shift + ←	⌘ + Shift + ←
	Align horizontally. Horizontally centers the selected layers.	Ctrl + Shift + -	⌘ + Shift + -
	Align right. Aligns the selected layers to the right of the selection.	Ctrl + Shift + →	⌘ + Shift + →
	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
	Align top. Aligns the selected layers to the top of the selection.	Ctrl + Shift + ↑	⌘ + Shift + ↑
	Align vertically. Vertically centers the selected layers.	Ctrl + Shift + |	⌘ + Shift + |
	Align bottom. Aligns the selected layers to the bottom of the selection.	Ctrl + Shift + ↓	⌘ + Shift + ↓
	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

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.

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

There are several ways to resize a layer:

• Dragging its selection handles
• Using arrow keys
• Changing right panel properties
• With the Scale tool

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

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

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

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.

See also:
Resizing auto layout elements