Tips and tricks

A section for those who don’t read the docs

Lunacy has a lot of useful features that can significantly speed up your workflow, all described in detail across the chapters of the documentation.

If you’re not one to read docs from cover to cover, they’ll probably go unnoticed. So, here’s a cheat sheet of tips and tricks along with demo videos to help you take full advantage of Lunacy.

Ultimate time-savers

These features are aimed to optimize the design process and automate routine tasks, saving you a lot of time and effort while you’re working on your designs.

Text generation

When you need placeholder texts, there’s no need to leave the app and google them. Press T, click on the canvas to add a text layer, and various text generation options will appear below.

What’s more, Lunacy automatically adjusts the font size depending on the width and height of the text box you’re creating. It guesses whether the text box is for a heading, subheading, or paragraph block. Play around with the feature a bit to get a hang of it.

See also:
Text

Avatar tool

Create avatars with pictures of real-life models or generate photos using AI.

Press Q to add an avatar, and press or Generate avatar to refresh it.

To create custom avatars, change the Real-life photo menu in the right panel to Generated photo. Adjust features such as gender, age, ethnicity, and emotion in the right panel, click Generate avatar, and let AI do its thing.

Auto refresh

When you add generated content, like text and avatars, to your designs, duplicating them automatically refreshes the data so you don’t have to change anything manually.

To disable Auto refresh, select Detach from Generated Content in the layer context menu or in the Layer → Content Generation section of the menu bar.

Repeat grid

When you select two or more layers, drag the near the lower-right corner of the bounding box to duplicate the elements in a grid.

If the selected elements include generated content, newly created elements will appear with refreshed data (provided the Auto refresh option is enabled).

On-canvas font size editor

You can change font size directly on the canvas by dragging the circular handle at the bottom of the text layer bounding box:

Icon, illustration, and photo libraries

Browse the Icons, Photos, and Illustrations tabs in the left panel to use free Icons8 graphics in your designs. Choose from different themes and filter them by keywords.

See also:
Libraries
Plans and pricing

Background remover

Select an image and click Remove background in the right panel to cleanly cut out the subject.

See also:
Images

Image upscaler

If you’re working with pictures that happen to be of low quality, use the smart Image upscaler built into Lunacy to enhance the resolution and enlarge image size up to 7680px × 7680px.

Smart Layer list

Toggle the Smart Layer list to only display the layers that you currently see on the canvas. Press to switch between the full and Smart Layer list depending on your needs.

This is useful for really large documents with hundreds or even thousands of layers, when you need to focus on just one area of the canvas.

Color palettes and auto shape colors

Every time you create a new document, Lunacy generates a palette with document color variables including main, accent, background, and text colors. Deselect all layers to see it in the right panel and press to generate a new palette.

To change palette colors manually, click on the color circles to open the color picker. If you want the default shape color to be the usual gray, delete color variables by pressing .

Using the document color palette, Lunacy colors shapes automatically depending on their size and predicted purpose (larger shapes have background colors while smaller elements are assigned primary or accent colors).

Auto Z-index

Lunacy determines the order of layers (the Z-index) on the canvas depending on their size. For example, if you drag a smaller layer (that’s at the bottom of the layer list) over a larger one, Lunacy places the small layer on top.

GUI tool

The GUI tool features a set of basic UI elements you can add to your designs as components. Activate each component by pressing the corresponding shortcut:

B — button
D — text input field
F — checkbox
Y — radio button
J — toggle
W — dropdown

Editing live webpages directly from Lunacy

Use Linked Design to update your designs in live webpages right from Lunacy without bothering developers. With Linked Design, you can copy an embed link to your layers and integrate them right into website code. Then, if you make changes to the layer, click the button in the Linked design section of the right panel and the design on the webpage will update instantly. No need to bother developers about it.

Here’s a short explainer on how it works:

Read a more detailed explanation of Linked Design in the documentation.

Sharing your designs straight from the canvas

Press Alt + С + C / ⌥ + C + C to instantly upload a layer to Lunacy Cloud and copy the link to it to the clipboard. This way, you can share your designs straight from the canvas.

All of your uploads appear in the Cloud uploads list. Switch to the Export tab in the right panel, add an export option, and click to open it, copy links to previous uploads, or delete them from Lunacy servers.

See also:
Export

Speeding up your work with layers

