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.
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.
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.
Create avatars with pictures of real-life models or generate photos using AI.
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.
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.
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.
Tip: Use low-res photos, PNG icons, and illustrations for free as long as you include a link to icons8.com in your final work.
To access high-res photos and editable SVGs without mandatory attribution use our graphics without mandatory attribution, consider our graphics subscription. By subscribing, you'll be supporting our artists and contributing to Lunacy's further development.
Select an image and click Remove background in the right panel to cleanly cut out the subject.
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.
Note: This feature is only available with a paid subscription to our graphics.
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).
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.
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:
Note: Linked design is only available in cloud documents.
Read a more detailed explanation of Linked Design in the documentation.
Sharing your designs straight from the canvas
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.
Speeding up your work with layers
Lunacy has several types of layers. These tips show how to work with them quickly and efficiently.
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.
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.
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.
Layer and text styles
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.
- Select the target layer and press
Ctrl + L/
⌘ + L(or select Copy/Paste as → Copy link in the context menu).
- Select the layer that should lead to the target layer.
F2to rename the layer, paste the target layer link from your clipboard, and press
- Hold down
⌘and click the layer you renamed, and you’ll be redirected to the target layer.
Note: If the layer you set as a starting point is locked, just click on it to be redirected.
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.
Moving layers along straight lines
Shift when moving layers to restrict their movement along the X or Y axis.
Resizing layers with arrow keys
⌘ + arrow keys to resize layers by 1px or
Ctrl + Shift /
⌘ + Shift + arrow keys to resize by 10px.
Advanced text features
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.
Note: A double-click over the right or left border enables horizontal resize mode and transforms multiline texts into a single line.
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.
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:
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.
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
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.
Change the hue, saturation, contrast, and other properties of your images.
To do this:
- Select an image layer.
+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.
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 — rounded rectangle
L — line
L — arrow
O — oval
O — triangle
O — polygon
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.
Add an image fill to any shape based on an image from the Lunacy library or your desktop:
- Drag an image on top of a shape while holding down the left mouse button.
- Hold down
⌘. You’ll see a blue, semi-transparent fill over the layer.
- Release the left mouse button to apply the fill.
Keeping shapes symmetrical
Draw or resize a shape from the center by holding down
⌥ as you’re creating the shape.
To draw symmetrical shapes, 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
Deleting points and handles
When creating shapes with the Pen tool (
P), hold down
⌥ 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.
Note: This method only works with shapes created using the Shape tools.
You can also round individual corners in the right panel.
More tips, more tricks
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.
Right panel properties
If you don’t want a layer to snap to anything when you move it, hold down
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.
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