# Tips and tricks > Tips and tricks to help you work in Lunacy faster and more effectively 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](#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](#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](#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.

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

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. #### 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:

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

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`. **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](#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.

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.

#### 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](#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.

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 #### 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