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:
|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 — rounded rectangle
L — line
L — arrow
O — oval
O — triangle
O — polygon
O — star
|Text tool. Add text layers to the document. Comes with an on-canvas text generation option.
|Pen tool. Used for creating custom vectors or shapes.
|Image tool. Use it for importing images.
|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.
|Comment tool. Activate it to leave comments anywhere on the canvas (only available in cloud documents).
|Scale tool. Proportionally change the size of the elements on the canvas.
|Eyedropper tool. Use it to sample colors.
|Hand tool. Used for easily navigating the canvas.
Space or the middle mouse button
|Hotspot tool. Add hotspots (interactive zones) to your designs when working with prototypes.
|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.
|Pencil tool. Used for drawing freehand shapes.
|Avatar tool. Add randomly generated avatars to your designs.
|Component tool. Useful when you’re creating interface mockups: add placeholder components and then replace them with UI elements later.
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.
Note: If you need more space or prefer working with keyboard shortcuts, toggle off the display of the toolbar by selecting View → Toolbar in the menu bar.
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
Shiftand 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
- 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.
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.
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:
Tip: You can drag layers into existing frames or draw a frame over several layers to frame them.
Use these tools to add standard shapes onto the canvas:
- Rectangle (
- Rounded rectangle (
- Line (
- Arrow (
- Oval (
- Triangle (
- Polygon (
- Star (
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
- To draw symmetrical shapes, hold down
- 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
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:
The pen is a tool for creating vector paths and shapes. Activate it by pressing the Pen tool on the toolbar or press
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):
Pto activate the pen. This activates Edit mode, and the Edit shape section will appear in the right panel.
- Click over the canvas to place the first point.
- Keep clicking to outline the shape that you want. To delete a point, hold down
⌥and click it.
- Close the path by clicking over the starting point or click the Close path in the right panel.
Escto 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
- 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:
- Select it.
- Enable Edit mode.
- Make the required changes.
Escor 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).
Tip: To draw a horizontal, vertical, or 45-degree diagonal path, hold down
Shift when placing the second point of a segment.
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.
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:
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:
Ptwice or select it on the toolbar.
- Hold down the left mouse button and draw the required path.
- 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:
- Enable Edit mode.
- Adjust the paths.
Escor 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.
Use the Image tool to quickly add images from your computer onto the canvas.
Lunacy supports all popular image formats:
TIFF format is not supported.
To add an image to your design:
Mor select the Image tool on the toolbar.
- In the Open dialog box, choose one or multiple image files.
- 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.
The GUI tool features a set of basic UI elements that you can add to your designs as components:
- Button (
- Text input field (
- Checkbox (
- Radio button (
- Toggle (
- Dropdown menu (
To create components of your own, use the Component tool or turn layers into components via
Ctrl + Alt + K /
⌘ + ⌥ + K.
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:
Sor select the Component tool on the toolbar.
- 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
Shift + S to switch back-and-forth between recently used components and quickly add them to the canvas.
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
Shift + X to switch through recently used icons.
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:
Cor select the Comment tool.
- Click over the place on the canvas you want to comment.
- Type something in the input field.
- Click or press
Tip: To write multiline comments, use
Shift + Enter.
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:
- Activate the Avatar tool by pressing
Qor selecting it on the toolbar.
- Click or click and drag on the canvas to place the avatar.
- 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 + Ror Generate avatar in the right panel.
Tips: The default collection of avatars built into Lunacy includes five images, which you can use
Thanks to integration with the generated.photos project, you can also create and customize avatars:
- With an avatar selected, switch the Real-life photo menu to Generated photo in the right panel.
- Change the model’s gender, ethnicity, facial expression, age, and hair color appear in the corresponding input fields.
- When you’re done, click Generate avatar and enjoy the magic!
You can also change the background in AI-generated avatars:
- Select an avatar.
- In the Generated photos section of the right panel, enable the Transparent toggle.
- Click Generate avatar. A new avatar with a transparent background will appear on the canvas.
- In the Fill section of the right panel, click
+. This will add a new fill layer above the image.
- Move the fill below the image layer.
- 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.
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.
With the Slice tool, you can select a specific area on your design and export it.
To export a slice:
- Enable the Slice tool by pressing
Eor selecting it on the toolbar.
- Click and drag over the area you want to export.
- Open the Export tab in the right panel.
- Define the export settings.
- 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
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:
Hor select the Hotspot tool on the toolbar.
- Click and drag over the area where you want to place a hotspot.
- 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:
The Eyedropper tool samples the colors of the elements in your document.
To use the eyedropper tool:
- Select a layer you want to recolor. If you don’t select any layer, the eyedropper will apply the new color to the workspace.
- 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
- 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:
- 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.
The Hand tool is useful for navigating the canvas. To activate it, hold down
Space or the middle mouse button and drag.
Working with the canvas