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.

Lunacy interface

The interface consists of the following main elements.

  1. 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 (Hide left panel button) at the bottom of the toolbar (2). Also, you can do it through the menu (View > Layers panel).

  2. 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).
  3. The canvas. That is your working area. For details, read below.
  4. 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.
  5. The menu bar. Holds the options and commands related to files, objects, editing, etc.
  6. 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.
  7. The action bar. Features a set of buttons related mostly to display options, see the table below.

    Button Description Keyboard shortcut/Menu option
    Show/Hide rulers button The Show/Hide rulers button. Controls the display of rulers. For details, read below. Ctrl + R
    Show/Hide layout button 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 + \
    Show prototyping button The Show prototyping button. Controls the display of hotspots and prototyping arrows. View > Prototyping
    Show pixels on zoom button 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
    Show grid button The Show grid button. Enables the display of the square grid. For details, read here. Ctrl+'
    Sketch Cloud Button The Enable dark mode button. Turns on/off the night theme in the Lunacy interface. -
    Sketch Cloud Button The Sketch Cloud button. Opens the Sketch Cloud panel. For details about working with Sketch Cloud in Lunacy, read here. -
    Missing fonts button The Missing fonts button. Appears when the file you are working with includes fonts not installed on your computer. For details, read here. -
    Notifications button The Notifications button. Appears when you have a new notification from Lunacy. Opens the panel where you can view and manage Lunacy notifications. -
  8. The file tabs panel. Shows the tabs of currently open files. To switch between the files, just click the respective tab.
  9. The zoom control. For details, read below.

The Objects panel

Document pages

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.

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:

  1. Click the plus icon in the Objects panel.
  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 Symbols page. For details, read here.

Objects list

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.

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 Ctrl or Shift keys 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+H shortcut 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+L shortcut 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

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

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:

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

Adding an artboard

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.

Artboards: Object panel and presets

The table below provides a description of Inspector elements displayed for artboards.

Inspector element Description
Size controls 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 dimension controls 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 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.

Artboard background Artboard background

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

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.

Adding custom presets

To add a custom artboard to presets:

  1. Select the artboard tool on the toolbar or press A. The panel of artboard 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).

Artboard presets

Rulers and guides

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

Ruler and guides pop-up menu

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

Layout grid

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

Measuring

Independent objects

To learn the distance between two objects on the canvas:

  1. Select the first object.
  2. Hover the cursor over the other object.
  3. Press and hold Alt.

To learn the distance between an object and the borders of the artboard:

  • Hover the cursor over the object, then press and hold Alt.

    OR

  • Select an object, then hover the cursor over an empty area within the artboard and press and hold Alt.

For precise positioning of objects on the artboard or relative one another, proceed as follows:

  1. Select one of the objects.
  2. Point the cursor over an empty area or over the other object.
  3. Holding down Alt, move the selected object using the arrow keys.

Grouped objects

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:

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

  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 object (group):

  1. Select the first group member.
  2. Press and hold Alt.
  3. 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:

  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 an object in Lunacy is to hold down the Ctrl key and rotate the mouse wheel. Similarly, you can hold down Ctrl and 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 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).

Zoom control

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 objects Shows all the objects available on the page. Ctrl + 1
Zoom to selection Zooms in and displays the selected object in the center of the screen. Ctrl + 2
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. Ctrl + 3
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. Ctrl + 4

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

Zoom tool

Also, for zooming and focusing you can use the zoom tool.

Show pixels on zoom

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

Vector and pixel modes

To toggle on/off the pixel mode, use the Show pixels on zoom button (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 objects on the canvas.
  2. Use the Workspace color control that will appear in the Inspector.

Way 2

  1. Deselect all the objects 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 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.

Inspector element Description
Alignment and distribution controls Alignment and distribution controls. Become available when you select two or more objects.
Opacity and blend mode settings Opacity and blend mode settings. Allow you to set the overall opacity of an object and its blending mode.
Object properties controls 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 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.
Prototyping controls The Prototyping section features the settings related to prototyping.
Appearance section The Appearance section allows you to apply styles to the selected object.
Styling options Styling options. For details, read here.
Export settings 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.

A view of Inspector with no objects selected

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

A view of Inspector with no objects selected

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

Menu option Description
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.