Lunacy has several types of layers. These tips show how to work with them quickly and efficiently.

Auto layout

Use auto layout to create designs that adapt to the content as you change it. When you combine several elements in an auto layout, you can change the distances between and around them instantly using the right panel.

To add an auto layout, select a frame and press Shift + A or click + in the Auto layout section in the right panel. This isn’t only useful for discrete UI elements: you can build entire webpages whose layout adjusts as you adjust auto layout settings or move and resize individual blocks.

On-canvas controls

You can adjust the spacing and padding in an auto layout right on the canvas by dragging the pink handles between and around the elements.

See also:
Auto layout

Snapping frames to presets

A frames is a type of layer that works like a container for your designs, useful for when you’re designing for a specific screen size or device.

When adding a frame (press A to activate the Frame tool), you can choose presets from the right panel. To speed things along, drag the corner of the frame you’re creating to one of the blue + signs that appear on the canvas to instantly snap a frame to a preset.

Copy and paste layer styles

To copy the properties of a layer (fills, borders, and effects), press Ctrl + Alt + C / ⌘ + ⌥ + C. Then, select another layer and press Ctrl + Alt + V / ⌘ + ⌥ + V to paste the layer style to the new layer.

See also:
Layer and text styles

Scaling layers

Press K to enable the Scale tool, select a layer, and use it to resize the layer proportionally without editing individual elements inside them. Along with the size, the scale tool also adjusts layer styles, like borders and shadows. You can select multiple layers and scale them simultaneously.

Hyperlinks between layers

You can create hyperlinks between the layers in your document, even if the layers are in different pages.

1. Select the target layer and press Ctrl + L / ⌘ + L (or select Copy/Paste as → Copy link in the context menu).
2. Select the layer that should lead to the target layer.
3. Press F2 to rename the layer, paste the target layer link from your clipboard, and press Enter.
4. Hold down Ctrl / ⌘ and click the layer you renamed, and you’ll be redirected to the target layer.

Zoom to selection

If you need to quickly zoom into a specific element, find it in the Layer list and double-click the icon next to the layer name.

Alternatively, select it in the Layer list and press Ctrl + 2 / ⌘ + 2.

See also:
Zooming options

Moving layers along straight lines

Hold down Shift when moving layers to restrict their movement along the X or Y axis.

Resizing layers with arrow keys

Press Ctrl / ⌘ + arrow keys to resize layers by 1px or Ctrl + Shift / ⌘ + Shift + arrow keys to resize by 10px.

Advanced text features

Apart from the text generation feature we went over above, here’s a few tips on managing Lunacy’s text layers and formatting options.

Individual word formatting

To format individual words in a text, place the cursor in the middle or at the end of a word and change the text formatting in the right panel.

To format an entire text block, select the text layer and adjust the settings.

Text alignment magnets

You can align text using the alignment magnets that appear around a selected text box. These magnets combine the functions of text alignment and position alignment controls.

This also works when you select multiple ungrouped text boxes. If you want to hide these magnets, disable the option in View → Text Alignment Magnets on the menu bar.

Resizing text boxes

To quickly resize a text box so that it fits right around the text, double-click its vertical or horizontal border.

Adding text to shapes

Select a shape and press T to create a perfectly centered text layer inside it.

This is useful for designing buttons, menus, and similar UI elements. Don’t forget to use the placeholder text generation options that appear any time you create a text layer.

Auto text color

When you add a text layer on top of a layer, Lunacy automatically sets a text color that contrasts with the background to save you a couple of clicks.

Fonts embedding

Embed fonts in an exported document so that when you share it with your colleagues or clients, they won’t have to install any fonts that may be missing on their device. Click Text → Fonts Embedding on the menu bar and embed all or certain fonts into the document.

Converting text to outlines

To convert a text layer to vector outlines, select the text layer and:

• Press Ctrl + Shift + O / ⌘ + Shift + O.
• Select Outline stroke on the context menu.
• Select Text → Convert to Outlines on the menu bar.

Note: Text-to-outline operations are demanding for system resources. Attempts to convert large portions of text may slow Lunacy down.

Mastering image editing

You can import and edit images in Lunacy at lightning speed.

Cutout tool

To quickly cut out a part of an image, select it and press Enter to enable Edit mode. There, choose one of the tools that shows up in the context toolbar above the layer:

