Interface

Get familiar with the Lunacy interface

Overview

The Lunacy interface is intuitive and minimal. It contains only essential controls, so you don’t have to spend much time learning how to interact with it.

The interface consists of the following main elements.

1. The content tabs. Use them to switch between the:

   • Layer list
   • Document assets (components, layer and text styles)
   • Built-in Lunacy libraries of icons, photos and vector images, as well as collections of UI kits
   • List of shortcuts

   To shrink the size of the content tabs panel, drag its right border to the left.

   

2. The left panel. Displays the content of the selected tab (1). You can temporarily hide the panel by clicking the current tab, using respective shortcuts (Alt+1(⌥ 1)…Alt+8(⌥ 8), Shift+F1) or through the menu (View > Left Panel).

3. The toolbar. Features all the primary Lunacy tools. For details about tools, click here. If you need more space or prefer shortcuts you can toggle off the display of the toolbar through the menu (View > Toolbar).
4. The canvas. That is your working area. For details, read below.
5. The Inspector panel. Lets you see and adjust the properties of the selected layer. The view of the Properties Inspector varies with the type of the selected layer. For details, read below.
6. The menu bar. Holds the options and commands related to files, layers, editing, etc. Also, it features the Home button that opens the Home tab.
7. The context toolbar. The set of controls displayed on the context toolbar depends on the type of the currently selected layer. Hover the cursor over a tool icon to see a pop-up explaining what the tool does.
8. The file tabs panel. Shows the tabs of currently open files. To switch between the files, just click the respective tab.
9. The Play button. Starts the prototype previewer. For details about prototyping in Lunacy, read here.

10. This button opens a menu with options described in the table below.

    Button	Description	Keyboard shortcut/Menu option
    	The Show/Hide rulers button. Controls the display of rulers. For details, read below.	Ctrl+R (⌘ R)
    	The Layout button. Controls the display of the layout grid. Available only when there is a frame on the canvas. For details, read here.	Ctrl+\ (⌃ G)
    	The Show prototyping button. Controls the display of hotspots and prototyping arrows.	View > Prototyping
    	The Show pixels on zoom button. Enables the display of pixels when the zoom value exceeds 100. For details, read here.	View > Pixels on Zoom
    	The Show grid button. Enables the display of the square grid. For details, read here.	Ctrl+' (⌘ ')
    	The Enable dark mode button. Turns on/off the night theme in the Lunacy interface.	-
    	The Missing fonts button. Appears when the file you are working with includes fonts not installed on your computer. For details, read here.	-
    	The Notifications button. Appears when you have a new notification from Lunacy. Opens the panel where you can view and manage Lunacy notifications.	-

11. The zoom control. For details, read below.
12. The Dark mode button. Use it to switch between the light and dark themes.

Document pages

Each document can include any number of pages. You can keep all your work on a single page or split it into several pages by components, if the project is large. For instance, if you are designing a website, you can opt to keep the desktop and mobile versions on separate pages. Or you can duplicate a page to save a snapshot of your current work and continue working with the copy. In fact, the reasons for having multiple pages in a document are numerous and it is completely up to you to decide what approach to choose. The figure below shows a view of a page list. It appears above the Layer List when the Layers content tab is selected.

The operations that you can perform with document pages include:

• Adding pages
• Changing the order of pages
• Renaming pages
• Duplicating pages with their content
• Copying and pasting pages with their content between documents
• Deleting pages

To add a new page to the document:

1. Click the plus icon above the Layer List.
2. Enter the name of the new page.
3. Press Enter.

To change the position of a page in the list, just drag it up or down to where you want it.

The rest of the operations are accessible through the context menu invoked by a right-click over the required page name.

There is also a special type of a page - the Components page. For details, read here.

Layer list

The Layer List appears in left panel when you click the Layers content tab. It shows a tree of layers available on the current page. Lunacy automatically assigns names to layers and layer groups as you create them, but you can rename them if you like. The figure below shows a view of a Layer List.

If the names of layers in the list appear truncated, you can change the width of the panel as shown below.

The operations that you can perform in the layers list include:

