Get familiar with the Lunacy interface
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.
The left panel. Features two tabs:
- Objects: Shows the list of pages in the current document and the list of objects on the selected page. For details, read below.
- Libraries: Provides access to the document assets (symbols, layer and text styles), built-in libraries of icons, photos and vector images, as well as built-in and external UI kits.
You can temporarily hide the left panel by clicking the respective button () at the bottom of the toolbar (2). Also, you can do it through the menu (View > Layers panel).
- 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).
- The canvas. That is your working area. For details, read below.
The Inspector panel. Features two tabs:
- Properties: Lets you see and adjust the properties of the selected object. The view of the Properties Inspector varies with the type of the selected object. For details, read below.
- Code: Allows you to view and copy the code of the selected object in CSS, XAML and SVG.
- The menu bar. Holds the options and commands related to files, objects, editing, etc.
- The context toolbar. The set of controls displayed on the context toolbar depends on the type of the currently selected object. Hover the cursor over a tool icon to see a pop-up explaining what the tool does.
The action bar. Features a set of buttons related mostly to display options, see 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
The Layout button. Controls the display of the layout grid. Available only when there is an artboard on the canvas. For details, read here.
Ctrl + \
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.
The Enable dark mode button. Turns on/off the night theme in the Lunacy interface.
The Sketch Cloud button. Opens the Sketch Cloud panel. For details about working with Sketch Cloud in Lunacy, read here.
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.
- The file tabs panel. Shows the tabs of currently open files. To switch between the files, just click the respective tab.
- The zoom control. For details, read below.
Each document can include any number of pages. You can keep all you 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.
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:
- Click the plus icon in the Objects panel.
- Enter the name of the new page.
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 Symbols page. For details, read here.
The object list shows a tree of objects available on the current page. Lunacy automatically assigns names to objects and object groups as you create them, but you can rename them if you like. The figure below shows a view of an object list.
If the names of objects in the list appear truncated, you can change the width of the panel as shown below.
The operations that you can perform in the objects list include:
- Selecting objects. To select an object or object group, click its name in the objects list. As you do it, the selection frame appears around the object on the canvas. To select multiple items hold down the
Shiftkeys and click.
- Searching for objects. To quickly find the required object start typing its name in the search field above the object list.
- Arranging objects. You can change the order of objects in the list by dragging them up or down.
- Hiding objects. You can temporarily hide the selected item from the canvas. You can hide objects, object groups or individual items within object groups. Select the item in the list and click the eye icon that will appear next to its name. You can also hide objects by using the
Ctrl+Hshortcut or the respective command on the context menu.
- Locking objects. By locking objects you can protect them from accidental edits. You cannot select a locked object on the canvas. But you still can select it through the objects list and edit its properties in the Inspector. You can also lock grouped objects or individual objects within a group. Select the object in the list and click the padlock icon that will appear next to its name. You can also lock objects by using the
Ctrl+Lshortcut or the respective command on the context menu.
- Other basic operations with objects available on the context menu.
To collapse all branches in the object tree use the
Ctrl + ~ shortcut.
Tip: Some projects, such as design systems, can house hundreds of objects on a single page. To quickly locate the required object on the canvas, find it by typing its name in the search field, select it in the objects list and then press
Ctrl + 2 (Fit to selection).
The canvas is your working area. It has no boundaries, so you can add objects wherever you want. But if you need to observe certain frames you can add artboards 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.
Artboards are a special type of objects that allows you to divide the canvas into separate areas with different content. Artboards are optional but they come in handy when you’re designing for a certain screen size or device. To create an artboard, use the artboard 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 artboard 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 an artboard:
- Select the artboard tool on the toolbar or press
- Click and drag to create a custom size artboard or select an option from the panel on the right (see the figure below).
But even if you started your project without artboards, it is never too late to add them. Just drag the artboard tool over the objects that you want to put on an artboard.
The figure below shows how artboards appear in the Objects panel and a view of the Inspector with artboard settings and controls which differ a lot from those available in the Inspector panels of other object types.
The table below provides a description of Inspector elements displayed for artboards.
|Preset sizes and orientation
Use these controls to select the size of the artboard from one of the presets and change its orientation. The Resize to Fit button changes the size of an artboard to the size of the selection frame that you get when you select all objects on the given artboard.
|Position and size
The X and Y controls show and allow you to manage the absolute position of the artboard on the canvas.
The W and H controls, show and allow to change the width and height of the object. Click the links button, if you want to preserve aspect ratio when changing the size of the artboard.
|Adjust content on resize
With this checkbox selected, when you change the size of the artboard, Lunacy will proportionally change the size of the objects on it. Read also about resizing constraints.
Use these controls to change the color and opacity of the artboard. Also, you can clear the Include in export checkbox, if you don't want to include the artboard into export results. In such a case, Lunacy will export only the objects available on the artboard.
|Layout grid settings
This group of controls allows you to configure the settings of the layout grid. For details about layout grids, read here.
Allow you to export the artboard and its content. For details about export in Lunacy, click here.
Selecting and moving artboards
To select an empty artboard, you can click anywhere within the artboard. To select an artboard with objects on it, click the artboard’s name.
Similarly, to move an empty artboard, click anywhere within the artboard and drag it to where you want it. To move an artboard with objects, click the artboard’s name and drag.
Alternatively, you can select the required artboard by clicking its name in the Objects panel.
To add a custom artboard to presets:
- Select the artboard tool on the toolbar or press
A. The panel of artboard presets appears on the right.
- At the bottom of the panel, click the Create custom preset button. Scroll the panel down if you don’t see the button.
- In the displayed dialog box, define the preset name and its dimensions in pixels.
- Click Save. The group Custom appears in the panel of presets (see the figure below).
Ruler and guides will help you position and align objects 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 objects along the guide. Move an object close to the guide and note how it will snap to the guide.
To relocate a guide, just drag it to another position. 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).
There are two types of grids: square grid and layout grids. If necessary, you can display both of them at the same time.
If there no artboards 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 artboards available on the canvas. For this, deselect all artboards and objects 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 artboard. For this, select the required artboard or an object 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.
You can apply layout grids only to [artboards]((#artboards). If you have several artboards on a page, you can toggle on and off the display of layout grids for all or individually for each artboard. Also, each artboard can have its own settings of the layout grid (see the demo below).
To learn the distance between two objects on the canvas:
- Select the first object.
- Hover the cursor over the other object.
- Press and hold
To learn the distance between an object and the borders of the artboard:
Hover the cursor over the object, then press and hold
Select an object, then hover the cursor over an empty area within the artboard and press and hold
For precise positioning of objects on the artboard or relative one another, proceed as follows:
- Select one of the objects.
- Point the cursor over an empty area or over the other object.
- Holding down
Alt, move the selected object using the arrow keys.
To measure the distance between a grouped object and another object (or grouped object) or between a grouped object and the borders of the artboard, proceed as described in the previous subsection.
To learn the distance between a member of a group and the borders of the group:
- Point the cursor over the required group member.
- Press and hold
Ctrl + Alt.
To learn the distance between a member of a group and the borders of the artboard:
- Select the group member.
- Press and hold
- 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 object (group):
- Select the first group member.
- Press and hold
- Point the cursor over the second group member/object(group).
To learn the distance between a member of a group and a member of another group:
- Select the first group member.
- Press and hold
- Point the cursor over the member of the other group.
The next demo shows the above three procedures.
The easiest way to zoom to an object in Lunacy is to hold down the
Ctrl key and rotate the mouse wheel. Similarly, you can hold down
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:
- Through the menu (View > Pixel grid).
- Deselect all objects 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 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 the first two 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.
|Zoom in/out||Zooms the canvas in/out.||
|Zoom to 100%||Sets the zoom value to 100%.||
|Zoom to all objects||Shows all the objects available on the page.||
|Zoom to selection||Zooms in and displays the selected object in the center of the screen.||
|Zoom to fit width||Zooms the canvas so that all the horizontally distributed objects fit the screen and you don't have to scroll the screen to the sides.||
|Zoom to fit height||Zooms the canvas so that all the vertically distributed objects fit the screen and you don't have to scroll the screen up or down.||
The above options are also accessible through the View menu, see the figure below.
Also, for zooming and focusing you can use the zoom tool.
By default, Lunacy displays canvas in the vector mode. It means that all objects (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 object 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:
- Deselect all the objects on the canvas.
- Use the Workspace color control that will appear in the Inspector.
- Deselect all the objects on the canvas.
- Select the eyedropper tool.
- Use the pallets that will appear in the left panel to select the new color.
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 artboard tool. Lunacy enables it by default upon creation of a new document. And only you add an artboard or add and select another object, the Property Inspector appears.
The set of controls and settings displayed in the Inspector varies with the type of object that you select on the canvas. Below is a description of Inspector elements common for almost all object types.
|Alignment and distribution controls. Become available when you select two or more objects.|
|Opacity and blend mode settings. Allow you to set the overall opacity of an object and its blending mode.|
|Object properties controls. Allow you to adjust the position and size of the object, 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 object.|
|Resizing constraints. Appear when you select two or more objects, a group of objects or an object on an artboard. Serve to determine the behavior of objects upon resizing.|
|The Prototyping section features the settings related to prototyping.|
|The Appearance section allows you to apply styles to the selected object.|
|Styling options. For details, read here.|
|Export settings. For details, read here.|
When you select no objects 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).
There are several ways to change values in the numeric fields of the Inspector. You can:
- Enter the new value manually (press
- 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
The context menu is a pop-up list of commands and options for basic operations with objects. It appears when you right-click an object on the canvas. The set of items available on the context menu might slightly vary. It depends on the type of object 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 object types.
|Bring Forward||Moves the object one layer forward.|
|Bring to Front||Moves the object to the topmost layer.|
|Send Backward||Moves the object one layer back.|
|Send to Back||Moves the object to the backmost layer.|
|Group Selection||Groups two or more selected objects together. For details about grouping objects, read here.|
|Ungroup||Splits the selected group into separate objects.|
|Lock||Locks the object from accidental edits. For details, read here.|
|Hide||Temporarily hides the object from the canvas. For details, read here.|
|Rename||Allows you to rename the selection in the object list.|
|Copy/Paste||Opens a submenu with copying/pasting options. For details, read here.|
|Duplicate||Creates a duplicate of the selected object. For details, read here.|
|Delete||Deletes the selected object.|
When you right-click an empty area on the canvas or an artboard, 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 object you paste.