lunacy-docs/docs/interface.md

layout, keywords, comments, title, description, icon, micro_nav, page_nav

layout	keywords	comments	title	description	icon	micro_nav	page_nav
default		false	Interface	Get familiar with the Lunacy interface	toggle-off	false	next prev content url Tools /tools content url About /about

Overview

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

{:.is-big}

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 () 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 that appears 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
   	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.	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 Sketch Cloud button. Opens the Sketch Cloud panel. For details about working with Sketch Cloud in Lunacy, read here.	-
   	The Missing fonts button button. Appears when the file you are working with includes fonts not installed on you 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.	-

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.

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

{:.is-big}

If the names of objects appear truncated in the list, 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 - by hiding 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.

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.

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

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 should enable the display of the grid individually for each artboard.

The procedure is as follows:

1. Select the required artboard. For this, if there are no objects on the artboard, click anywhere on the artboard. Otherwise, click the artboard name at the top of it. Also, you can select it through the object list.
2. 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 as shown in the figure below.

Layout grid

You can apply layout grids only to artboards. If you have several artboards on a page, the display and the settings of the grid are configured individually for each artboard.

The procedure is as follows:

1. Select the required artboard. If there are no objects on the artboard, click anywhere on the artboard. Otherwise, click the artboard name at the top of it. Also, you can select it through the object list.
2. Click the Show layout button on the the action bar. Alternatively, you can click the eye icon in the Grid layout section of the Inspector.
3. If necessary, configure the settings of the grid in the Inspector (see the figure below).

{:.is-big}

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. To disable this feature, use the menu (View > Pixel grid).

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.

Alternatively, you can click the down arrowhead next to 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 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.

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

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

The Inspector

The Inspector is the panel on the left of the Lunacy interface. The controls and settings that appear in the Inspector depend on 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. Become available when you select two or more objects.
	Position and size adjustment controls. Allow you to adjust the position and size of the 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.