• Selecting layers. To select a layer or layer group, click its name in the Layer List. As you do it, the selection frame appears around the layer on the canvas. To select multiple items hold down the Ctrl or Shift keys and click.
• Searching for layers. To quickly find the required layer start typing its name in the search field above the Layer List.
• Arranging layers. You can change the order of layers in the list by dragging them up or down.
• Hiding layers. You can temporarily hide the selected item from the canvas. You can hide layers, layer groups or individual items within layer groups. Select the item in the list and click the eye icon that will appear next to its name. You can also hide layers by using the Ctrl+H shortcut or the respective command on the context menu.
• Locking layers. By locking layers you can protect them from accidental edits. You cannot select a locked layer on the canvas. But you still can select it through the Layer List and edit its properties in the Inspector. You can also lock grouped layers or individual layers within a group. Select the layer in the list and click the padlock icon that will appear next to its name. You can also lock layers by using the Ctrl+L shortcut or the respective command on the context menu.
• Other basic operations with layers available on the context menu.

To collapse all branches in the Layer List tree use the Ctrl + ~ shortcut.

The Canvas

The canvas is your working area. It has no boundaries, so you can add layers wherever you want. If you need to work within certain boundaries, you can add frames to the canvas. Also, you can toggle on and off the display of rulers and grids on the canvas.

Moving around the canvas

If your design takes a lot of space and does not fit the screen, you can use the scroll bars located on the right side and at the bottom of the screen.

Also, you can use the mouse wheel for scrolling the canvas. Just point the cursor anywhere over the canvas and rotate the wheel to scroll vertically. To scroll horizontally, hold down the Shift key and rotate the mouse wheel.

Another option to navigate the canvas is to hold down the Space key (the cursor will turn into a palm) and drag the canvas to where you need.

Also, read about the zooming options.

Frames

Frames are a special type of layers that lets you divide the canvas into separate areas with different content. Frames are optional but they come in handy when you’re designing for a certain screen size or device. To create an frame, use the frame tool. In fact, it is the tool that Lunacy enables first when you create a new document. It allows you to create a custom size frame or to select an option from the list that will appear on the right. This list features presets for popular devices, screen resolutions and social media templates (you can also add your custom presets to this list, see below).

To add a frame:

1. Select the frame tool on the toolbar or press A.
2. Click and drag to create a custom size frame or select an option from the panel on the right (see the figure below).

But even if you started your project without frames, it is never too late to add them. Just drag the frame tool over the layers that you want to put on a frame.

The figure below shows how frames appear in the Layer List and a view of the Inspector with frame settings and controls which differ a lot from those available in the Inspector panels of other layer types.

The table below provides a description of the right panel elements displayed for frames.

Inspector element	Description
	Preset sizes and orientation Use these controls to select the size of the frame from one of the presets and change its orientation. The Resize to Fit button changes the size of a frame to the size of the selection frame that you get when you select all layers on the given frame.
	Position and size The X and Y controls show and allow you to manage the absolute position of the frame on the canvas. The W and H controls, show and allow to change the width and height of the layer. Click the links button, if you want to preserve aspect ratio when changing the size of the frame.
	Adjust content on resize With this checkbox selected, when you change the size of the frame, Lunacy will proportionally change the size of the layers on it. Read also about resizing constraints.
	Frame background Use these controls to change the color and opacity of the frame. Also, you can clear the Include in export checkbox, if you don't want to include the frame into export results. In such a case, Lunacy will export only the layers available on the frame.
	Layout grid settings This group of controls allows you to configure the settings of the layout grid. For details about layout grids, read here.
	Export controls Allow you to export the frame and its content. For details about export in Lunacy, click here.

Selecting and moving frame

To select an empty frame, you can click anywhere within the frame. To select a frame with layers on it, click the frame’s name.

Similarly, to move an empty frame, click anywhere within the frame and drag it to where you want it. To move a frame with layers, click the frame’s name and drag.

Alternatively, you can select the required frame by clicking its name in the Layer List.

Adding custom presets

To add a custom frame to presets:

1. Select the frame tool on the toolbar or press A. The panel of frame presets appears on the right.
2. At the bottom of the panel, click the Create custom preset button. Scroll the panel down if you don’t see the button.
3. In the displayed dialog box, define the preset name and its dimensions in pixels.
4. Click Save. The group Custom appears in the panel of presets (see the figure below).

Rulers and guides

Ruler and guides will help you position and align layers on the canvas. In Lunacy, rulers are enabled by default. They appear at the top and on the left side of the canvas. The default and the only measurement unit is pixels. To toggle the rulers off/on, use the Ctrl+R shortcut or do it through the menu bar (View > Rulers).

