An overview of Lunacy's basic features and capabilities
Learn more about Lunacy’s features, interface capabilities, and useful tips and tricks to speed up your design process.
Working with the canvas
If your design is taking up too much space on the canvas, use the mouse wheel to scroll vertically. To scroll horizontally, additionally hold down
Another way to navigate the canvas is to hold down
Space to activate the Hand tool and drag the canvas to wherever you need.
You can always use the scroll bars on the right and bottom of the workspace, but it’s not as convenient as the other options.
Zooming in and out
The easiest way to zoom in and out in Lunacy is by holding down
⌘ and moving the mouse wheel. To zoom slower, additionally hold down
When the zoom value exceeds 500, Lunacy displays a pixel grid. If you want to disable this feature:
- In the menu bar, select View > Pixel grid.
- Deselect all layers on the canvas and clear the Show pixel grid checkbox in the right panel.
Find out about other zooming options.
Changing the canvas color
- Deselect all layers.
- Use the Workspace color control in the right panel.
Press to reset the canvas to the default color.
You can also set the canvas color opacity to 0 so it becomes transparent. You’ll see a checkerboard pattern instead of a fill.
Right panel properties
There are three tabs at the top of the right panel: Design, Export, and Code.
The Design tab is the one you’ll interact with the most when working on your designs.
The set of controls and settings it displays depends on the type of the selected layer. These properties 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.|
|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.|
Click on the Export tab to open up export settings for your entire project or click individual/multiple layers to export just them. Read in detail about export settings.
You can also use the Linked Design option to include embed links to Lunacy layers directly into website code: when you update them in Lunacy, they’ll be automatically updated on your website. Learn more about linked design in this section.
The Code tab displays the code corresponding to your layers.
Right panel properties with no selected layers
When all layers are deselected, the right panel shows these settings:
- Workspace color. Change the color of the canvas.
- Show pixel grid. Toggles the pixel grid on/off when the zoom value exceeds 500.
- Nudge amount settings. Nudge layers by moving arrow keys and set custom values for small nudges (using just the arrow keys) and big ones (arrow keys +
- Color palette section. Use it to generate various base color palettes for your documents.
If you need more space, you can hide the right panel panel by selecting View > Right Panel on the menu bar.
Changing values in the right panel
To change values in the right panel input fields:
- Type a value manually.
- Click over a field and use the mouse wheel to gradually increase or decrease the value.
- Hover the cursor over a field, wait a moment until the cursor turns into a double-headed arrow, and drag the cursor up or down.
- Enter an arithmetic operation.
Frames are a 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.
Use the frame tool to add frames to the canvas. You can create a custom size frame or to select a preset from the list in the right panel. The list features presets for popular devices, screen resolutions, and social media templates.
Note: You can also a add your custom presets to this list.
To create a frame:
- Select the Frame tool on the toolbar or press
- Click and drag to add a custom frame or use a preset from the right panel.
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).
You can also enclose layers inside frames by drawing a frame over them.
This is how frames appear in the Layer list:
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 — and you can also change your frame size preset.|
|Clip content. Select this checkbox to hide content outside of the frame boundaries.|
|Auto layout. Align your design elements with auto layout. With them, your designs will adjust to content changes automatically. Set the distance between elements, between elements and frame boundaries, change distribution options, stacking options, and whether auto layout includes frame borders.|
|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.|
|Selection properties. Shows the colors and fonts used in the layers inside of the frame.|
Adding custom frame presets
To add a custom frame to the list of presets:
- 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.
Rulers and guides
Rulers and guides help to position and align layers.
Rulers are enabled by default and use pixels as a measurement unit. They appear at the top and on the left side of the canvas.
To toggle rulers on and off, use the
Ctrl + R /
⌘ + R shortcut or select View > Rulers on the menu bar.
To create a guide, click anywhere on a ruler and drag the guide onto the canvas. You can now position layers along the guide. Moving a layer close to it snaps the layer to the guide.
To move a guide, drag it to another position or select it and use arrow keys to nudge it. To remove a guide, click it (hold down
Shift to select multiple guides) and press
You can also open up all of these guide settings by right-clicking over a ruler:
Lunacy has square and layout grids. If needed, you can display both of them at the same time.
If there are no frames on the canvas, Lunacy displays a square grid. Toggle it on and off by clicking the Show/Hide grid button on the right panel or pressing
Ctrl + ' /
⌘ + '.
If you have frames on the canvas, use the same button to toggle grids on and off:
- For each frame. To do this, deselect all frames and layers on the canvas, then press Show/Hide grid.
- For an individual frame. Do the same with a frame or layer selected.
To set the size of grid cells, enter the desired value in the Grid size field.
Layout grids are useful for positioning design elements within your frame. If you have several frames on a page, you can toggle layout grids on and off for them just like with sqaure grids, using the corresponding button in the right panel.
Each frame can have its own layout grid settings:
Lunacy has a variety of options for measuring distances between elements. The measurement option depends on whether a layer is distinct, grouped with other layers, or nested in a frame.
To measure the distance between two layers:
- Select the first layer.
- Hold down
- Hover the cursor over the other layer.
To measure the distance from a layer within a frame to the frame’s boundaries:
- Hover the cursor over the layer and hold down
- Select the layer, hover the cursor over an empty area within the frame, and hold down
You can also use this function to position layers in a precise location or relative to one another:
- Select one of the layers.
- Point the cursor over an empty area or over another layer.
- Hold down
⌥and move the selected layer using the arrow keys.
Use the steps described above to measure the distances between:
- A grouped layer and layer.
- Two layers inside the same group.
- A grouped layer and the frame boundaries.
To measure the distance between a layer inside a group and the group’s boundaries:
- Point the cursor over a grouped layer.
- Hold down
Ctrl + Alt/
⌘ + ⌥.
To measure the distance between a layer inside a group and the borders of the frame where it’s nested:
- Select a grouped layer.
- Hold down
- Point the cursor anywhere outside the other grouped layers.
To measure the distance between two layers in different groups:
- Select a grouped layer.
- Hold down
Alt + Shift/
⌥ + Shift.
- Hover the cursor over a layer in the other group.
Here’s a handy shortcut list for all of the distance measurement options:
|Element types||Measurement option|
|Two separate layers||Select the first layer, hold down
|A layer inside a frame → the frame’s boundaries||1. Hover the cursor over the layer and hold down
2. Select the layer, hover the cursor over an empty area within the frame, and hold down
|A grouped layer → individual layer||Select the grouped layer, hold down
|Two layers inside the same group||Select the first layer in the group, hold down
|A grouped layer → frame boundaries||Select the first layer in the group, hold down
|A layer inside a group → the group’s boundaries||Point the cursor over a grouped layer and hold down
|A layer inside a group → the boundaries of the frame where it’s nested||Select a grouped layer, hold down
|Two layers in different groups||Select a grouped layer hold down
Use the Zoom tool and the Zoom control to explore more of Lunacy’s zooming options.
The Zoom tool enables you to zoom in to a selected layer or canvas area. To use the tool:
- Press and hold
- Click on a layer or drag over an area on the canvas (the smaller the area, the higher the zoom value).
- To zoom out, hold down
Z + Alt/
Z + ⌥and click or drag over the layer/area.
The zoom control is on the right of the document tabs. To change the zoom value, you can:
- Manually enter a zoom value.
- Hover the cursor over the zoom control field, wait a moment until the cursor turns into a double-headed arrow, and drag the cursor up or down.
- Click over the zoom control field and move the mouse wheel.
You can also alter zoom options using preset values:
Here are all the essential zoom options and corresponding shortcuts:
|Operation||Description||Windows shortcut||Mac shortcut|
|Zoom in/out||Zooms the canvas in/out.||
|Zoom to 100%||Sets the zoom value to 100%.||
|Zoom to All Layers||Shows all the layers on the page.||
|Zoom to Selection||Zooms in and displays the selected layer in the center of the screen.||
|Zoom to fit width||Zooms the canvas so that all horizontally distributed layers fit the screens.||
|Zoom to fit height||Zooms the canvas so that all vertically distributed layers fit the screen.||
These options are also accessible through the View section on the menu bar:
Show pixels on zoom
By default, Lunacy displays the canvas in the vector mode, which means that all layers (except for rasterized ones) will preserve their quality regardless of the zoom value. If you need to see individual pixels, you can use the Show pixels on zoom button. It displays pixels when the zoom value exceeds 100.
Here is the same layer with the feature disabled (left) and enabled (right):
You can also toggle this feature on and off in the menu bar by selecting View > Pixels on Zoom.
The context menu is a pop-up list of commands and options for basic operations with layers.
It appears when you right-click on a layer. The items on the menu vary depending on the layer you select.
Almost all context menu options have shortcuts you can use to speed up your workflow:
These context menu options are universal for almost all layer types:
|Context menu button||Description|
|Copy the layer.|
|Paste an element at the position of the cursor.|
|Duplicate the selected layer.|
|Protect the layer from accidental edits.|
|Hide the layer from the canvas.|
|Deletes the selected layer.|
|Paste over||Paste an element over the layer.|
|Cut||Cut the selected layer.|
|Rename||Rename the layer.|
|Comment||Comment on the layer.|
|Copy/Paste as||Opens a submenu with copy/paste options.|
|Move to page||Move the layer to another page in the document.|
|Send to Back||Move the layer to the bottom of the Layer list.|
|Bring Forward||Move a layer one step higher in the Layer list.|
|Group Selection||Group two or more selected layers together.|
|Ungroup||Ungroup a selected group of layers.|
|Create component||Create a reusable component from the layer.|
Note: When you right-click on an empty area on the canvas or a frame, the only command available on the context menu is Paste here.