Tools

Learn about Lunacy’s design tools

All of Lunacy’s tools are on the toolbar located on the left of the canvas:

Below is a brief description of all available tools, which we will then go over in detail. To speed things up, activate the tools with the corresponding keyboard shortcuts:

Tool	Description	Keyboard shortcut
	Select tool. Use it to select, move, and resize layers on the canvas.	V or press Esc when an element or another tool is selected.
	Frame tool. Used for creating frames.
	Shape tools. A set of common shapes you can add to the canvas. Each tool has a shortcut, either a single, double, or repeated press of a button.	R — rectangle R, R — rounded rectangle L — line L, L — arrow O — oval O, O — triangle O, O, O — polygon O, O, O, O — star
	Text tool. Add text layers to the document. Comes with an on-canvas text generation option.	T
	Pen tool. Used for creating custom vectors or shapes.	P
	Image tool. Use it for importing images.	M
	GUI tools. A set of basic interface element components from UI kits (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs.	B — button D — text input field F — checkbox Y — radio button J — toggle W — dropdown
	Icon tool. Keeps recently used icons at hand.	X
	Comment tool. Activate it to leave comments anywhere on the canvas (only available in cloud documents).	C
	Scale tool. Proportionally change the size of the elements on the canvas.	K
	Eyedropper tool. Use it to sample colors.	I
	Hand tool. Used for easily navigating the canvas.	Hold down Space or the middle mouse button
	Hotspot tool. Add hotspots (interactive zones) to your designs when working with prototypes.	H
	Slice tool. Specify a region, or slice, of the canvas and export it. The slice can include parts of frames, several parts of different frames, and so on.	E
	Pencil tool. Used for drawing freehand shapes.	P, P
	Avatar tool. Add randomly generated avatars to your designs.	Q
	Component tool. Useful when you’re creating interface mockups: add placeholder components and then replace them with UI elements later.	S
	Rotate copies tool. Creates multiple rotated copies of any shape around a central point. Perfect for designing patterns, circular layouts, and symmetrical artwork.	Ctrl/⌘ + Shift + B

Lunacy also has the Zoom tool, though it doesn’t appear on the toolbar. To activate it, hold down Z and zoom in and out of a specific area on the canvas.

See also:
Zooming options

Select tool

The Select tool is active by default when no other tool is in use.

With it, you can select any layer on the canvas (provided it’s not locked), then move and modify the element as you wish:

• Select a layer by clicking it. A selection frame with handles will enclose the element and its name will be highlighted in the Layer list. Hold down Shift and click multiple elements to select all of them. If you need to select every element on the page, press Shift + A.
• Move layers by dragging them on the canvas.
• Resize and rotate layers using the handles at the coners of the selection frame.

You can also select layers through the Layer List. It may be more convenient in some cases, like when you’re dealing with fully overlapping or locked layers.

Using the Select tool with grouped layers

When you click over a group, you select the entire group.

To select a specific layer inside a group:

• Click the layer while holding down Ctrl / ⌘.
• Click to select the group, then double-click to select the required layer.

Then, switch the selection to the other layers in the group by clicking them.

Frame tool

Frames work like containers for your layers. They’re more flexible than layers in a lot of ways and are especially convenient when you’re designing for a specific device or screen size.

Press A to activate the Frame tool and drag over the canvas to create a frame:

Instead of dragging, you can set the frame size using the preset list that appears in the right panel or snap the frame to a preset by dragging its corner to one of the blue + icons that appear when you’re adding a frame:

See also:
Frames

Shape tools

Use these tools to add standard shapes onto the canvas:

• Rectangle (R)
• Rounded rectangle (R, R)
• Line (L)
• Arrow (L, L)
• Oval (O)
• Triangle (O, O)
• Polygon (O, O, O)
• Star (O, O, O, O)

Select the required shape on the toolbar or use the corresponding keyboard shortcut, then:

• Click on the canvas to place it as a 100 x 100 shape (works for all shapes except for lines and arrows).
• Click and drag to adjust the shape’s size.

Some more shape tips:

• To draw or resize a shape from the center, hold down Alt / ⌥.
• To draw symmetrical shapes, hold down Shift / Shift.
• Hold down both shortcuts to draw symmetrical shapes from the center.
• To draw a horizontal, vertical, or 45-degree diagonal line, arrow, or path, hold down Shift.

See also:
Editing shapes

Text tool

To add a text layer, press T and click over the area of the canvas where you want to place it. Type your text or use the handy text generation options that automatically appear when you create a new text layer:

See also:
Text
Text generation

Pen tool

The pen is a tool for creating vector paths and shapes. Activate it by pressing the Pen tool on the toolbar or press P.

If you’ve worked in other graphic editors before, use it like the Pen tool in those apps. If you’re new to design, it might take you some time and practice to master it. In this section, we’ll go over the main capabilities of the tool.

The pen builds shapes by drawing segments between the points, or vertices, that you add onto the canvas. The segments between interconnected vertices are called paths.

Types of paths

Paths can be open or closed:

• An open path has a start point and an end point that are not connected.
• When the start and end point of a path are connected, i.e. the path starts and ends on the same vertex, it’s called a closed path, or a shape.

Path segments can be either straight or curved.

To build a shape out of straight lines (e.g. a triangle):

1. Press P to activate the pen. This activates Edit mode, and the Edit shape section will appear in the right panel.
2. Click over the canvas to place the first point.
3. Keep clicking to outline the shape that you want. To delete a point, hold down Alt / ⌥ and click it.
4. Close the path by clicking over the starting point or click the Close path in the right panel.
5. Press Esc to exit Edit mode.

To curve a path, you’ll need to be in Edit mode (or don’t exit it while drawing with the Pen tool).

To enable Edit mode, select a vector shape, then:

• Double-click it
• Press Enter
• Click the Edit layer icon () on the context toolbar

To add a curve:

• Double click on a point
• Click and drag anywhere on a path

Two adjacent handles will appear around the point. Drag these handles and change their length to adjust the shape of the curve. You can also move the point around, if necessary:

Don’t worry if the resulting shape isn’t exactly what you wanted. Refine it by modifying curves and straight paths, as well as moving, adding, or deleting points.

To adjust a shape:

1. Select it.
2. Enable Edit mode.
3. Make the required changes.
4. Press Esc or click anywhere on the canvas outside the shape to exit Edit mode.

You can also change the stroke of the shape, add fills (to closed shapes) and effects in the right panel.

In the demo below, we added some curves to a heart-shaped layer built with straight lines. Note how a double-click turns a straight point into a curved point that is also mirrored (find out about different types of points).

Types of points

Points can be either straight or curved.

Curved points appear with handles when you build Bézier curves, and have three subtypes:

• Mirrored points come with identical handles that mirror each other as you drag one of the handles.
• Disconnected points have totally independent handles.
• Asymmetric points come with handles that share the same angle but can have different lengths.

You can double-click to switch between straight and mirrored points. To switch to disconnected or asymmetric points, use the controls that appear at the top of the right panel when you’re using the pen or have Edit mode enabled:

You can also hide one of the handles of a disconnected point by dragging the tip of the handle towards the point:

See also:
Vector editing

Pencil tool

The pencil is a tool for drawing freehand paths. It’s great when you need to quickly sketch something and don’t need perfectly refined shapes. That said, using a stylus with a graphic tablet will give you more precision.

The pencil stroke is black and 1px wide by default. You can adjust these properties for pencil-drawn layers in the right panel.

To draw with the Pencil tool:

1. Press P twice or select it on the toolbar.
2. Hold down the left mouse button and draw the required path.
3. Release the button when you are done.

Unlike the other tools, the Pencil tool doesn’t revert back to the Select tool. It remains active, so you can create as many layers as you want, with each pencil stroke adding a new layer to the Layer list. You can always group them later.

Once you’re done working with the pencil, press Esc or switch to another tool.

Here are two examples of a word written in one stroke and letter-by-letter (then grouped for convenience) using the pencil. Notice how they appear in the Layer list:

Editing paths drawn with the Pencil tool

Lunacy automatically smooths the paths that you create. You can also edit pencil-drawn paths like any other vector path:

1. Enable Edit mode.
2. Adjust the paths.
3. Press Esc or click anywhere on the canvas outside the shape once you’re done.

You can also add borders, shadows, and blurs to paths drawn with the pencil.

As for fills, keep in mind that the pencil always draws open paths, even if they appear closed. You can try to apply fills, but in many cases the result is going to look a little weird. If you need to close a path, enable the layer Edit mode and click the Close path button in the right panel.

Image tool

Use the Image tool to quickly add images from your computer onto the canvas.

Lunacy supports all popular image formats: PNG, JPG, JPEG, WEBP, BMP, ICO, GIF, SVG. The TIFF format is not supported.

To add an image to your design:

1. Press M or select the Image tool on the toolbar.
2. In the Open dialog box, choose one or multiple image files.
3. Click over the area where you want to place the image to add the image in its original size. You can also click and drag to set the required image size.

Of course, you can always drag and drop images from your files into Lunacy as well.

See also:
Images

GUI tool

The GUI tool features a set of basic UI elements that you can add to your designs as components:

• Button (B)
• Text input field (D)
• Checkbox (F)
• Radio button (Y)
• Toggle (J)
• Dropdown menu (W)

You can edit the appearance of these components or swap them out entirely.

To create components of your own, use the Component tool or turn layers into components via Ctrl + Alt + K / ⌘ + ⌥ + K.

Component tool

Use the Component tool to quickly create draft interface mockups. With it, you can add placeholder components and later replace them with elements from the GUI tool or your own components.

To draw a placeholder component:

1. Press S or select the Component tool on the toolbar.
2. Drag over the area where you want the placeholder component to be.

Placeholder components appear as pink rectangles with a question mark. To place components into these placeholders, select them and swap them with components from the Components tab in the left panel or the Component section in the right panel.

With the Component tool enabled, press S and Shift + S to switch back-and-forth between recently used components and quickly add them to the canvas.

See also:
Components

Icon tool

The Icon tool simplifies your workflow by keeping recently used icons at hand. To activate it, press X or select it on the toolbar. The Icons content tab will open up on the left, displaying a variety of icons of different themes and styles:

Also, if you’ve already added icons to the document, the latest used one will be hovering near the cursor.

Like with the Component tool, when the Icon tool is active, use X and Shift + X to switch through recently used icons.

Comment tool

Use the Comment tool to leave comments and notes for yourself to view later or to comment on other people’s documents and collect feedback. Commenting is only available in cloud documents. Apart from text, you can also comment with stickers or voice recordings.

To add a comment to a document:

1. Press C or select the Comment tool.
2. Click over the place on the canvas you want to comment.
3. Type something in the input field.
4. Click or press Enter.

See also:
Comments

Avatar tool

Use the Avatar tool to generate user avatars, so you don’t have to look for stock photos online. Choose from real-life models or AI-generated people. Combine it with Lunacy’s text generation feature, and you’ll save a massive amount of time.

To add an avatar to the canvas:

1. Activate the Avatar tool by pressing Q or selecting it on the toolbar.
2. Click or click and drag on the canvas to place the avatar.
3. Copy the avatars as many times as you need to get new photos. To change existing avatars:
   • With a single avatar selected, click the refresh button () at the top-left corner of a selected avatar.
   • With several avatars selected, press Shift + R or Generate avatar in the right panel.

Thanks to integration with the generated.photos project, you can also create and customize avatars:

1. With an avatar selected, switch the Real-life photo menu to Generated photo in the right panel.
2. Change the model’s gender, ethnicity, facial expression, age, and hair color appear in the corresponding input fields.
3. When you’re done, click Generate avatar and enjoy the magic!

You can also change the background in AI-generated avatars:

1. Select an avatar.
2. In the Generated photos section of the right panel, enable the Transparent toggle.
3. Click Generate avatar. A new avatar with a transparent background will appear on the canvas.
4. In the Fill section of the right panel, click +. This will add a new fill layer above the image.
5. Move the fill below the image layer.
6. Modify the fill.

Although avatars appear as circles when you add them to the canvas, they’re actually rounded rectangles, so you can modify their corner radius if you need.

Moreover, you can create avatars from any shape. To do this, select a shape, then enable the Avatar tool and click Generate avatar in the right panel. This also works with generated photos.

Scale tool

Using the Scale tool, you can proportionally resize any of your layers, except for:

• Locked layers
• Layers nested in component instances

To activate the Scale tool, press K or select it on the toolbar. Then, select the element you want to resize and use the bounding box handles to resize it.

The Scale tool preserves the aspect ratio and also scales any borders and/or effects applied to the layer.

With the Scale tool enabled, you can set precise values to change the layer size in the right panel, and the tool will scale the layer and its properties accordingly.

Slice tool

With the Slice tool, you can select a specific area on your design and export it.

To export a slice:

1. Enable the Slice tool by pressing E or selecting it on the toolbar.
2. Click and drag over the area you want to export.
3. Open the Export tab in the right panel.
4. Define the export settings.
5. Click Export selected.

To hide/show slices on the canvas, enable/disable the Slices option in the Additional options menu on the top bar:

To remove a slice from the canvas, select it and press Del.

See also:
Export

Hotspot tool

Use the Hotspot tool to create hotspot zones when designing prototypes. With hotspots, you can make any part of your design interactive, as well as expand the interactive area for small elements, making them easier to press.

To add a hotspot:

1. Press H or select the Hotspot tool on the toolbar.
2. Click and drag over the area where you want to place a hotspot.
3. Link it to a frame to set up an interactive prototype.

To hide/show hotspots and prototyping links on the canvas, enable/disable the Show prototyping option in the Additional options menu on the top bar:

See also:
Prototyping

Eyedropper tool

The Eyedropper tool samples the colors of the elements in your document.

To use the eyedropper tool:

1. Select a layer you want to recolor. If you don’t select any layer, the eyedropper will apply the new color to the workspace.
2. Select the Eyedropper tool on the toolbar or on the color picker panel, or press I. The cursor will turn into the eyedropper, and the Colors panel will appear on the left, featuring four pallets:
   • Recent colors
   • Material colors
   • Document colors
   • Flat colors
3. Hover the eyedropper over the color that you want to sample, either on the canvas or Lunacy’s interface, and click to apply it.

That is typically how all eyedroppers work in similar apps. Lunacy’s eyedropper also features a zoom option that comes in handy when you need pixel precision for small target areas.

To enable it, hover the eyedropper over the target and hold down the left mouse button. Then point the eyedropper to the required pixel and release the mouse button. To exit the zoom mode, press Esc or quickly swipe the cursor anywhere away from the current area.

How the eyedropper applies colors to layers

Depending on the styling properties of a layer, the eyedropper applies colors in the following order:

1. Fill
2. Border
3. Shadow
4. Inner shadow

So, if a layer has a fill and a border, the eyedropper will update the fill.

If a layer has no fill, but has a border and a shadow, the eyedropper changes the border color, and so on.

If a layer has several fills (or borders/shadows/inner shadows), the eyedropper applies the color the property at the top of the list in the right panel.

Similar rules apply to text layers, where text color has top priority.

See also:
Styling

Hand tool

The Hand tool is useful for navigating the canvas. To activate it, hold down Space or the middle mouse button and drag.

See also:
Working with the canvas

Rotate copies tool

This tool enables you to create multiple rotated copies of any shape around a central point in no time. The tool is great for designing patterns, circular layouts, and symmetrical artwork.

To enable the tool, select a layer and click on the context toolbar. Or use the Ctrl/⌘ + Shift + B shortcut.

Use + and - to control the number of copies.

When done, click Apply editing in the right panel or click anywhere beyond the shape.