To create a guide, click anywhere on a ruler and drag the guide onto the canvas to where you need it. Now you can position layers along the guide. Move a layer close to the guide and note how it will snap to the guide.

To relocate a guide, just drag it to another position or select it and use arrow keys to nudge it. If you don’t need a guide, click to select it (hold down Shift to select multiple guides) and press Delete. Also, you can use the options from the pop-up menu invoked by a right-click over a ruler (see the figure below).

Grids

There are two types of grids: square grid and layout grids. If necessary, you can display both of them at the same time.

Square grid

If there are no frames on the canvas, Lunacy displays the square grid directly on the canvas (to enable it, just click the Show grid button on the action bar). Otherwise, you can toggle on/off the display of the grid:

• For all frames available on the canvas. For this, deselect all frames and layers on the canvas (click over an empty area on the canvas or press Esc) and click the Show grid button on the action bar.
• Individually for each frame. For this, select the required frame or a layer on it and click the Show grid button on the action bar.

To select the size of the grid cell, click the down arrowhead next to the button and choose one of the presets or define your custom size.

Layout grid

You can apply layout grids only to frames. If you have several frames on a page, you can toggle on and off the display of layout grids for all or individually for each frame. Also, each frame can have its own settings of the layout grid (see the demo below).

Measuring

Independent layers

To learn the distance between two layers on the canvas:

1. Select the first layer.
2. Hover the cursor over the other layer.
3. Press and hold Alt (⌥).

To learn the distance between an layer and the bounds of the frame:

• Hover the cursor over the layer, then press and hold Alt (⌥).

  OR

• Select a layer, then hover the cursor over an empty area within the frame and press and hold Alt (⌥).

For precise positioning of layers on the frame or relative one another, proceed as follows:

1. Select one of the layers.
2. Point the cursor over an empty area or over the other layer.
3. Holding down Alt(⌥), move the selected layer using the arrow keys.

Grouped layers

To measure the distance between a grouped layer and another layer (or grouped layer) or between a grouped layer and the borders of the frame, proceed as described in the previous subsection.

To learn the distance between a member of a group and the borders of the group:

1. Point the cursor over the required group member.
2. Press and hold Ctrl + Alt (⌘ ⌥).

To learn the distance between a member of a group and the borders of the frame:

1. Select the group member.
2. Press and hold Alt (⌥).
3. Point the cursor anywhere beyond other group members.

To learn the distance between a member of a group and another member of the group or another layer (group):

1. Select the first group member.
2. Press and hold Alt(⌥).
3. Point the cursor over the second group member/layer(group).

To learn the distance between a member of a group and a member of another group:

1. Select the first group member.
2. Press and hold Ctrl+Alt (⌘ ⌥).
3. Point the cursor over the member of the other group.

The next demo shows the above three procedures.

Zooming options

The easiest way to zoom to a layer in Lunacy is to hold down the Ctrl(⌘) key and rotate the mouse wheel. Similarly, you can hold down Ctrl and Shift (⌘ Shift) keys. In such a case the speed of zooming will be slower (see the demo below).

For your convenience, when the zoom value exceeds 500, Lunacy starts displaying the pixel grid. There are two ways to disable this feature:

1. Through the menu (View > Pixel grid).
2. Deselect all layers on the canvas and clear the Show pixel grid checkbox that will appear in the Inspector.

For information about other zooming options, read below.

The Zoom tool

The Zoom tool enables you to zoom in the selected layer or canvas area. To use the tool:

1. Press and hold Z.
2. Click the layer you want to zoom in or drag over the required area (the smaller the area is, the higher the resulting zoom value will be).
3. To zoom out, hold down Z+Alt and click or drag over the layer or area.

The Zoom control

The zoom control is found on the right of the file tab panel. To change the zoom value, you can:

• Enter the zoom value manually in the edit field.
• Hover the cursor over the zoom control edit field, wait a moment until the cursor turns into a double-headed arrow and then drag the cursor up or down.
• Click over the edit field of the zoom control and rotate the mouse wheel.

The demo below shows all these three methods.

Alternatively, you can click the down arrowhead next to the zoom control and select one of the preset values or options on the displayed menu (see the figure below).

The table below explains the options on the menu.

