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:
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.
Add layers to the canvas using the corresponding tools on the toolbar:
- Enable them (use shortcuts for a faster workflow).
- 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.
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 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:
To create a frame:
Aor select the Frame tool on the toolbar.
- 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
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.
You can also a add custom presets to this list:
- Select the custom frame.
- Click the Create Frame Preset button in the Preset size and orientation section.
- Name the preset and press
From now on, the custom frame preset will appear at the bottom of the preset list in the right panel.
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 and content behavior. Change the frame background and choose whether its content changes as you resize it.|
|Layout grid. Add a layout grid to the frame.|
|Grid. Add a square grid to the frame.|
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
⌘ 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.
⌘ to select multiple layers.
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.
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
Ctrlkey and click the required layer.
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.
To duplicate a layer:
Select it and press
Ctrl + D/
⌘ + D.
Alt, select the layer, and drag to where you want to place the copy.
You can also use the standard
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.
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.
You can quickly copy and paste styling properties (fills, borders, effects) between layers.
To copy the properties of a layer:
Ctrl + Alt + C/
⌘ + ⌥ + C.
- 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:
||Copies the selected layer.|
||Cuts the selected layer and copies it to the clipboard.|
||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||
||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||
||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.|
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.||
|Bring to front||Places the selected layer at the top of the stack, above all other elements.||
|Send backward||Moves the selected layer one step backward.||
|Send to back||Places the selected layer to the bottom of the stack.||
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.||
|Align horizontally. Horizontally centers the selected layers.||
|Align right. Aligns the selected layers to the right of the selection.||
|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.||
|Align top. Aligns the selected layers to the top of the selection.||
|Align vertically. Vertically centers the selected layers.||
|Align bottom. Aligns the selected layers to the bottom of the selection.||
|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.||
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:
- Select the required layers.
- Click /
- 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:
- Select the target layer and press
Ctrl + L/
⌘ + L(or select Copy/Paste as → Copy link on the context menu).
- Select the layer that should lead to the target layer.
F2to rename the layer, paste the target layer link from your clipboard, and press
- Hold down
⌘and click the layer you renamed, and you’ll be redirected to the target layer.
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
⌥, and hover the cursor over another layer to measure the distance between them. Read about all measurement options in Lunacy in the Basics page.
Changing values in the right panel
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.
Change the value in the rotation angle field in the right panel and press
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.
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.
There are several ways to resize a layer:
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.
Shift while dragging to preserve the layer’s aspect ratio. Also, you can hold down
⌥ while dragging to resize the layer from the center, rather than from the edge you are dragging.
Alt + Shift + drag /
⌥ + Shift + drag shortcut resizes a layer from the center and preserves its aspect ratio.
When resizing a frame, if you want the layers on it to adjust to the size of the frame:
- Select the frame through the Layer list or by clicking its name on the canvas.
- In the right panel, select the Adjust content on resize checkbox.
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.
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.
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:
- Select the layer.
Kor select the Scale tool () on the toolbar.
- 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.
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.
Resizing auto layout elements