• With scissors, you can make a selection with any shape by selecting the shape on the toolbar or pressing the corresponding shape shortcut.
• With the freeform lasso, draw freehand selections on parts of the image.
• Use the polygonal lasso to make selections using paths.

The selection becomes a new image layer you can adjust as you like.

Instant image replacement

To replace an existing image with another one without changing the original’s size, simply drag and drop a new image over it while holding down Ctrl / ⌘.

Adjusting image size during import

When importing an image into Lunacy using the Image tool click and drag to adjust the image size before placing it on the canvas.

Image adjust

Change the hue, saturation, contrast, and other properties of your images.

To do this:

1. Select an image layer.
2. Click + next to Image adjust in the right panel.

Efficient shape editing

Lunacy’s shape tools are varied and have a lot of editing options you can use to speed up your design workflow.

Shape shortcuts

Every shape in Lunacy has a corresponding shortcut, so you don’t have to dig into the toolbar to find the shape you need. Here they are:

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

Editing stars and polygons on the canvas

You can change the number of corners in a star or a polygon in the right panel, but you can do this right on the canvas. Hover the cursor over the second-highest corner of the shape after you draw it.

To change the ratio of a star (the distance from its intersection points to the corners), drag the handles at its intersection points.

See also:
Editing shapes

Image fills

Add an image fill to any shape based on an image from the Lunacy library or your desktop:

1. Drag an image on top of a shape while holding down the left mouse button.
2. Hold down Ctrl / ⌘. You’ll see a blue, semi-transparent fill over the layer.
3. Release the left mouse button to apply the fill.

See also:
Images

Keeping shapes symmetrical

Draw or resize a shape from the center by holding down Alt / ⌥ as you’re creating the shape.

To draw symmetrical shapes, hold down Shift / Shift.

Hold down Alt + Shift / ⌥ + Shift to draw symmetrical shapes from the center.

Drawing horizontal, vertical, and 45° lines and paths

To keep the angle at 90° or 45° when drawing lines, arrows, or paths, hold down Shift.

Deleting points and handles

When creating shapes with the Pen tool (P), hold down Alt / ⌥ and click on an unnecessary point to delete it. To hide one of the handles of a disconnected point, drag the tip of the handles towards the point.

Adjusting a shape’s corner radius

To round the corners of a rectangle, drag inwards from the circular handles that appear at the corners of the shape.

A more convenient way to create rounded rectangles is to double-press R to activate the rounded rectangle shape tool. If you change its corner radius in the right panel and create another rounded rectangle, Lunacy will remember your last corner radius setting.

As for stars and polygons, the corner radius handle appears at the highest corner of the shape after you draw it.

You can also round individual corners in the right panel.

More tips, more tricks

Eyedropper zoom

Lunacy’s eyedropper tool is equipped with a zoom option that comes in handy when the target area is small and you need pixel precision. To use 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 eyedropper zoom mode, press Esc or quickly swipe the cursor anywhere away from the area.

Slices for export

Use the Slice tool (E) for creating slices around your design and then export just the part within the slice.

Changing values in the right panel

To change values in the right panel input fields:

• Type a value manually.
• Click over a field and use the mouse wheel to gradually increase or decrease the value.
• Hover the cursor over a field, wait a moment until the cursor turns into a double-headed arrow, and drag the cursor up or down.
• Enter an arithmetic operation.

See also:
Right panel properties

Disabling snapping

If you don’t want a layer to snap to anything when you move it, hold down Ctrl / ⌘.

Inverting gradients

To quickly invert a gradient, use the button next to the gradient bar on the Color Picker.

Hiding and minimizing UI elements

• Minimize the left panel by clicking on the active content tab.
• To hide the toolbar, right panel, rulers, and any other UI elements, disable them in the View section on the menu bar.
• Hide all UI elements (except for the menu bar) by pressing Ctrl + . / ⌘ + .. This activates Presentation mode, useful for showcasing your designs with no distractions from the interface.

See also:
Interface

Adjusting UI scale

You can change the scale of the interface in View → Interface scale on the menu bar or by using these shortcuts:

• Ctrl + Shift + Alt + + / ⌥ + Shift + ⌘ + = — increase scale
• Ctrl + Shift + Alt + - / ⌥ + Shift + ⌘ + - — decrease scale
• Ctrl + Shift + Alt + 0 / ⌥ + Shift + ⌘ + 0 — reset scale