Operation	Description	Keyboard shortcut
Zoom in/out	Zooms the canvas in/out.	+/- or Ctrl + "+/-"
Zoom to 100%	Sets the zoom value to 100%.	Ctrl + 0
Zoom to All Layers	Shows all the layers available on the page.	Ctrl + 1
Zoom to Selection	Zooms in and displays the selected layer in the center of the screen.	Ctrl + 2
Zoom to fit width	Zooms the canvas so that all the horizontally distributed layers fit the screen and you don't have to scroll the screen to the sides.	Ctrl + 3
Zoom to fit height	Zooms the canvas so that all the vertically distributed layers fit the screen and you don't have to scroll the screen up or down.	Ctrl + 4

The above options are also accessible through the View menu, see the figure below.

Show pixels on zoom

By default, Lunacy displays canvas in the vector mode. It means that all layers (except for rasters) will look perfect on the screen irrespective of the zoom value. But if you need to see individual pixels, you can use the show pixels on zoom feature. It enables the display of pixels when the zoom value exceeds 100. The figure below shows a view of the same layer with the feature disabled (left) and enabled (right).

To toggle on/off the pixel mode, use the Show pixels on zoom button () or do it through the menu bar (View > Pixels on Zoom).

Changing the canvas color

There are two ways to change the color of the canvas:

Way 1

1. Deselect all the layers on the canvas.
2. Use the Workspace color control that will appear in the Inspector.

Way 2

1. Deselect all the layers on the canvas.
2. Select the eyedropper tool.
3. Use the pallets that will appear in the left panel to select the new color.

The Inspector

The Inspector is the panel that appears on the right of the Lunacy interface. When you create a new document, the first thing you see on the right is not yet the Inspector but the panel of presets of the frame tool. Lunacy enables it by default upon creation of a new document. And only when you add a frame or add and select another layer, the Property Inspector appears.

The set of controls and settings displayed in the Inspector varies with the type of layer selected on the canvas. Below is a description of Inspector elements common for almost all layer types.

Inspector element	Description
	Alignment and distribution controls. Become available when you select two or more layers.
	Opacity and blend mode settings. Allow you to set the overall opacity of a layer and its blending mode.
	Layer properties controls. Allow you to adjust the position and size of the layer, as well as its rotation angle, corner radius and number of vertices in stars and polygons. The set of displayed controls varies with the selected layer.
	Resizing constraints. Appear when you select two or more layers, a group of layers or a layer on a frame. Serve to determine the behavior of layers upon resizing.
	The Prototyping section features the settings related to prototyping.
	The Appearance section allows you to apply styles to the selected layer.
	Styling options. For details, read here.
	Export settings. For details, read here.

When you select no layer on the canvas, the Inspector shows the following controls.

• Workspace color: Allows you to change the color of the canvas.
• Show pixel grid: Toggles on/off the display of the pixel grid when the zoom value exceeds 500.
• Export project: Allows you to export the whole project. For details, read here.

If you need more space, you can toggle on/off the display of the Inspector panel through the menu bar (View > Inspector).

Tips on working with the Inspector

There are several ways to change values in the numeric fields of the Inspector. You can:

• Enter the new value manually (press Enter to submit).
• Click over the required field and rotate the mouse wheel to gradually increase or decrease the value.
• Hover the cursor over the required field, wait a moment until the cursor turns into a double-headed arrow and then drag the cursor up or down.
• Use math (press Enter to submit).

The context menu

The context menu is a pop-up list of commands and options for basic operations with layers. It appears when you right-click a layer on the canvas. The set of items available on the context menu might slightly vary. It depends on the type of layer that you right-click. Also, next to each item, the context menu shows respective shortcuts that you can use when you become more confident with Lunacy (see the figure below).

The table below gives an overview of context menu commands and options common for almost all layer types.

Menu option	Description
Bring Forward	Moves the layer one step up.
Bring to Front	Moves the layer to the very top.
Send Backward	Moves the layer one step down.
Send to Back	Moves the layer to the very bottom.
Group Selection	Groups two or more selected layers together. For details about grouping layers, read here.
Ungroup	Splits the selected group into separate layers.
Lock	Locks the layer from accidental edits. For details, read here.
Hide	Temporarily hides the layer from the canvas. For details, read here.
Rename	Allows you to rename the selection right on the canvas or in the Layer List.
Copy/Paste	Opens a submenu with copying/pasting options. For details, read here.
Duplicate	Creates a duplicate of the selected layer. For details, read here.
Delete	Deletes the selected layer.

When you right-click an empty area on the canvas or a frame, the only command available on the context menu will be Paste here. The point where you right-click is the place where Lunacy will place the top-left selection handle of the layer you paste.