# About Lunacy Source: https://lunacy.docs.icons8.com/raw/about.md Basic information about Lunacy Lunacy is a next-gen vector graphic design software for UI/UX and web design. #### Faster than Figma, smarter than Sketch Created by designers for designers, Lunacy optimizes your workflow and minimizes distractions. No more wasting time googling suitable icons and photos, switching apps to remove backgrounds, or thinking of placeholder texts. Lunacy takes care of all that, and more. #### Free Lunacy is completely free for personal and commercial use. If you need more freedom with cloud documents, teams, or want to use built-in graphics without link attribution, you can purchase a subscription. #### Cross-platform Lunacy runs on Windows, macOS, and Linux, ensuring compatibility across different operating systems. #### Low system requirements Lunacy isn't demanding on hardware and runs smoothly even on moderate laptops. #### Real-time collaboration Users working on different platforms can collaborate on the same design in real-time. #### Built-in graphics Lunacy comes equipped with a variety of built-in graphics, including **icons, photos, and illustrations.** You can use these graphics for free as long as you include a link to Icons8 in your final work. Or you can subscribe to one of our paid plans and forget about link attribution. Lunacy also has **built-in UI kits** to help you design interfaces faster and more efficiently. #### AI-powered tools Lunacy has a wide range of AI-powered tools that will save you valuable time during the design process: **Background remover** — get rid of photo backgrounds in one click. **Image upscaler** — enlarge images and enhance their resolution. **Avatar tool** — instantly create user avatars when designing contact lists, chats, testimonial carousels, and the like. **Text generator** — forget about lorem ipsum and add meaningful copy to your designs in one click: names, job titles, cities, phone and credit card numbers, and more. #### Work online and offline You can work both with cloud and local documents. Switch between the cloud and local modes whenever you want. **Local documents**: * Privacy — whatever you save to a local file stays local. * Your designs are always available, even on low-bandwidth connections or with no internet at all. **Cloud documents**: * Accessible from any device. * Up to 10 simultaneous editors. * Observer mode, comments, and other collaboration perks. **Private Cloud** * For teams focused on security of their design assets. For details, click here. #### Minimal learning curve If you have experience with Sketch or Figma, you'll feel right at home in Lunacy. The interface and basic features are pretty similar. #### Full support for Sketch files and Figma import The default file format in Lunacy is [.free](https://github.com/icons8/free). However, Lunacy works natively with .sketch files. You can open, edit, and save them back into the `.sketch` format seamlessly. Lunacy can handle both the dusty kits from Sketchappsources and the latest versions of .sketch files. If you need to continue working on designs you made in Figma, import them is as easy as copying the file link, then pressing `Ctrl + V` in Lunacy. #### No limitations Thanks to native support for the Sketch format, you can use Lunacy with all the major handoff and version control tools like Avocode, Zeplin, Abstract, Simpli. If you need to, you can easily import `.sketch` files to Figma or XD. # Auto layout Source: https://lunacy.docs.icons8.com/raw/autolayout.md Learn how to create dynamic designs with auto layout ## Overview **Auto layout** is a powerful feature you can use to create dynamic designs that adapt to the size of their contents. For instance, if you create a labeled button with auto layout, changing the button text will resize the button depending on the width of the text:

If you're familiar with auto layouts, for example the ones in Figma — auto layouts in Lunacy are pretty much the same. Here's a video explainer of the auto layout workflow in Lunacy: If you need more info, all the details about auto layouts are in this section. ### The basics The option to enable auto layout appears in the right panel whenever you select a frame:

In Lunacy, you can apply auto layout to: - **Layers in individual frames**. Auto layout settings apply to the layers inside the frame. Resizing these layers will affect the size of the frame (unless you specify otherwise). - **Several frames**. To do this, put several frames into a container frame, then add auto layout. You can then define the arrangement of the child frames relative to each other. Resizing the child frames will affect the container frame, but changes to layers inside the child frames won’t impact the container — unless the frames have auto layouts themselves, like in the following case. - **Several auto layout frames**. You’ll be able to change auto layout properties for each frame, as well as the container frame they are [nested](#nested-auto-layouts) in. The overall layout will dynamically respond to changes inside the child frames. #### Some things to keep in mind 1. All available auto layout properties are displayed in the right panel:

To view the settings for any auto layout frame, simply select it and refer to this section. 2. Before you apply auto layout to a frame, make sure you have coherently grouped or framed your layers, otherwise your layout might get messed up. In the example below, the top frame features two buttons with their text and background **ungrouped**. The bottom frame has **two groups** containing the elements for both buttons. Here’s how auto layout works for these frames:

Nothing unfixable by `Ctrl + Z`, but still an inconvenience. 3. You can add auto layouts to any frame with any kind of content: the frame can include just layers or a mix of layers and frames. All the elements will be affected by auto layout settings unless you exclude them (for example, using absolute position, which we will go over below). ## [Creating an auto layout frame](#creating-auto-layout) To **add auto layout** to a frame: 1. Select the frame. 2. Press `Shift + A` or click `+` next to **Auto layout** in the right panel. To **place several layers into an auto layout**: 1. Select two or more layers. 2. Press `Shift + A`. The **Auto layout** section will then display the various [properties](#auto-layout-properties) you can apply to your frame.

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.

#### Individual auto layout settings Select elements within the frame to **change their individual auto layout settings**: - If you select a nested auto layout frame, you’ll see the usual **Auto layout** section in the right panel. - If you select an ordinary layer or frame inside an auto layout you’ll see its **individual properties**, which look like this:

## [Auto layout properties](#auto-layout-properties)

#### Resizing options Determine how the container frame responds to changes made to layers inside it: * Set height or width (or both) **Hug** if you want the frame to be resized depending on the size of its contents. * Use the **Fixed** option if you want the frame to remain unchanged regardless of the size of its contents. #### Layout orientation Set a **vertical** or **horizontal orientation** for elements in an auto layout. Vertical orientation arranges elements along the **Y axis**, and horizontal orientation places them on the **X axis**.

To combine both these options, you’ll need to nest auto layout frames in a larger frame. #### Alignment controls Align your layers within the auto layout. Since alignment options will be determined by auto layout settings, this section of the right panel will be unavailable:

Change alignment by: - Clicking on the sections of the square outline or the lines in the middle. - Dragging the alignment blocks to the border you need.

#### Element spacing Define the spacing between elements in an auto layout by: - Entering the values in the **Spacing** fields. - Dragging the values in the fields up or down. - Selecting the field and moving the mouse wheel (additionally hold down `Shift` to change the values in 10px increments). - Selecting the field and using the arrow keys.

#### Padding Determine the distance from elements to the borders of the container frame. Adjust the value in the right panel just like with element spacing. #### Lock/unlock right and bottom padding When you change left or top padding, right and bottom padding will mirror the new values. Click

to change padding for individual sides. If you lock the padding again (click

) after changing values for individual sides, the altered padding values won't revert back to match the opposite side. Enter a matching value on one side of the padding to synchronize the values once more. #### Distribution options Control the way elements are distributed within the auto layout: - With the **Packed** option active, you can freely change the spacing between elements and the padding around them. - **Distribute** creates equal spacing between elements depending on the padding. You will only be able to change padding values, while element spacing will be set automatically.

#### Stacking behavior Determine how elements are stacked when spacing between them is negative. This is useful for designing elements that may overlap in a layout: avatar pictures, images, slides, cards, and so on. The default stacking option is **First on top**, meaning that the top layer in the Layer list will be placed first in a stack. To reverse the order, set this option to **Last on top**:

#### Border inclusion Include or exclude borders from an auto layout. This is useful when, for instance, you have shapes with thick borders in your design: you can set auto layout to apply to just the shapes while ignoring their borders. If borders are included, they will be considered as parts of the shapes:

Note: This setting only affects the borders of the elements inside the auto layout, not the borders of the container frame.

#### Remove auto layout Remove the auto layout from the frame. The spacing and padding you applied to the frame using auto layout will remain, but all other auto layout settings will be removed. #### Individual layer properties You can also **change the properties of layers** within your auto layout. To do this, select a layer to open up its individual Auto layout properties. Here, you can: - **Define the layer’s horizontal and vertical resizing behavior.** **Fixed** is the default option. You can freely change the size of the layer, and the auto layout will respond accordingly. **Fill** makes the layer change its size proportionally when the container frame is resized. You won’t be able to manually resize the layer like with the Fixed option. - **Set the layer to have an absolute position.** With [absolute position](#absolute-position) enabled, you can freely move the layer anywhere you want within the auto layout regardless of its general settings. It won’t be affected by any auto layout properties unless you disable it. Once a layer has an absolute position, you’ll be able to set constraint options for it. Read in detail about those [below](#constraint-options). ## [Removing elements from an auto layout](#removing-elements-from-auto-layout) To **remove an individual element from an auto layout** frame: - Click on it and drag it out of the frame. The remaining elements will adapt to the change based on the auto layout properties. - Select the element in the **Layer list** and press `Del`.

## [Changing elements in auto layouts](#changing-elements-in-auto-layout) This section goes over: - How changes in individual elements affect the overall auto layout. - The absolute position feature and how it excludes elements from auto layouts while keeping them in the frame. - Constraint options and how they influence the behavior of elements in an auto layout. - Adding and resetting component overrides in an auto layout. ### [Resizing auto layout elements](#changing-auto-layout-elements) Auto layout frames will adapt to changes in child element size based on your settings. Here are a few examples of how an auto layout changes depending on the resizing options set for the container frame: 1. The width and height of the auto layout frame are set to **Hug**, so they change depending on the size of the layers inside it:

2. Width is **Fixed**, and height is set to **Hug**. When the width of the elements changes, the width of the parent frame stays the same:

Meanwhile, the frame’s height adapts dynamically when the height of the elements changes. 3. The width and height of the auto layout frame are **Fixed**, so they stay static regardless of the changing width and height of the layers:

### [Absolute position](#absolute-position) To **detach an element from auto layout settings** and move it freely around the frame: 1. Select it in the **Layer list** or on the canvas. 2. Click

in the right panel. The element now has an **absolute position**. You can move it freely within the auto layout and keep it static regardless of any resizing changes, like in the video below. Here, we're adding a logo to an article preview card. At first, we just dragged the logo into the frame. It became part of the auto layout, perfectly aligned along the existing text layers. However, we needed the logo at the top of the card, a bit to the left of the main layout with the texts:

### [Constraint options](#constraint-options) Constraints define resizing behavior for layers in groups or frames. They are also accessible for elements in auto layout frames that are set to absolute position. Once you set a layer to have an absolute position, the **Constraints** section will open up in the right panel:

- The **Pin to Edge** controls pin a layer to one or several edges of the auto layout frame. This means that when you resize the frame, the distance between the layer and the edges it is pinned to will not change. - The **Fix width** and **Fix height** checkboxes do just that: fix the width and/or height of an element in the auto layout. Whenever you resize the parent frame, the checked off properties won’t be altered. ### [Auto layout overrides](#resetting-overrides) You can add auto layouts to any component. Combining [components and auto layouts](#auto-layouts-and-components) brings your workflow to the next level, making it easier to quickly change and update your designs. Read in detail about working with components. #### Resetting overrides When you make **instances** of a component (i.e. duplicate a component), you can make changes to these instances, creating overrides that don't affect the style of the main component. You can reset all overrides by pressing the **Reset overrides** button (

) in the **Component** section of the right panel. This reverts the instance to match the style of its main component once more. However, when you modify auto layout properties for a component instance, the

button also appears in the **Auto layout** section of the right panel. Don't let this confuse you: - The **Reset overrides** button appears in the Auto layout section when you make changes to the **auto layout properties** of a component. Click it to reset these properties and return them to the defaults of the main component. - The same button appears in the **Component** section when you make changes to the **auto layout properties of a component** and/or to **distinct components in the auto layout** frame. Use it to reset **all overrides** for the component: both the auto layout properties and any individual component changes. Here’s how it works:

In the video, there are three component instances nested in a frame that itself is a component. We duplicate it and make changes to the new frame: 1. Changing the element spacing. 2. Changing the padding. 3. Changing the color of one of the button instances. We then press

in the **Auto layout** section to reset just the auto layout overrides (spacing and padding). We undo this, then press

in the **Components** section to reset all overrides (spacing, padding, **and** the button color). ## [Nested auto layouts](#nested-auto-layouts) You can **nest several auto layout frames** in more complex auto layouts to design truly responsive interfaces. This way, you’ll be able to select any distinct element of your design and alter its settings so that the overall layout adapts to changes based on the settings you choose. Here’s an example of how you can combine auto layouts for a simple news website:

From the top down: 1. The **header** is a horizontal auto layout containing the logo, the top menu, and the search button. 2. A smaller auto layout is nested in the header: the **top menu**, which contains links to the other pages of the website. 3. The **left sidebar** is a vertical auto layout. 4. More vertical auto layouts appear in the middle of the website: **news post previews** follow a strict format consisting of a picture, a title, and a subtitle. 5. Several **posts in a row** form a 4-post horizontal auto layout. ## [Auto layouts and components](#auto-layouts-and-components) As we mentioned above, auto layouts are even more powerful when paired with components. For example, if each news post in the layout is an instance of a component, which itself has an auto layout:

Changing the original, or main, component (either its element properties or its auto layout settings) will apply the changes to each instance:

Read in detail about using auto layouts with components. # Basics Source: https://lunacy.docs.icons8.com/raw/basics.md An overview of Lunacy's basic features and capabilities Learn more about Lunacy's features, interface capabilities, and useful tips and tricks to speed up your design process. ## [Working with the canvas](#working-with-the-canvas) #### Navigation If your design is taking up too much space on the canvas, use the mouse wheel to scroll vertically. To scroll horizontally, additionally hold down `Shift`. Another way to navigate the canvas is to hold down `Space` to activate the **Hand** tool and drag the canvas to wherever you need.

You can always use the scroll bars on the right and bottom of the workspace, but it's not as convenient as the other options. #### Zooming in and out The easiest way to **zoom in and out** in Lunacy is by holding down `Ctrl` / `⌘` and moving the mouse wheel. To **zoom slower**, additionally hold down `Shift`.

When the zoom value exceeds 500, Lunacy displays a **pixel grid**. If you want to disable this feature: 1. In the menu bar, select **View → Pixel grid**. 2. Deselect all layers on the canvas and clear the **Show pixel grid** checkbox in the **right panel**. Find out about other [zooming options](#zooming-options). #### Changing the canvas color 1. Deselect all layers. 2. Use the **Workspace color** control in the right panel.

Press

to reset the canvas to the default color. You can also set the canvas color opacity to 0 so it becomes transparent. You'll see a checkerboard pattern instead of a fill. ## [Layer list](#layer-list) Open the **Layer list** by clicking on the **Layers** content tab. It will display the layers on the current page:

Press

to toggle the **Smart Layer list**, which displays only the layers you currently see on the canvas. It's convenient when you want to see only the layers you're working on in the Layer list. Lunacy automatically assigns names to new layers and layer groups. You can always rename them if you like. If a layer name doesn't fit in the Layer list, you can change the width of the panel this way:

Using the Layer list, you can: | Action | Description | |---------------------------------------|------------------| | Select layers | To select a layer or layer group, click its name in the Layer list. A selection frame will appear around the layer. To select multiple items hold down the `Ctrl` / `⌘` or `Shift` keys and click on the layers. | | Search for layers | To locate a layer, start typing its name in the search field above the Layer list. | | Arrange layers | Change the order of the layers in the list by dragging them up or down. Organize layers as you see fit and position them in the order you want them to be stacked if they're overlapping on the canvas. | | Hide layers | To hide layers, layer groups, or individual items inside layer groups, select a layer and click the eye icon next to its name. You can also hide layers by using the `Ctrl + H` / `⌘ + H` shortcut or the corresponding option on the context menu. | | Lock layers | Lock layers, grouped layers, or individual layers within a group to protect them from accidental edits. To do this, select a layer in the Layer list and click the lock icon, press `Ctrl + L` / `⌘ + L`, or use the corresponding option on the context menu. To select locked layers and edit their properties in the right panel, right-click them on the canvas or select them in the Layer list. | Other basic operations with layers are available on the context menu. #### Useful tips To **collapse all layers** in the Layer list, press `Ctrl + ~` / `⌘ + ~`. To quickly **move to a specific layer** in large projects: 1. Find it by typing its name in the search field. 2. Select it in the Layer list. 3. Press Ctrl + 2 / ⌘ + 2 or double-click the icon in front of the layer name to use the zoom to selection feature.

Find out about more useful tips and tricks.

## [Right panel](#right-panel) There are two tabs at the top of the right panel: **Design** and **Export**. #### Design tab The **Design** tab is the one you'll interact with the most when working on your designs. The set of controls and settings it displays depends on the type of the selected layer. These properties are universal for almost all layer types: | Right panel properties | Description | |---------------------------------------------------|-------------------------------------------------------| |

| **Alignment and distribution controls** appear when you select two or more layers. | |

| **Layer size and position.** Change the size of your layers and their position on the canvas. Use the buttons next to the position controls to flip your images and toggle the lock button on and off to preserve aspect ratio when resizing. Controls vary depending on the selected layer. | |

| **Rotation and corner radius.** Rotate your layers and change their corner radius properties. | |

| **Component options.** Use this section to manage components. Create new component states, switch between them, and detach instances from main components. | |

| The **Style** section displays the styles applied to your layer (text styles, color styles, effect styles, etc.) You can add styles from UI kits, create your own, and detach layers from applied styles. | |

| **Opacity and blend mode settings.** Set the overall opacity of a layer and its blending mode. | |

| **Fills.** Change the color of your layer. | |

| **Borders.** Add borders to your layers. | |

| **Effects.** Add effects (shadows, blurs) to your layers. | |

| **Prototyping.** Activate prototyping options and turn your static designs into interactive prototypes. Here's how it works. | |

| **Selection properties.** Shows the colors and fonts used in selected layers. | #### Export tab Click on the **Export** tab to open up export settings for your entire project or select individual/multiple layers to export just them. Read in detail about export settings. Use the **Linked Design** option to include embed links to your designs directly into website code: when you update them in Lunacy, they'll be automatically updated on your website. Learn more about linked design in this section. Also, on the **Export** tab, you can see the displays the code corresponding to selected layers. #### Right panel properties with no selected layers When all layers are deselected, the right panel shows these settings:

* **Workspace color.** Change the color of the canvas. * **Show pixel grid.** Toggles the pixel grid on/off when the zoom value exceeds 500. * **Nudge amount settings.** Nudge layers by moving arrow keys and set custom values for small nudges (using just the arrow keys) and big ones (arrow keys + `Shift`). * **Color palette section.** Use it to generate various base color palettes for your documents. If you need more space, you can hide the right panel panel by selecting **View → Right Panel** on the menu bar. #### 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.

## [Rulers and guides](#rulers-and-guides) **Rulers** and **guides** help to position and align layers. #### [Rulers](#rulers) Rulers are enabled by default and use pixels as a measurement unit. They appear at the top and on the left side of the canvas. To toggle rulers on and off, use the `Ctrl + R` / `⌘ + R` shortcut or select **View → Rulers** on the menu bar. #### [Guides](#guides) To create a guide, click anywhere on a ruler and drag the guide onto the canvas. You can now position layers along the guide. Moving a layer close to it snaps the layer to the guide.

To move a guide, drag it to another position or select it and use arrow keys to nudge it. To remove a guide, click it (hold down `Shift` to select multiple guides) and press `Delete`. You can also open up all of these guide settings by right-clicking over a ruler:

## [Grids](#grids) Lunacy has **square** and **layout grids**. If needed, you can display both of them at the same time. #### [Square grid](#square-grid) If there are no frames on the canvas, Lunacy displays a square grid. Toggle it on and off by clicking the **Show/Hide grid** button on the right panel or pressing `Ctrl + '` / `⌘ + '`. If you have frames on the canvas, use the same button to toggle grids on and off: * **For each frame**. To do this, deselect all frames and layers on the canvas, then press **Show/Hide grid**. * **For an individual frame**. Do the same with a frame or layer selected. To set the size of grid cells, enter the desired value in the **Grid size** field.

#### [Layout grid](#layout-grid) Layout grids are useful for positioning design elements within your [frame](#frames). If you have several frames on a page, you can toggle layout grids on and off for them just like with sqaure grids, using the corresponding button in the right panel. Each frame can have its own layout grid settings:

## Measuring distances Lunacy has a variety of options for measuring distances between elements. The measurement option depends on whether a layer is distinct, grouped with other layers, or nested in a frame. #### Individual layers To **measure the distance between two layers**: 1. Select the first layer. 2. Hold down `Alt` / `⌥`. 2. Hover the cursor over the other layer. To measure the **distance from a layer within a frame to the frame's boundaries**: * Hover the cursor over the layer and hold down `Alt` / `⌥`. * Select the layer, hover the cursor over an empty area within the frame, and hold down `Alt` / `⌥`.

You can also use this function to **position layers in a precise location or relative to one another**: 1. Select one of the layers. 2. Point the cursor over an empty area or over another layer. 3. Hold down `Alt`/ `⌥` and move the selected layer using the arrow keys.

#### Grouped layers Use the steps described above to measure the distances between: * A grouped layer and layer. * Two layers inside the same group. * A grouped layer and the frame boundaries. To measure the **distance between a layer inside a group and the group's boundaries**: 1. Point the cursor over a grouped layer. 2. Hold down `Ctrl + Alt` / `⌘ + ⌥`.

To measure the **distance between a layer inside a group and the borders of the frame where it's nested**: 1. Select a grouped layer. 2. Hold down `Alt` / `⌥`. 3. Point the cursor anywhere outside the other grouped layers.

To measure the **distance between two layers in different groups**: 1. Select a grouped layer. 2. Hold down `Alt + Shift` / `⌥ + Shift`. 3. Hover the cursor over a layer in the other group.

Here's a handy shortcut list for all of the distance measurement options: | Element types | Measurement option | | -------------------------- | --------------------- | | Two separate layers | Select the first layer, hold down `Alt` / `⌥`, and hover the cursor over the other layer. | | A layer inside a frame → the frame’s boundaries | 1. Hover the cursor over the layer and hold down `Alt` / `⌥`.
2. Select the layer, hover the cursor over an empty area within the frame, and hold down `Alt` / `⌥`. | | A grouped layer → individual layer | Select the grouped layer, hold down `Alt` / `⌥`, and hover the cursor over the other layer. | | Two layers inside the same group | Select the first layer in the group, hold down `Alt` / `⌥`, and hover the cursor over the other layer in the group. | | A grouped layer → frame boundaries | Select the first layer in the group, hold down `Alt` / `⌥`, and hover the cursor over an empty area within the frame. | | A layer inside a group → the group’s boundaries | Point the cursor over a grouped layer and hold down `Ctrl + Alt` / `⌘ + ⌥`. | | A layer inside a group → the boundaries of the frame where it’s nested | Select a grouped layer, hold down `Alt` / `⌥`, and hover the cursor anywhere outside the other grouped layers. | | Two layers in different groups | Select a grouped layer hold down `Alt` / `⌥`, hover the cursor over a layer in another group. | ## Zooming options Use the **Zoom tool** and the **Zoom control** to explore more of Lunacy's zooming options. The **Zoom tool** enables you to zoom in to a selected layer or canvas area. To use the tool: 1. Press and hold `Z`. 2. Click on a layer or drag over an area on the canvas (the smaller the area, the higher the zoom value). 3. To zoom out, hold down `Alt + Z` / `⌥ + Z` and click or drag over the layer/area.

The **zoom control** is on the right of the document tabs. To change the zoom value, you can: * Manually enter a zoom value. * Hover the cursor over the zoom control field, wait a moment until the cursor turns into a double-headed arrow, and drag the cursor up or down. * Click over the zoom control field and move the mouse wheel.

You can also alter zoom options using preset values:

Here are all the essential zoom options and corresponding shortcuts: | Operation | Description | Windows shortcut | Mac shortcut | | -------------|-------------|-------------|--------| | Zoom in/out | Zooms the canvas in/out. | `+/-` / `Ctrl + "+/-"` | `⌘ + "+/-"` | | Zoom to 100% | Sets the zoom value to 100%. | `Ctrl + 0` | `⌘ + 0` | | Zoom to All Layers | Shows all the layers on the page. | `Ctrl + 1` | `⌘ + 1` | | Zoom to Selection | Zooms in and displays the selected layer in the center of the screen. | `Ctrl + 2` | `⌘ + 2` | | Zoom to fit width | Zooms the canvas so that all horizontally distributed layers fit the screens. | `Ctrl + 3` | `⌘ + 3` | | Zoom to fit height | Zooms the canvas so that all vertically distributed layers fit the screen. | `Ctrl + 4` | `⌘ + 4` | These options are also accessible through the **View** section on the menu bar:

#### [Show pixels on zoom](#show-pixels-on-zoom) By default, Lunacy displays the canvas in the **vector mode**, which means that all layers (except for rasterized ones) will preserve their quality regardless of the zoom value. If you need to see individual pixels, you can use the **Show pixels on zoom** button. It displays pixels when the zoom value exceeds 100. Here is the same layer with the feature disabled (left) and enabled (right):

You can also toggle this feature on and off in the menu bar by selecting **View → Pixels on Zoom**. ## [Context menu](#the-context-menu) The **context menu** appears when you right-click on a layer. The items on the menu vary depending on the layer you select. Almost all context menu options have shortcuts you can use to speed up your workflow.

These context menu options are universal for almost all layer types: | Context menu button | Description | |---|---| |

| Copy the layer. | |

| Paste an element at the position of the cursor. | |

| Duplicate the selected layer. | |

| Protect the layer from accidental edits. | |

| Hide the layer from the canvas. | |

Tip: With the context menu search, you can find almost any command or shortcut, even those not related to the selected layer. You can even search by the first letters of commands. For example, typing 'cs' or 'c s' will return Copy style.

## Document pages There can be any number of **pages** in a document. You can keep all your work on a single page or split it between several pages. For instance, when designing a website, you can keep the desktop and mobile versions on separate pages. Additionally, you can duplicate a page to save a version of your current design and experiment with the copy. It's completely up to you to decide which approach to choose. Here's what the **Page list** looks like:

It shows up above the **Layer list** when the **Layers** content tab is selected. Use the Page list to: * Add pages * Rename pages * Change the order of the pages * Duplicate pages (with their content) * Copy and paste pages into other documents * Delete pages To **add a new page** to the document: 1. Click the `+` icon above the Layer list. 2. Name the new page. 3. Press `Enter`. To **change the position of a page** in the list, simply drag it to where you want it to be. The rest of the actions are accessible through the **context menu**, which you can access by right-clicking a page name.

There is also a special type of page — the **Components** page. It stores the reusable components. you can create in your designs. ## Advanced privacy settings Turn off some or all of these features for a completely private experience:

All users can disable Google Analytics and Google Fonts, and you can disable the rest of the features with a subscription. # Cloud documents Source: https://lunacy.docs.icons8.com/raw/clouddocs.md Learn how to work with and collaborate on cloud documents In Lunacy, you can work with **local** and **cloud** documents. You can tell them apart by the icons next to their title:

**Local documents** live on your computer. You can access and edit them even when offline. **Cloud documents** are stored on Icons8 servers. They’re accessible and editable from any computer that has Lunacy installed and is connected to the internet. Other advantages of cloud documents include: - **Collaboration and file sharing.** [Collaborate](#sharing-cloud-documents) with other designers over the same project in real time or demonstrate your work to clients. Also, in [observer mode](#observer-mode), you can watch what other users are doing in real time. - **Version history.** Track the [different versions](#version-history) of your document. You can save versions manually or use the ones Lunacy saves automatically after every 100 actions. This isn’t available for local documents. - You can always [save them as local documents](#saving-cloud-as-local) if you need to.

Note: If your team is concerned about the security of their design assets, consider the Private Cloud option.

## [Creating a cloud document](#creating-cloud-documents) To **create a new cloud document**: - In the menu bar, click **File → New Cloud Document**. - Press `Ctrl + Shift + N` / `⌘ + Shift + N`. - On the **Home tab**, click **New Cloud Document**.

## [Opening a cloud document](#opening-cloud-documents) To **open a cloud document**: 1. Go to the **Home tab**. 2. Find your document in the **Recent** or **My Cloud** sections and click it. ## [Sharing a cloud document](#sharing-cloud-documents) You can share cloud documents using both public and private links: - **Public documents** are accessible to **everyone with the document link**. - **Private documents** are accessible through private **one-time** links only. You’ll have to generate a personal link for every user you want to invite to the document. To **share a cloud document**: 1. In the upper-right corner of the canvas, hover the cursor over the **Share** button to open the panel with sharing options. 2. In the dropdown menu on the left, choose whether you want to generate a **private** or **public link**. 3. Next to **Anyone with the link**, select what other users can do with the document: - **Can edit.** This option grants full access to the document, except they won’t be able to delete it. - **Can export.** Users can view and export selected objects or the entire document, as well as inspect the code of the elements in the document. For instance, you can grant export access to developers. - **Can view.** With this access level, users will be able to view the content in the document and copy elements to their own documents. 4. Click **Generate and copy link** and share it. When invited users access your document, their avatars show up next to the **Share** button. You can individually modify their access level, temporarily ban, or remove them from the list:

Personal settings override the **Anyone with the link** setting. ## [Joining a document shared with you](#joining-shared-documents) Once you’re invited to the document, open it by copying its link and pressing `Ctrl + V` / `⌘ + V` anywhere in Lunacy. Alternatively, you can paste the link into your browser. This will either redirect you to Lunacy or prompt you to install it on your device. Documents shared with you appear in the **Recent** section of the **Home tab**, so you’ll be able to access them anytime. If you don't need it anymore, you can remove it from the **Recent** section or leave the document entirely by selecting the option on its context menu in the **Home tab**:

You can also remove yourself from the document in the **Share** panel. ## [Saving cloud documents as local .sketch files](#saving-cloud-as-local) To **save a local version** of a cloud document: 1. In the menu bar, select **File → Save as**. 2. Choose the destination folder and click **Save**.

## [Deleting a cloud document](#deleting-cloud-document) To **delete a cloud document**: 1. Go to the **Home tab**. 2. In the **Recent** or **My Cloud** sections, find your document and right-click it. 3. Select **Delete** in the context menu.

Deleted documents migrate over to the **Deleted** section of the **Home tab**, where you can either **restore** or **permanently delete** them. Be careful with this option.

Note: On the free plan, deleted documents are stored for 30 days. Older documents get archived and cannot be restored. If you need a longer storage period, consider our paid plan options.

## [Observer mode](#observer-mode) Use the **observer mode** to follow the activities of other users on the canvas. To activate it, simply click the user’s avatar in the top-right corner. You will see a colored frame around the canvas, indicating that you’re now observing the chosen user:

Click the user’s avatar again to exit observer mode.

Note: You will only be able to view the user's activities on the canvas. You won't be able to see what they do in the side panels.

## [Version history](#version-history) Lunacy automatically saves a version of your cloud document after every 100 actions. You can also **save versions manually**: - In the menu bar, select **File → Save to version history**. - Press `Ctrl + Alt + S` / `⌘ + ⌥ + S`. There several ways to **view a document’s version history**: - With the document open, select **File → Show version history** in the menu bar. - With the document open, right-click the **document tab** in the top bar, then select **Show version history** on the context menu. - On the **Home tab**, right-click the document and select **Show version history** on the context menu. A panel with the list of document versions will appear on the right side of the interface:

Hover the cursor over the required version and click

to open it. The versions will open as local temporary files that you can save to any folder on your computer and then import back to cloud. You can sort document versions here by the method they were saved: click the **All**, **Auto**, and **Manual** buttons at the top of the panel. For additional options, open the **version history context menu** by right-clicking a version. Using the menu, you can rename, open, copy the link to, or delete document versions:

Note: Free users can access up to 30 days of version history. To unlock the full history of any existing cloud file, subscribe to a Personal Cloud plan.

Apart from cloud documents, you can expand your collaboration options with teams and unlock additional features with our paid plans. # Comments Source: https://lunacy.docs.icons8.com/raw/comments.md Make notes, provide feedback, and share ideas with your teammates Use comments in your documents to leave notes and to-do lists for yourself or share and receive feedback. In Lunacy, there are three type of comments: * [Text comments](#adding-a-text-comment) * [Voice comments](#recording-voice-comments) * [Stickers](#commenting-with-stickers) All shown in the demo below.

Notes:

Comments are only available in cloud documents

If you don't own the document, you'll have to log into your Lunacy account to comment on it.

## [Adding a text comment](#adding-a-text-comment) 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`. ## [Recording voice comments](#recording-voice-comments) To comment with a **voice recording**: 1. Next to the usual comment input field, press the

icon to record your message. 2. Click

to stop recording. Use the

button to listen to the recording or the

to delete it. 3. Click

or press `Enter`.

Note: Make sure Lunacy has access to your microphone, otherwise, this option will be unavailable. If you have several microphones, you can switch between them through Help → Microphone.

## [Commenting with stickers](#commenting-with-stickers) Unlike text and voice comments, which are visible/playable only once you click on the comment markers to open them, sticker comments show up right on the canvas. To **comment with a sticker**: 1. Next to the comment input field, click

to open up a set of **stickers** you can use in place of text comments or as reactions to other users' comments:

2. Click on a sticker to post the comment.

Note: Stickers that you use in replies to comments will only show up inside the chat.

## [Viewing and managing comments](#viewing-and-resolving-comments) By default, comments are always visible on the canvas. To hide them, disable the the **Comments** option in the **Additional options** menu on the top bar:

You can view and manage comments in a document by selecting the **Comment tool** on the toolbar or pressing `C` to enable comment mode. All the comments on the current page will be visible on the canvas. Open and read/listen to comments by clicking the comment markers on the canvas. Clicking the

button on the **top bar** will open up the **Comment panel** in place of the right panel, displayng all of the comments available in the document. Here, you can filter comments by their status (unresolved/all).

### More comment actions - To **move comments**, drag them over the canvas. - Add your text, sticker, or voice message below a comment to **reply** to it, then click

- To **edit/delete a comment**, click

in the top right corner of the comment dialog box and select the corresponding menu option:

- Click

in the top right corner of the comment dialog box to **resolve a comment** (you can only resolve your own comments at the moment). # Components Source: https://lunacy.docs.icons8.com/raw/components.md Increase the speed and productivity of your design workflow with reusable components **Components** are reusable design elements that speed up your workflow and keep your designs consistent. The main advantage of using components is that you can edit multiple instances of an element at once. For example, if you need to make a change to a button that appears in several places in your design, you can update the button **component** and the change will apply to all its **instances**:

## [Component basics](component-basics) These are the basic terms related to components and their functions: * **Main component**. The original layer that you convert into a component. * **Component instance**. You create a component **instance** any time you duplicate a main component. When you edit a main component, the changes apply to all of its instances at once. * **Override**. When you modify an instance, you create an **override**. The main component won't be affected, and if you edit it later, the changes won't apply to instances with overrides. * **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically when you create a component. * **Component state**. Components from the same category or subcategory are called **component states**. They define the different styles for one component. * **Nested components**. You can nest several components in a more complex component. This gives you the most freedom and flexibility in editing your designs, and it’s an even more powerful feature when coupled with nested auto layouts. ## [Creating components](creating-components) To **create a component**: 1. Select the layer you want to convert into a component. 2. Click `+` in the **Component** section of the right panel or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`.

You can also select a layer and click

in the context toolbar at the top of the canvas or select the **Create component** option on the context menu. #### Layers vs. Frames When you create a component from a layer or layer group, Lunacy automatically frames it and transfers it to a separate Components page where it’s stored as a main component. An instance of the newly created component remains on the canvas. If you create a component out of a frame, it will stay on the canvas as a main component, which you can then copy to create instances. The difference is shown here:

Find out more about [component pages](#components-page). #### Components and instances in the Layer list

Main components are bold and colored pink (

) in the Layer list, and there’s a component symbol (

) in front of their name. Component instance names aren’t bold but have the instance symbol (

) and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel. ## [Reusing components](reusing-components) All the components in your document appear in the **Components tab** in the left panel. To **add a component instance** to the canvas, drag it from the left panel to where you want to place it:

Right-click a component in the left panel to bring up the context menu with these options: - Rename component - Edit component - Delete component - Duplicate component - Group - Expand all - Collapse all

Note: If you used any components from built-in or manually created UI kits, they will also appear in the Components tab.

## [Managing components](managing-components) #### [Main component properties](#main-component-properties) When you select a main component, the **Component** section in the right panel displays these properties:

#### Component type Select one of the presets to organize your components by type.

Note: This setting currently has no visible effect. It’s reserved for future use in upcoming releases.

#### Resizing behavior Choose whether to adjust the content of the component when it’s resized. #### Color picker, opacity, and visibility Set the component’s background color and show/hide it by pressing the

icons. #### Include background in export Include/exclude the component’s background when exporting it. #### Include in instances Include/exclude the component’s background in its instances. #### [Components page](components-page) You can use **Components page** that Lunacy generates automatically to store all of your main components. Alternatively, you can turn any page into a **Components page**: 1. Right-click the page in the **Page list**. 2. Select **Set as Components Page**.

Note: If you set one of your pages as a Components page, make sure its primary purpose is to store components. You’ll avoid confusion, and it will be easier to organize all of your design elements.

## [Component states](#component-states) You can create several **states** for a component and switch between them as needed in the **right panel**. To **create a component state**: 1. Select a component instance. 2. Click `+` in the **Component** section of the **right panel** or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. 3. Adjust your component for the new state and name it. 4. Click on any empty area on the canvas.

A new component will appear near the default main component, defining the new component state. Lunacy also changes the name of components when you create new states, automatically placing them into [categories](#organizing-components). You can edit categories anytime in the **Components tab**. New component states for a distinct component will be displayed in the right panel as you select the component’s instances. To **switch through component states**: 1. Select a component instance. 2. Choose the new component state in the **right panel**.

Note: Switching component states doesn’t affect overrides. This means that if you change the component state for an instance with overrides, the overrides you created will stay unchanged.

## Organizing components As your document grows along with the number of components in it, you'll probably want to organize them so you can quickly find the necessary component when you need it. This is how componenet categories and subcategories appear in the **Components tab**:

They also appear in the **Component state** dropdown menu in the right panel. You can manually place your components in categories in the left panel (the **Group** option on the context menu) or use `/` in component names, like this: `Category name / Subcategory name /Component name`. Here's an example with just the category name and component name:

Still, the quickest way to categorize your components is to create [component states](#component-states). #### Deleting components Delete main components from the **Components tab** (using the [context menu](#components-tab-context-menu)) or the **Components page** (simply delete the component frame). When you delete a component, all of its instances turn into frames. ## [Editing components](#editing-components) You can **edit a main component**: - In the **Component editor**. - Directly in the **Components page**. #### Making edits in the Component editor 1. Select a component instance and press `Enter` or choose **Edit component** in the context menu. 2. The main component will appear over the selected instance, while the rest of the canvas will be dimmed. The contents of the component will appear in the **Layer list**. 3. Edit the component. 4. Click

on the context toolbar, click anywhere over the dimmed area, or press `Esc` to exit the component editor.

#### Making edits in the Components page 1. Right-click on an instance and select **Go to Main Component** in the **right panel** or manually switch to the **Components page**. 2. Edit the required component. 3. Once you’re done: - If you used the **Go to Main Component** option, click the **Back to instance** button at the top left corner of the canvas. - If you manually opened the Components page, simply switch back to the previous page to continue working with the document.

## [Swapping components](#swapping-components) Use the **Components tab** or the **right panel** swap between instances from entirely different components. Simply select an instance you want to replace and use one of the following methods. **Method 1**: 1. Go to the **Components tab**. 2. Find the required component and click

next to it:

**Method 2**: 1. Open the **component state menu** in the **Component** section of the right panel. 2. Select the required category and component state.

## [Managing instances](#managing-instances) We already covered how to create component instances to the canvas from the **Components tab**. You can also duplicate or copy/paste instances directly onto the canvas. With a main component or instance selected: - Press `Ctrl + D` or `Ctrl + C → Ctrl + V`. - Hold down `Alt`, then drag to place an instance on the canvas. #### Component instance properties For a component instance, the **Component** section in the **right panel** will look like this:

#### Component state menu A dropdown menu displaying the current state of the component. When open, it shows all other components and UI kits available in the document. If you didn’t create any component states, this property will read **Default State**. #### Component states Select one of the presets to organize your components by type. Changing this for a component instance will affect its main component and vice versa. #### Detach from component Detach the instance from its main component or press `Ctrl + Alt + D` / `⌘ + ⌥ + B`. #### Reset instance size If you resized the instance, click this button to revert it to the size of the main component. #### Go to main component Redirects you to the instance's main component. #### Component type See the corresponding [main component property](#main-component-properties). Once you modify an instance, the

button appears in this section, indicating that the instance has an override:

Click it to **reset the override** and revert the instance back to the style of the main component. ## Creating overrides To reiterate, an override is any edit you make to a component instance. Let's go over them in detail. Click `▾` next to the title of a component instance in the Layer list to expand its contents. You can modify all the layers inside it to apply the changes to **this component instance only**, creating an override:

Some basic overrides you can make are changes to layer color, text, or image content. Below, we have a simple example of a card component consisted of an image (an oval with an **Image** fill) and a labeled button. We make three types of overrides to the card, changing the **button color**, the **button label**, and the **image**.

You can easily reset all of these overrides by pressing

in the **Component** section, like in the demo above. Here’s a full list of layers and properties you can create overrides for: - Fills and images - Text content and properties - Layer and text styles - Auto layouts - Tints - Hotspots #### Understanding overrides To understand how all of them work, we'll use more complex examples. Also, instead of making some overrides (like text and image edits) manually, we'll use some of Lunacy's handy time-saving features like text generation and the Avatar tool. One of the examples we'll use is this profile card UI:

All the components used in the layout are on the left, and their instances are nested in the profile card frame, which is a component itself. When using complex components such as this one, you can easily change the states of the nested components, manually edit them, or modify all instances by adjusting the main component. #### Fills and images The two images in the card are easily editable. The background behind the profile photo is a simple shape with an **Image** fill. To change it in an instance, you only need to click it, then select the **color icon** in the **Fill** section and choose an image:

You can do the same with the profile picture, provided it's a circle with an **Image** fill. To speed up the process, we recommend using Lunacy’s **Avatar tool** for placeholder profile pictures: simply press `Q` to place a randomly generated avatar picture directly onto the canvas. Now, when you make a component instance, a new avatar is generated automatically:

#### Text content and properties You can easily change the text and/or its properties in the component instance text layers. Use the **Text** section in the right panel to: - Change the **content** of the text layer. - Set new **fonts** and **text colors**. - Edit **typographic properties**. - Alter the text’s **advanced settings**. ##### Using generated texts In the demo above, along with the avatar, nearly all of the texts changed to randomized placeholders as well. This is because most of the texts in the layout were generated by Lunacy’s text generation feature. An extensive list of text generation options appears whenever you add a layer using the text tool (`T`). It creates randomized texts for your layouts so you don’t have to do the work yourself. Find out more about text generation. So, when we were creating component instances in the demo above, new texts appeared automatically. #### Layer and text styles In the main component, we used text and color styles to design our layouts. This is a convenient feature for keeping your designs consistent and easily editable. Simply switch styles, create new ones, or edit and delete existing styles in the **Style** section of the right panel:

#### Auto layout overrides When you modify auto layout settings in instances, a **Reset overrides** button appears in the **Auto layout** section of the right panel:

Use it to reset **only the auto layout overrides** in an instance:

Press the same button in the **Components** section to **reset all overrides** in the instance, **including** overrides made to the auto layout. Read in more detail about auto layout overrides. #### Tint overrides A tint is a property you can add to a layer group or component instance. It’s useful for adding color to elements with semi-transparent parts or complex icons. Tint overrides are useful for designing tabs or panels with elements that can have different states expressed through different colors.

Note: You'll need to add default tints before you can create tint overrides.

The demo below shows three instances of the same component. We applied a tint override to one of them, then moved to the main component and modified the default tint. The change applied only to the instances without the override:

When you apply an override, the

button appears in the **Tint** section of the right panel. Use it to remove only the tint override. #### Hotspot overrides If there’s a hotspot in your layout, you can override its target frame. #### None override You can **hide a nested component** using the **None override** option. To do this: 1. Select a nested component. 2. Open the component state menu in the **Component** section of the right panel. 3. Choose **No Component**.

Lunacy will override the component with the so-called **none component**. Later on, you can always override the none component with any other component. ## [Components and auto layouts](#combining-auto-layouts-and-components) You’ve seen how using components makes the design process faster and much easier. Adding auto layouts to the mix speeds things up even more. Creating components with auto layout, then nesting those in larger auto layout frames makes it easy to manage complex designs and quickly update them when needed. If any spacing or padding distances seem off or you’re still in drafting mode, using components and auto layouts is the fastest way to test different versions of your designs. For example, there’s quite a few auto layouts in our profile card examples:

## Component-related shortcuts and menu options To recap, here’s a list of context menu options and shortcuts you can use to work with components, along with corresponding shortcuts, if available. #### Main component options | Option | Description | Windows and Linux Shortcut / Menu Option | MacOS Shortcut / Menu Option | | -- | -- | ----------------------------- | ----------------------------- | | **Create Component** | Create a new component from a layer. You can also click

in the context toolbar at the top of the canvas. | `Ctrl + Alt + K` | `⌘ + ⌥ + K` | | **Convert Component to Frame** | Right-click a main component and select the option to convert it into a frame. All of its instances will also turn into frames. | `Ctrl + Shift + Y` | `⌘ + Shift + Y` | #### Component instance options | Option | Description | Windows and Linux Shortcut / Menu Option | MacOS Shortcut / Menu Option | | -- | -- | ----------------------------- | ----------------------- | | Create New Component State | Add a new state for the component. | `Ctrl + Alt + S` | `⌘ + ⌥ + S` | | Go to Main Component | Brings you to the main component of the selected instance. To return to the instance from the main component, click the **Back to instance** button that appears at the top-left corner of the canvas. | `Ctrl + Alt + E` | `⌘ + ⌥ + E` | | Detach from Components | When you detach an instance from its main component, it becomes a group. All further changes to the main component will no longer apply to the detached instance. | `Ctrl + Alt + D` | `⌘ + ⌥ + B` | | Detach from Library | This command only applies to components from UI kits. Detached components become native to the document and appear on the **Components tab** and the **Components page**. | `-` | `-`| | Reset Instance Size | Restore the original size of any component instance. | `Ctrl + Alt + R` | `⌘ + ⌥ + R` | | Reset Overrides | Use this command to undo all overrides and revert the instance to the style of its main component. You can also use the Reset overrides button in the **Component** section of the right panel. | `-` | `-` | | Send to Component page | This command only applies to main components and becomes available when a component isn't on the dedicated **Components page**. | `-` | `-` | # Editing shapes Source: https://lunacy.docs.icons8.com/raw/editing_shapes.md Make sure that you know everything about working with shapes in Lunacy **Shapes** are types of layers in Lunacy, typically created with the Shape tools.

The tools include several pre-made shapes you can add by selecting the Shape icon on the toolbar — or simply by using shortcuts: `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 Once you select the shape: - **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.

Find out more about working with different types of shapes. You can also make shapes using the Pen and Pencil tools. Create vector paths, then close them to make a shape outline you can then edit.

This section focuses on how to edit and transform the form of vector shapes using the standard layer **Edit mode**, on-canvas controls, Boolean operations, and the right panel. To learn about adding fills, borders, and effects to shapes and other layers, check out the Styling page. **See also:**
Tools
Layers ## Edit mode The most basic way to edit a shape is to use **Edit mode**: 1. Select the shape you want to edit, and press `Enter`. You can also double-click the shape or select

on the context toolbar. 2. The cursor will switch over to the **Pen** tool. You can drag the paths and vertices of the shape as you see fit, add new points and adjust their properties in the right panel. 3. Press `Enter` again or click on an empty area on the canvas to exit Edit mode.

## On-canvas controls for editing shapes ### Corner radius **Round the corners** for any shape (except for the triangle) by dragging the handles at the corners of the shape on the canvas. For **rectangles** or **rounded rectangles**, drag any of the handles at the corners to adjust their radius. To change the radius of an individual rectangle corner, hold `Alt` while dragging.

For **stars** and **polygons**, drag the handle below the topmost corner of the shape.

#### Smooth corner radius You can create rectangles and frames with perfectly smooth corners like in iOS interfaces. To **switch between default round and smooth corners**, click

next to the corner radius button in the right panel.

### Arc editor With the **Arc editor**, you can quickly create rings and semirings, design pie charts or other fancy circular elements. Draw an oval and use the handles in the middle of the shape to adjust its sweep and ratio. **Sweep** creates a gap in the oval, while **Ratio** changes the oval into an arc. Once you change the sweep, the **Start** handle will also appear on the shape, indicating where the arc begins.

### Transforming stars and polygons You can change the shape of stars and polygons right on the canvas without reaching into the right panel. To **change the ratio** of a star, drag the handles at the inner intersection points of its sides.

To **change the number of corners** in a star or polygon, drag the handle below the shape’s top right corner.

Note: For shapes with distinct corners created with the Pen tool, you can only adjust the corner radius. This option will only be available in the right panel, these shapes won’t have any on-canvas handles.

## Editing shapes through the right panel Use these fields in the **right panel** to transform shapes:

The transform options mirror the on-canvas controls: **Corner radius.** Rounds the corners of a shape. Available for most of pre-made shapes, except for ovals, triangles, lines, and arrows. **Count.** Adjusts the number of points for stars/the number of angles for polygons. **Ratio.** Changes the ratio of a star or oval. **Sweep.** Creates a gap in an oval. **Start.** Determines the starting point of an arc made from an oval.

## Vector editing This section expands on **transforming vector shapes and paths** with **Edit mode**.

Note: Before diving in, make sure you have a good understanding of how the Pen tool works. Read about the Pen tool in the Tools page to get a hang of the structure of vector layers, paths, point and curve types.

In general, vector editing is all about manipulations with points and paths:

- To **select a point**, just click it. To select multiple points, drag over them or hold down `Shift` when clicking several points. - To **move a point**, select and drag it. This works with multiple points selected as well. - To **add a new point** to a path, hover the cursor over the path, then click it to place a straight point or double-click to place a mirrored point. - **Switch between point types** in the **Edit shape** section of the right panel. - To **bend paths**, use curved points. - To **round the corner** above a straight point, use the corner radius field. It only becomes active when you select a straight point. - To **delete a point or several points**, select it/them and press `Delete`.

## Boolean operations Use **Boolean operations** to combine shapes into more complex forms:

1. Select two or more overlapping shapes. 2. On the **context toolbar**, select the Boolean operation you need. - **Union.** Creates a shape from the sum of the areas of the selected shapes (`Ctrl + Shift + U` / `Ctrl + Shift + U`). - **Subtract.** The opposite of Union. Removes the overlapping area(s) from the shape layer at the bottom of the selection (`Ctrl + Shift + P` / `Ctrl + Shift + P`). - **Intersect.** The resulting shape only includes the area where all selected shapes overlap (`Ctrl + Shift + I` / `Ctrl + Shift + I`). - **Difference.** The opposite of Intersect. Creates a shape from the areas where the selected shapes do not overlap (`Ctrl + Shift + X` / `Ctrl + Shift + X`).

When you apply a Boolean operation, the selected shapes become a Boolean group, this is how it looks in the Layer list:

The icon next to the title of the shape layers indicates the type of the Boolean operation applied to the layer. Click it to open up a menu where you can select another operation or remove Boolean operations entirely. You can select individual shapes within the group through the Layer list or on the canvas. If necessary, you can move and resize them on the canvas to modify the resulting shape.

Tip: There is no button or shortcut to disassemble a Boolean group, but you can drag shapes out of the group in the Layer list. Read the full list of useful Lunacy tips and tricks.

## Flatten selection The **Flatten selection** operation is another method of creating complex forms by combining two or more primitive shapes. It’s similar to the Boolean Union operation, the difference being that the result of flattening is a single layer that cannot be disconnected.

The **Flatten selection** option appears on the **context toolbar** and is also available in the **Layer** section of the **menu bar**.

## Masks Use **masks** to display parts of layers and hide the rest. To **create a mask**: 1. Add the shape you want to use as a mask to the canvas. 2. Place it below the layers that will be masked (you can leave it on top if it's a photo). 3. Select the mask shape and the target layer(s). 4. On the **context toolbar**, click the **Toggle mask** button (

) or press `Ctrl + M` / `⌘ + M`. The option is also available on the context menu.

Note: When you're masking a shape with another shape, the layer you want to act as a mask should be placed below the layer that will be masked. If you're masking out part of a photo, however, you can leave the masking shape on top.

When you apply a mask, Lunacy creates a mask group:

You can select the mask shape right within the group and move, edit, or resize the mask. To remove a mask, select the mask group in the **Layer list** or on the canvas and press `Ctrl + M` / `⌘ + M`. ### Outline stroke The **Outline stroke** command (`Ctrl + Shift + O` / `⌘ + Shift + O`), when applied to shapes, converts borders into separate layer. It appears on the context menu when you select a shape that has a border (you can also find the option in the **Layer** section of the **menu bar**).

You can also use this command to convert text layers to vector outlines. ## Rasterizing vector shapes You can rasterize any vector layer in Lunacy to create pixel images (when you need elements as simple images, for example).

To **rasterize any shape** (or path): 1. Select it. 2. Right-click the selection, then select **Rasterize selection** on the context menu. This option is also available in the **Layer** section of the **menu bar**.

Note: Keep in mind that you cannot convert a raster back into a vector shape. Ctrl + Z / ⌘ + Z will always help you out, though.

**See also:**
Show pixels on zoom # Export Source: https://lunacy.docs.icons8.com/raw/export.md Learn all about Lunacy’s export options and settings ## Overview Export your designs from Lunacy using the **Export** tab in the **right panel**:

You can export nearly any element from Lunacy, including: - Individual or multiple layers and layer groups (separately or as a single image) - Frames (with and without the frame background) - Content within slices - Document pages - Entire documents With a single export operation, you can get multiple files of different formats and sizes. **Supported formats** include: | Format type | Supported formats | | ----------- | ---------------------------------- | | Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `GIF` | | Vector | `SVG`, `PDF` | You can save exported files **to your computer** and also [upload your layers](#cloud-export) to **Lunacy Cloud**, generating a shareable link right to the layer in the document. ## Basic export rules 1. During export, Lunacy **ignores:** - Guides - Square and layout grids - Frame names - Prototyping arrows - Canvas color (not to be confused with frame background color) There is no way to include these elements into exported files. 2. If there is **at least one frame** in your document, when you use the **Export Document** option, Lunacy will ignore all **layers located outside of frames**, as well as **main components**. 3. The **maximum height and width** of resulting raster files is **16,000 pixels**. ## Export settings Open the **Export** tab to export a layer or the entire document: 1. Select a layer (or several) or deselect all layers if you’d like to export the document. 2. Click `+` next to the **Export**/**Export document** section. 3. Adjust the export options, then click the **Export Selected**/**Export Document** button. All export options, including advanced export settings, are displayed in the **Export** section. Its appearance depends on what you select on the canvas. With a layer selected, you will see these settings:

#### Export size By default, Lunacy exports layers at their original size (**1x**). You can change it to any of the preset scales or set your own (e.g., 8x, 10x, or 0.3x). #### Prefix/Suffix Defines the suffix or prefix of the export's file name. For any export size larger than 1x, Lunacy generates a default a default `@` suffix, but you can enter your own in the input field (use only letters and numbers). #### Format Choose any of the available export formats. When exporting to `SVG` or `PDF`, you won’t be able to adjust the export size. It will be 1x by default. #### Publish to Web Publish any layer to **Lunacy Cloud** and get a shareable link to it. Read in detail about [working with cloud uploads](#cloud-export). #### Show all cloud uploads Click

next to the **Export** section title to open up the **Cloud Uploads** subsection. #### Add export option Click `+` to add another export option. This lets you export the same element in different formats, sizes, and other settings. #### Remove export option Click

next to an export option to remove it. #### Additional export options Click

to open up additional export options. Here, you can: - Choose a preexisting export preset. - Create a custom export preset. - Remove all export options. - Create a slice to export a part of the selected layer or frame.

Note: When nothing is selected, the Export document section opens up. All the settings are the same, except for the Upload to Cloud option, which isn't available.

## Export presets An **export preset** defines specific export settings that you can reuse across your documents. You can use built-in presets or create your own. Presets are especially useful when, for example, you consistently need to export UI prototypes in specific formats and sizes for your clients, you won't need to manually adjust the settings each time you export the designs. #### Creating an export preset You can do this by: - Saving current export settings as a preset - Defining export settings for the preset in the **Additional settings** menu To **save current export settings**: 1. Define the required export settings for your design in the **Export** section of the right panel. 2. Click

next to the section title to open up additional options. 3. Select **Create preset**, name it, and click **Save**.

To **define export settings for a preset**: 1. Click

next to the **Export section** title. 2. Select **Create preset**. 3. Define the export settings, name your preset, and click **Save**. Create as many presets as you need. 4. You can use the preset for the current and future exports. ## Exporting elements from Lunacy #### Exporting single and multiple elements To **export a single element**: 1. Select the element (a layer, frame, component, etc.) 2. Open the **Export** tab and click `+`. 3. Define the **export settings** or use a **preset**. 4. Click `+` again to more export options if needed. 5. Click **Export Selected**. 6. Choose the export folder. 7. Once the export is complete, you’ll get an ‘Export completed’ popup with the prompt to open the file location so you can view the resulting exports. To export **multiple elements**: Exporting multiple elements is no different. The **Export as Single Image** checkbox will appear in the settings so you can choose to export selected elements in a single file:

Also, when you select multiple layers or frames that already have defined export settings, you will see a **Click `+` to replace mixed content** message in the **Export** tab. Click `+` to clear the export settings for all elements and define new ones:

#### Including frame backgrounds in exports When you set a background for a frame, its properties in the **Design** tab will have the **Include in export** checkbox. Select it if you want the background to be visible in the exported file. #### Using slices for export **Slices** are special layers you can use to export certain parts of your designs. To **add a slice** to the canvas: * Select the Slice tool in the toolbar or press `E`. Your cursor will change to the

icon. Click and drag to create a **slice**, which you can adjust to include parts of the elements you want to export. * When defining export options for the element, select **Create slice** in the **Additional export options** menu. When you select a slice, two additional settings appear in the **Export** section:

**Trim Transparent Pixels**. With this option enabled, Lunacy crops out unnecessary transparent pixels within the slice. This can be useful when you’re creating slices by hand using the **Slice** tool. **Background**. Defines the background color that appears in place of transparent pixels in the export file. To **export the content of a slice**: 1. Select one or multiple slices. 2. Export it just like any other element, taking into account the **additional settings** for slices.

To show/hide slices on the canvas, select or deselect the **Slices** option in the **Additional options** menu from the top bar:

#### Exporting document pages To **export all of the content in a document page**: 1. Use the `Ctrl + A` / `⌘ + A` shortcut to select all layers and frames on the page, **except for locked layers**. 2. Export it like any other element. #### Exporting documents There has to be at least one frame inside the document if you want to export it. Also, keep in mind that when exporting a document, Lunacy ignores, **layers that are not framed** and **main components**. When exporting documents, Lunacy creates folders with names corresponding to the names of the **document pages**. Inside these folders, Lunacy creates **separate files for each layer** available on the respective page. Grouped layers and component instances are considered single layers. To **export a document**: 1. Press `Esc` to deselect all layers. 2. Click `+` next to **Export Document** in the **Export** tab. 3. Export it like any other element. The **Suffix/Prefix** and **Publish to Web** options are unavailable for document exports. ## [Cloud export](#cloud-export) You can **upload your designs** to Lunacy Cloud and instantly share them with other people: 1. Select the layer you want to export. 2. Define the **export settings** or use a **preset**. 3. In the **Export** section of the **right panel**, press the **Publish to Web** button (

). 4. The **Cloud export history** list will appear below, displaying all previous uploads, starting from the most recent. 5. Click the copy link icon (

) next to the uploaded layer and share it:

Note: Alternatively, select a layer or frame and press Alt + С + C / ⌥ + С + C to instantly upload it to Lunacy Cloud. Lunacy will automatically copy the link, so all you have to do is paste it anywhere to share it. This option is also available on the context menu. Discover more tips and tricks for a faster workflow.

### Cloud export history Lunacy keeps a history of your cloud uploads. It opens up whenever you upload a layer to cloud, and you can view it anytime by clicking the **Show all cloud uploads** button in the **Export** section. ### Deleting cloud uploads To **delete a link** to your desing from the history **and** our cloud servers, click the trashcan icon (

) next to it:

Alternatively, right-click the link and select **Remove this file from Lunacy servers**. To **delete all cloud uploads**, click

next to the **Cloud uploads** title.

Note: We do not read or analyze the files that you upload to cloud. The guaranteed storage period of uploaded files is 60 days. After that, they can be deleted from our servers without prior notice. Deleted files cannot be restored.

## Code preview The **Export** tab already displays the basic properties of your selection at the top, as well as its **Linked Design** code.

Tip: Using Linked design, you can export your layouts for use on live websites simply by pasting a link directly from Lunacy into website code. This way, when you update the linked frame in Lunacy, the changes will be instantly reflected on the webpage — no need to bother the developer team. Learn to use this time-saving feature to your advantage.

To see more code properties and options, open the **Code** tab, where you can view and copy the CSS, XAML, JSON, and SVG code for any layer in your document: 1. Select a layer. 2. Open the **Code** tab in the **right panel**. The tab displays CSS code by default. **Switch the code language** in the dropdown menu at the bottom right corner of the panel:

# FAQs Source: https://lunacy.docs.icons8.com/raw/faq.md Frequently asked questions about Lunacy ## General questions Common questions about the app and its functionality. ### I’m new to Lunacy. Where do I start? We have an interactive tutorial with a step-by-step beginner’s guide to our app. Open it in the Home Tab by clicking **Tutorial** at the bottom of the left sidebar. You can also: - Check out step-by-step tutorials on our blog. - Read more sections of this documentation page. - Subscribe to our Youtube channel for more Lunacy tutorials. ### Is Lunacy really free? Yes. Lunacy is absolutely free: there’s no hidden charges, ads, or locked features. Our built-in graphics (icons, photos, and illustrations) are also free for use in personal and commercial projects, as long you include a link to Icons8. You can purchase a paid subscription to use them without link attribution and get access to higher resolution icons and pictures. We also have professional plans for users and teams that offer more powerful options for working with cloud documents and collaborating with others. ### Do I need an internet connection to use Lunacy? Not always. You can work on local `.sketch` documents on your computer without an internet connection. However, you’ll need to be online to access your cloud documents or work with the content in our built-in Libraries. ### Can I downgrade Lunacy to a previous version? Yes. To do this: 1. Uninstall Lunacy. 2. Download the required version and install it. The full list of versions with links to installers is here. ### How can I be sure that I won’t lose my work if Lunacy crashes? Lunacy has a mechanism that auto-saves all of your actions, both for local and cloud documents. If Lunacy suddenly crashes, it will re-open the document right where you stopped. ### Why does my antivirus flag Lunacy as suspicious? There are no viruses or spyware in Lunacy. In some rare cases, false positives might occur. If you installed Lunacy from the Microsoft Store, keep in mind that apps can’t appear in the Store until they’re thoroughly checked for malicious code. If you downloaded Lunacy from our website and want to make sure everything’s OK, you can upload and scan the installer at VirusTotal. It is a free, reliable online antivirus service. After that, make an exception for the Lunacy installer and/or the app in your antivirus so that it runs smoothly. ### How do I report a bug? Contact us via our feedback form: 1. Select **Help** → **Report a Problem** in the menu bar. 2. Describe the problem in detail so we can reproduce it and determine the cause. **Memory dump files** contain useful information about bugs and malfunctions such as crashing and freezing events. Here's how you can find them on your OS. Attaching them to your report helps our team determine and fix the issue much faster.

Note: If a problem appears only in one specific document, please attach it to the report. Your content is safe: we will delete the file from our system after investigation.

### Are you planning to go open source? **Short answer:** Not at the moment. **Long answer:** We realize this would speed up the development process, however, it would also slow us down in some ways, too. Sometimes, a small team can advance faster than a large community. We may reconsider in the future. ## Questions about features Questions about existing or upcoming Lunacy features. ### Where can I get plugins? We removed support for external plugins in version 8.0. That was a trade-off we had to make to release Mac and Linux versions. We’re going to restore the feature in an upcoming release. ### Can I enhance Lunacy’s performance by adjusting video card settings? If your computer has a discrete video card, you can adjust your graphics settings so that Lunacy always uses the discrete card. These steps will work for the majority of Windows 10/11 computers: 1. Go to **Start → Settings → Display → Graphics settings**. 2. Click **Browse** and find the `Lunacy.exe` file (default path: `C:\Program Files\Lunacy\Lunacy.exe`). 3. Click **Options** and set the **Graphics preference** to **High performance**. ![nvidia_settings](public/nvidia_faq_2@2x.png) If you are running an older Windows version, you can try to do the same using your video card control panel. Here are the required settings for an NVidia card: ![nvidia_settings](public/nvidia_faq_1@2x.png)

Note: These settings won't work in energy saving mode and with some specific system configurations.

### Can I change the radius of a specific corner in a shape? One of our most popular questions😉 Check out the demos here, here, and here. ### Where is the suggestions panel? We decided to revamp the suggestions panel. We’ll add the new version to an upcoming release. ## Questions about possible issues If you run into a problem with Lunacy, chances are, you’ll be able to fix it by yourself. Below is a list of problems that may arise and workarounds for them. ### Lunacy won't start. What do I do? There may be several reasons for this. Make sure that: - Your operating system is up-to-date. - The OS you are using is compatible with Lunacy. The app is intended to run on Windows 10 and 11, Mac OS, and Linux. You can try to run it on Windows 7 and 8, but we don’t guarantee Lunacy operating smoothly on these versions. - You are not using an insider build. - The latest stable version of your video card driver is installed. - Your user account has enough rights to run applications. Try to run Lunacy as an administrator. - Lunacy isn’t being blocked by your antivirus. Disable virus protection and try to launch Lunacy. ### Lunacy is slow. How do I speed it up? These are the most common reasons for Lunacy running slow: - **Too many large images in a document.** This often happens when you import a lot of high-resolution images and then shrink them to the required dimensions. *Workaround:* Replace the images with optimized copies. - **Too many shadow and blur effects.** *Workaround:* Avoid excessive usage of shadows and blurs. - **Too much heavy content on one page.** *Workaround:* Split up your project into several document pages. This isn’t only useful for optimization, but for organizing distinct parts of your designs as well. - **Large amount of text converted to outlines.** *Workaround:* Avoid converting large blocks of text (long sentences or paragraphs) to outlines. ### Why is the content in Lunacy Libraries not loading? It might just be a problem with your internet connection. First, check it to make sure it's stable. If it is, contact us via our feedback form and we’ll quickly fix the issue with the Libraries (**Help** → **Report a Problem**). ### A document I was working on is broken and/or won't open. How do I fix it? To fix this: 1. Make sure you have the latest version of the app installed. 2. Select **Help** → **Open App Data Folder** in the menu bar. This will open up a folder with Lunacy files. 3. Open the **Documents** folder. It contains subfolders with all of the documents you previously worked on. For convenience, you can sort them by the **Date modified** column. 4. Try to remember the date when you last modified the document, then drag and drop the subfolders with that modification date onto the canvas. Lunacy will restore the document. If it’s a **local** document, its temp file `.lunTempFileSave` may not have been saved as a proper document. To restore it: 1. Follow the steps above to find it in the **Documents** folder. 2. Change its extension to `.sketch` and open it in Lunacy. If it’s a **cloud** document, you can also open up its version history and restore one of the saved versions: 1. On the **Home Tab**, right-click the document’s preview to open up the context menu. 2. Click **Show Version History**. 3. Click

to open the previous versions of the document. 4. Choose the required version and click **FIle → Save** in the menu bar to save it as a local `.sketch` file on your device. 5. Import it back into Lunacy Cloud. If the problem persists, contact our support team (**Help** → **Report a Problem**) and attach an archive with the **Documents** folder to the report. If Lunacy crashed when you tried opening the document, attach an archive of the **Logs** folder as well. ### I lost a local temp file that was never saved as a `.sketch` document. Where is it? 1. Select **Help** → **Open App Data Folder** in the menu bar. 2. Open the **Documents** folder and sort the folders there by the **Date modified** column. 3. Drag and drop the top folders in the list into Lunacy. One of these is your unsaved temp file. ### Why is there a ‘No connection’ message in the left panel instead of icons? An issue in **version 8.7.2** that we fixed in our latest beta build. Install it using one of these links: * Windows 32bit * Windows 64bit * MacOS .pkg * MacOS .dmg * Linux deb64beta * Linux debARMbeta Later on, if you decide not to update to further beta versions, select **Help** → **About**, then clear the **Check for Beta Updates** checkbox. ### Why are layers and images on the canvas stretching and flickering when I scroll and zoom? This is a known issue that usually occurs on Windows 10 computers with Intel CPUs and specific video card models (for example, the GeForce RTX 20 Series). To fix this: 1. Install the latest stable version of your **video card drivers** from the manufacturer’s website. 2. Install the latest update of the **Intel chipset driver** from the manufacturer’s website. 3. Make sure that your operating system is up-to-date. If that doesn’t help: 1. Open the **Task Manager** and select the Services tab. 2. Stop the `Nahimic` service (an audio service). 3. Restart Lunacy. If this works, report the problem to the manufacturers of your video card and motherboard. If not, contact our support team (**Help** → **Report a Problem**). ### Advanced troubleshooting If the issue persists, we may need to investigate memory dump files to pin down the problem. You can find them on your system and attach them to your bug report: this will make it significantly easier for Lunacy Support to fix your problem. # Images Source: https://lunacy.docs.icons8.com/raw/images.md Optimize your work with images in Lunacy This section covers how to work with raster images. Lunacy supports these image formats: `PNG`, `JPG`, `JPEG`, `WEBP`, `BMP`, `ICO`, `GIF`, `SVG`. The `TIFF` format is not supported. ## [Adding images to the canvas](#adding-images-to-the-canvas) There are several ways to **add images to the canvas**: - Using the **Image tool** to add images from your computer - Importing images from Lunacy’s **Photos** library - **Drag-and-dropping** images from the file explorer - **Copying images** from your desktop or browser and paste it onto the canvas - **Importing images** from your web browser via link #### Using the Image tool To add images via the **Image tool**: 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 on the canvas to place the image to add the image in its original size or click and drag to adjust the image size before placing it on the canvas.

#### The drag-and-drop method You can always simply **drag and drop images** from your files into Lunacy.

Alternatively, you can right-click on an image in your file explorer or browser and select **Copy image**, then simply paste it onto the canvas. #### The Photos library To use **images from the Lunacy Photos library**: 1. Open the **Photos** tab in the left panel. 2. Choose an image, then **drag and drop** it onto the canvas.

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.

#### Importing images from the browser There are two ways to **import an image from your browser** via link: - Right-click the image in your web browser and select **Copy image address** from the context menu. Switch to Lunacy, press `M` for the **Image tool**, then paste the image URL in the file name input field. Finally, click **Open**. OR - Right-click the image in your web browser and select **Copy image address** from the context menu. Switch to Lunacy, right click over the canvas, and select **Paste here** from the context menu. Click **OK** in the Paste as image dialog box. If you click **Cancel**, Lunacy will paste the text of the image address.

Note: This method works only when a web site provides direct links to images with an image extension at the end (.jpg, .png, etc.)

### Adding image fills You can also add images directly to your layers (including shapes, frames, and text layers). They will act as a layer background you can replace or modify anytime. To **add an Image fill**: 1. Make sure your layer has a fill. If it doesn’t, click `+` next to the **Fill** section of the right panel with a layer selected. 2. Click on the color swatch in the **Fill** section to open up the color picker. 3. In the top bar of the color picker, click

. 4. Select an image from on your computer and click **Open**.

Use the drop-down list below the **Choose image** button to select the fill method: - **Fill**. Adjusts the image size to the layer’s width. - **Fit**. Adjusts the image size to fit the layer’s height. - **Stretch**. Stretches the image to fit the layer’s width and height. - **Tile**. Duplicates the image in a tile pattern to fit the layer. The size of tiles is adjustable. ## Replacing images There are two ways you can replace images. The first is to select an image and click the **Replace image** button in the **Image** section in the right panel. This only works for images [added directly to the canvas](#adding-images-to-the-canvas).

To **replace an image fill**, select the layer with the fill, click the swatch in the **Fill** section, then **Choose image**.

Tip: You can also use these methods when you need to replace your current image with an image from the internet. Just paste the URL of the new image into the File name field of the Open dialog box and click Open.

Another quick way to **replace an image or image fill** is by holding down `Ctrl` / `⌘` and drag-and-dropping an image from your desktop or the **Photos** library onto a layer, like in the demo below.

Read the full list of Lunacy’s tips and tricks. ## Editing images ### Cropping images To **crop an image**: 1. Select the image. 2. Press `Enter` or click

on the context toolbar to enable **Edit mode**. 3. Crop the image, then press `Enter` again or click the Apply editing button in the right panel.

### Image upscaler Whenever you need to enhance the resolution and quality of an image, use the AI-powered Icons8 Image Upscaler built into Lunacy.

When you add an image to your document, the **Upscale image** prompt appears above it. Click it and wait a few seconds as the Upscaler enhances the image.

Note: The feature only is available to users with any paid subscription to Icons8 graphic assets.

### Background remover To **remove a background** from an image: 1. Select the image. 2. In the right panel, click **Remove background**.

### Cutting out a part of an image You can cut out part of an image so it becomes a new image layer that you can adjust as you like. To **cut out a part of an image**: 1. Select the image. 2. Press `Enter` to enable **Edit mode**. 3. Choose one of the selection tools that show up below the image: - **Scissors**. With scissors, you can make a selection with any shape (rectangle, ellipse, triangle, etc.) by selecting the shape on the toolbar or pressing the corresponding shape shortcut. - **Freeform lasso**. With the freeform lasso, draw freehand selections on parts of the image, just like with the Pencil tool. To close the selection border, just release the mouse button. - **Polygon lasso**. Use the polygonal lasso to make selections using paths, similar to using the Pen tool. To disable snapping while drawing the selection, hold down `Ctrl` / `⌘`. 4. Once you have an area selected: - Press `Delete` to remove it completely. - Move the selection to where you want it to be. In this case, Lunacy creates a vector shape with an image fill that corresponds to your selection and automatically fills the emptied area with the color that’s prevalent along the selection border.

### Image filters Change the hue, saturation, contrast, and other properties of your images. To do this: 1. Select one or several image layers. 2. Click `+` next to **Image filters** in the right panel. 3. Drag the sliders to adjust the image.

These adjustments are all reversible. You can discard all changes and restore the original image by clicking the Reset values (

) button next to the section header. # Interface Source: https://lunacy.docs.icons8.com/raw/interface.md Explore the Lunacy interface Get acquainted with the Lunacy's interface so you can get started with your designs right away. In this section, you will learn about the basic elements of the [main view](#main-view) and how to manage your documents, account, and subscriptions in the [Home tab](#home-tab). ## Main view These are the main elements of the interface:

* **Сontent tabs**. Use them to switch between: * The Layer list * Document assets (components, layer and text styles) * Built-in collections of icons, photos, illustrations * **Left panel**. Displays the contents of the selected tab. Toggle the display of the panel on and off by pressing the shortcut corresponding to each of the 7 tabs: `Alt + 1` / `⌥ + 1` ... `Alt + 7` / `⌥ + 7`. You can also use `Shift + F1` or **View → Left Panel** in the menu bar. * **Toolbar**. Features all the primary design tools you'll need. Read more about each tool. If you need more space or prefer to use shortcuts, you can hide the toolbar by clicking (**View → Toolbar**) in the menu bar. * **Canvas**. This is your working area. Read in detail about working with the canvas. * **Right panel**. This panel lets you see and adjust the properties of the selected layer. The view of the right panel varies depends on the layer type. Here you can also choose frame presets, choose color palettes, read comments and export your designs. Read more about working with the right panel. * **Menu bar**. Displays the options and commands related to files, layers, editing, etc. It also features the

button, which opens up the [Home tab](#home-tab). * **Context toolbar**. The set of controls displayed on the context toolbar depends on the type of the currently selected layer. Hover the cursor over a tool icon to see a pop-up explaining what it does. * **Document tabs**. The tabs of currently open files are displayed on the right of the Home button. Click on the tabs to switch between documents or press `Ctrl + Tab` / `⌘ + Tab` and `Ctrl + Shift + Tab` / `⌘ + Shift + Tab`. * **Play button**. Starts the prototype previewer. Read more about prototyping in Lunacy. * **Zoom control**. Use it to adjust the zoom value. Read in more detail about zooming options. * **Theme switch**. Use it to switch between the light and dark themes. * **Additional options**. This button opens up a menu with these options: | Button | Description | Windows and Linux Shortcut / Menu Option | MacOS Shortcut / Menu Option | |---|---|---|---| |

| The **Layout grid** button controls the display of the layout grid and is available only when there is a frame on the canvas. | `Ctrl + \` | `⌘ + \` | |

| The **Show prototyping** button controls the display of hotspots and prototyping arrows. | **View → Prototyping** | |

| With the Slice tool, you can to select a specific area on your design and export it.| **View → Slices** | |

| The **Pixels on Zoom** option shows pixels when the zoom value exceeds 100. | **View → Pixels on Zoom** | |

| Toggle the display of document comments in the [right panel](#the-right-panel) on and off. | `-` | ### Adjusting Lunacy's interface If you need more space, you can adjust the size of the panels or hide the interface elements that you don't need through the **View** menu: - **Minimize the left panel** by clicking on the active content tab. - **Hide the toolbar, right panel, rulers** and any other UI elements by disabling 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.

To adjust the scale of the interface, go to **View → Interface scale**, or use these shortcuts: - `Ctrl + Shift + Alt + +` / `⌥ + Shift + ⌘ + =` — increase scale - `Ctrl + Shift + Alt + -` / `⌥ + Shift + ⌘ + -` — decrease scale - `Ctrl + Shift + Alt + 0` / `⌥ + Shift + ⌘ + 0` — reset scale

## [Home Tab](#home-tab) In the **Home tab**, you can manage your: * [Documents](#working-with-documents) * [Teams and team projects](#managing-teams-and-projects) * [Account and profile information](#account-and-profile) The Home tab opens up when you start Lunacy if you don’t have any previously opened documents in the app. Otherwise, you’ll see your most recently edited document on startup. You can access the Home tab from within a document by clicking

on the menu bar. These are the **main sections** of the Home tab:

1. **The Sidebar.** Access your account page, navigate through documents, and manage your team projects. At the bottom of the sidebar, you will find links to the onboarding tutorial, Lunacy documentation, and social media. 2. **Action Bar.** Use it to create, open, and import documents. Switch between grid and list views, and sort documents as you like. Use the Search field to find documents. 3. **Document Viewer.** This section of the Home tab displays previews of your documents and team projects. ### Working with documents The Home tab makes it easy to create, manage, and organize all of your personal and team documents. #### Creating documents To **create a new document**, use any of the following ways depending on the document type: | | Local | Cloud | |---------------------------------------|-----------------------|----------------------------| | On the Home Tab, click | **New Document** | **New Cloud Document** | | On the menu bar, select | **File → New Document** | **File → New Cloud Document** | | Anywhere in Lunacy, press | `Ctrl + Shift + N` / `⌘ + Shift + N` | `Ctrl + N` / `⌘ + N` | | At the top of the screen, click | `+` (on the right of the document tabs) |

Note: Find out more about local and cloud documents.

#### Opening documents To **open a cloud document**, click on its thumbnail on the Home tab. As for other options, use any of these to **open local documents**: * Press `Ctrl + O` / `⌘ + O`. * Click the **Open** button on the action bar. * Click **File → Open** on the menu bar. Supported formats include `sketch`, `svg`, `png`, `jpg`, `jpeg`, `bmp`, `webp`, `ico`, and `gif`. To **open a cloud document shared with you**: 1. Copy the link to the document. 2. Press `Ctrl + V` / `⌘ + V` anywhere in the app. 3. Click **File → Open URL From Clipboard**. #### Importing documents You can import: - Local `.sketch` documents to **Lunacy Cloud** - **Figma documents** to local `.sketch` documents (which you can then upload to Lunacy Cloud) ##### Importing local `.sketch` files to cloud - In the action bar, click **Import to Cloud**. - At the top right corner of a local document, click

. ##### Importing Figma documents to `.sketch` 1. In Figma, set your file’s sharing options to **Anyone with the link → can view/edit**. 2. Copy the link to the file. 3. Use `Ctrl + V` / `⌘ + V` anywhere in the Lunacy app to open it. To import **private** Figma files, you’ll have to enter its link as well as a **personal access token** generated in Figma for third-party app integrations. To **generate a personal access token** in Figma: 1. Click your profile icon in the file browser and choose **Settings**. 2. Scroll down to the **Personal access token** section. 3. Enter a brief description for the token, and press `Enter`. 4. Copy the token and return to Lunacy. 5. Click **Import from Figma** or **File → Import from Figma** in the menu bar and enter the file’s share link and the personal access token in the corresponding fields:

Note: Some elements, such as component variants and complex vector shapes, may be displayed differently when imported into Lunacy. Check out the article with all of the nuances of Figma import for details.

#### Browsing documents In the sidebar, your documents are divided into three categories: * **Recent**. All of your local and cloud documents, as well as documents shared with you by others. * **My Cloud**. Your cloud documents. * **Deleted**. Deleted cloud documents.

Note: If you’re on the free plan, deleted documents are stored for 30 days, then they are deleted permanently.

In any of these sections, you can right-click on a document preview to open the context menu:

To **search for documents** by keyword, use the search field in the action bar:

Use the buttons on the right of the search bar to **sort documents** and **switch views**. #### Managing teams and projects You can create **teams** for collaborating with others. Create **projects** inside teams and use them like folders to organize your documents. Read more about teams and projects. ### Account and profile Log in to your account to get full access to our graphics, create teams and projects to collaborate with other people, and share your portfolio online. #### Logging in to your account In the Home tab, click **Log In** at the top of the sidebar. Use your existing Icons8 account or via another service:

To create a new account, click **Register**. #### Account information and actions Once you’re logged in, you will see your **profile page**:

Use it to: * Manage your profile information * Publish documents to your web profile * Subscribe to paid plans * Log out and delete your account ##### Managing your profile Edit your name, profile description, and profile picture. Your profile information shows up here and is visible to people with access to your cloud documents, as well as the the members of your team. ##### Publish documents to your web profile Personal cloud documents show up on your profile page in the app with a **Publish/Unpublish** button. Click it to add or remove documents from your **web profile**, a public page where you can showcase your designs. Use it as a portfolio of your works: 1. Click

at the top right corner of your profile page. 2. Select **Web Profile**. This will open your public web profile in the browser. 3. Copy the link in the address bar. 4. Share it anywhere you like!

Note: If the link recipient doesn’t have Lunacy yet, they will be prompted to install it.

##### Subscribe to paid plans Icons8 graphics are free for personal and commercial use as long as you include an attribution link to us. SVG files and high-resolution photos are unavailable on the free plan. To get these options and use our graphics without mandatory attribution, consider a paid graphics subscription. You can also upgrade to a **cloud** or **team** plan for more freedom with cloud documents, team creation, and document management. Read more about the subscriptions we offer. You can also access the list of our graphics subscriptions by **Unlock All Assets** on your profile page, then **See Pricing**. To see all product and subscription options available to you, as well as your Downloads (assets you’ve previously downloaded), click

and select **Billing**. ##### Log out and delete your account Exit your account by clicking the **Log out** button at the top right corner of the account page. To delete your account, open the context menu and click **Delete account**.

Warning: Account deletion is permanent and completely erases your data. You won’t be able to recover it.

# Layers Source: https://lunacy.docs.icons8.com/raw/layers.md Learn how to work with different types of layers in Lunacy A **layer** is any element you see on the canvas. There are several types of layers in Lunacy: * Frames * Text layers * Vectors * Shapes * Images * Components and component instances * Icons * Hotspots * Slices Follow the links above to learn how to work with specific layers in detail. In this section, we’ll go over the basics: how to create, edit, and organize layers on the canvas and the Layer list. ## Adding layers **Add layers** to the canvas using the corresponding tools on the toolbar:

For most of the tools (except for the Select, Hand, Eyedropper, and Comment tools), all you need to do is: 1. Enable them (use shortcuts for a faster workflow). 2. **Click** or **click and drag** on the canvas to add the respective layer.

Note the different icons these layers have before their titles in the Layer list. **See also:**
Tools ### [Layer properties](#layer-properties) The properties displayed in the right panel when a layer is selected depend on the type of layer. The ones listed below are universal for almost all layer types: | Right panel properties | Description | |---------------------------------------------------|-------------------------------------------------------| |

| **Alignment and distribution controls** appear when you select two or more layers. | |

| **Rotation and corner radius.** Rotate your layers and change their corner radius properties. Use the two buttons on the right to adjust the radius of individual corners and to enable smooth corner radius like in iOS interfaces. | |

| **Component options.** Use this section to manage components. Create new component states, switch between them, and detach instances from main components. | |

| **Opacity and blend mode settings.** Set the overall opacity of a layer and its blending mode. | |

| **Fills.** Change the color of your layer. | |

| **Borders.** Add borders to your layers. | |

| **Effects.** Add effects (shadows, blurs) to your layers. | |

| **Prototyping.** Activate prototyping options and turn your static designs into interactive prototypes. Here's how it works. | |

| **Selection properties.** Shows the colors and fonts used in selected layers. | ### Locking and hiding layers **Lock layers** to protect them from accidental edits using the `Ctrl + Shift + L` / `⌘ + Shift + L` shortcuts. To **hide a layer** from the canvas, press `Ctrl + Shift + H` / `⌘ + Shift + H`.

## [Frames](#frames) **Frames** are special types of layers that work like containers for your designs. Using frames is optional, but they come in handy when you’re designing for a specific screen size or device, and they are a must for prototyping. This is how frames appear in the **Layer list**:

### Adding frames To **create a frame**: 1. Press `A` or select the **Frame tool** on the toolbar. 2. **Click and drag** to add a custom frame or **choose a preset** from the right panel. The list features presets for popular devices, screen resolutions, and social media templates.

Tip: When you're creating a frame on the canvas, blue + signs will appear around the borders, indicating pre-existing presets. Drag the corner of the frame you're creating to a + to snap it to a preset (the name of the preset will appear in the Layer list). To hide the + signs, hold down Ctrl / ⌘.

You can place layers inside frames by: - Selecting one or several layers and pressing `Ctrl + Alt + G` / `⌘ + ⌥ + G`. - Drawing a frame over them. To **remove a frame**, use the ungroup shortcut: `Ctrl + Shift + G` / `⌘ + Shift + G`. Check out the full list of handy Lunacy shortcuts. #### Custom presets You can also a **add custom presets** to this list: 1. Select the custom frame. 2. Click the **Create Frame Preset** button in the Preset size and orientation section. 3. Name the preset and press `Enter`.

From now on, the custom frame preset will appear at the bottom of the preset list in the right panel. ### Frame properties Right panel properties for frames are more or less identical to [layer properties](#layer-properties), except frames don’t have Style and Prototyping options. They also have these additional properties: | Right panel properties | Description | |--------------------------------------------------------------------|--------------------------------------------------------------------| |

| **Frame preset, size, and position.** The same options as for layers. You can also change your frame size preset. | |

| **Clip content.** Select this checkbox to hide content outside of the frame boundaries. | |

| **Auto layout.** A set of parameters for configuring auto layouts. | |

| **Background color.** Change the frame color. | |

| **Layout grid.** Add a layout grid to the frame.| |

| **Grid.** Add a square grid to the frame. | ## [Working with layers](#working-with-layers) This section covers basic operations with layers, including [selecting](#selecting-layers), [grouping](#grouping-layers), [duplicating](#duplicating-layers), [arranging](#arranging-layers), [moving](#moving-layers), and [resizing](#resizing-layers) layers. ### [Selecting layers](#selecting-layers) You can **select layers** in the **Layer list** or directly on the canvas. To **select a layer on the canvas**, click on it when the **Select tool** (`V`) is active. Hold `Shift` to select several layers. You can also drag to create a selection around one or several layers. Clicking on a [group of layers](#grouping-layers) selects the entire group. To select individual layers inside it, hold down `Ctrl` / `⌘` as you click, or first click to select the group, then double click to select the layer. Read more about [groups](#grouping-layers) below. To **select all layers** on the canvas (except for locked layers), press `Ctrl + A` / `⌘ + A`. To **select a layer in the Layer list**, find it in the list and click on it. Hold down `Shift` or `Ctrl` / `⌘` to **select multiple layers**.

**See also:**
Select tool #### [Selection fonts and colors](#selection-fonts-and-colors) When you select two or more layers, the right panel displays all of the **fonts and colors** used in those layers in the right panel. This way, you can quickly switch fonts and colors for several layers at a time.

Click the target icon (

) next to a property to select just the layers using this color/font. ### [Grouping layers](#grouping-layers) You can combine multiple layers together in a **group**. You can then modify the group and resize it along with the elements it contains. [Frames](#frames) are more versatile, but groups are also a great way to organize the **Layer list**, which can include hundreds of items or more in some projects. You can **nest groups** in other groups or inside frames in whatever way is most convenient to you. To **create a group**, select two or more layers and press `Ctrl + G` / `⌘ + G` or click the **Group** button (

) on the **context toolbar** at the top of the canvas.

To **select a layer inside** a group: - Hold down the `Ctrl` key and click the required layer. OR - Click to select the group, then double click to select the layer.

After you select a layer within a group, you can switch to other layers of that group simply by clicking them. If needed, you can also enable the **Select group's content on click** option in the right panel, so a click over a group automatically selects the layers inside it.

Alternatively, you can select layers inside groups through the **Layer list**, which may be more convenient in some cases (for example, when handling fully overlapping layers). You can **move layers into or out of a group** by dragging them in the Layer list. To **ungroup layers**, select the group and press `Ctrl + Shift + G` / `⌘ + Shift + G` or click the Ungroup (

) button on the **context toolbar**. ### [Duplicating layers](#duplicating-layers) To **duplicate a layer**: - Select it and press `Ctrl + D` / `⌘ + D`. OR - Hold down `Alt`, select the layer, and drag to where you want to place the copy. You can also use the standard `Ctrl` / `⌘` + `C` / `V` shortcuts, but in this case, the layer copies will appear right on top of the original.

Tip: Lunacy remembers the offset of the latest duplicate. So, if you press Ctrl + D / ⌘ + D shortly after you create a duplicate of a layer, Lunacy adds new duplicates with the same offset as the previous one.

If copied layers include generated content, like avatars or generated texts, duplicates will appear with new content (provided the Auto refresh option is enabled). #### Repeat grid Another convenient way to duplicate elements is to use the **Repeat grid** feature. You select two or more layers, drag the

near the lower-right corner of the bounding box to duplicate the elements in a grid.

Combining **Repeat grid** with the Avatar tool and generated texts can save you a lot of time when designing UIs with placeholder elements.

#### Copy/Paste style You can quickly **copy and paste styling properties** (fills, borders, effects) between layers. To **copy the properties of a layer**: 1. Press `Ctrl + Alt + C` / `⌘ + ⌥ + C`. 2. Select another layer and press `Ctrl + Alt + V` / `⌘ + ⌥ + V`.

#### Copy/paste context menu options Various copy/paste options are also available on the context menu: | Menu option | Shortcut | Description | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Copy | `Ctrl + C` / `⌘ + C`| Copies the selected layer.| | Cut | `Ctrl + X` / `⌘ + X`| Cuts the selected layer and copies it to the clipboard. | | Paste | `Ctrl + V` / `⌘ + V`| Pastes the content of the clipboard onto the canvas. | | Paste here | - | Pastes the content of the clipboard onto the canvas, depending on where the cursor is. | | Paste over | - | Pastes the content of the clipboard over the selected layer. | | Copy as Text | - | Only available for text layers. Copies only the text content of the layer, excluding its properties. | | Copy as CSS/SVG/XAML/PNG | - | These options allow you to copy the code of the selected layer in the required format. | | Copy style/Paste style| `Ctrl + Alt + C` / `⌘ + ⌥ + C`

`Ctrl + Alt + V` / `⌘ + ⌥ + V` | These options allow you to copy the style of the selected layer and apply them to another layer. | | Export as PNG to cloud, Copy URL | `Alt + C` / `⌥ + C` | Exports the selection to the Icons8 cloud and copies the link to your clipboard. You can share the link to your design with other people. | ### [Arranging layers](#arranging-layers) #### Auto Z-index Lunacy automatically 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.

You can **adjust layer order manually** in the **Layer list** and also use shortcuts or context menu commands: | Context menu command | Description | Windows/Linux shortcut | MacOS shortcut | | -------------------- | ---------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------| | Bring forward | Moves the selected layer one step forward.| `Ctrl + ]` | `⌘ + ]` | | Bring to front | Places the selected layer at the top of the stack, above all other elements. | `Ctrl + Shift + ]` | `⌘ + Shift + ]` | | Send backward | Moves the selected layer one step backward. | `Ctrl + [` | `⌘ + [` | | Send to back | Places the selected layer to the bottom of the stack. | `Ctrl + Shift + [` | `⌘ + Shift + [` | #### Aligning and distributing layers To quickly align and distribute layers on the canvas, use the Align and Distribute spacing controls in the top row of the right panel.

They become active when you select two or more layers on the canvas or when you select a single layer on a frame (in this case, Lunacy will align the layer relative to the borders of the frame).

| Icon | Description | Windows/Linux shortcut | MacOS shortcut | | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | --------------- | |

| **Distribute vertical spacing.** Distributes vertical spacing evenly between the selected layers. The layers at the top and on the bottom of the selection always preserve their original position, while the layers between them adjust their positions so that the spacing between all elements is equal. | `Ctrl + Shift + V` | `⌘ + Shift + V` | |

| **Distribute horizontal spacing.** Distributes horizontal spacing evenly between the selected layers. The layers at the right and left borders of the selection always preserve their original position, while the layers between them adjust their positions so that the spacing between all elements is equal. | `Ctrl + Shift + H` | `⌘ + Shift + H` | ##### Smart distribute Use **Smart distribute** to arrange multiple layers into grids with equal spacing between rows and columns. The **Tidy up** button becomes active when you select two or more layers on the canvas and either looks like three straight lines (

) or a grid (

) icon:

To use **Smart distribute**: 1. Select the required layers. 2. Click

3. Once the layers get organized, pink controls appear in the middle of the layers and between them. Click and drag them to rearrange the layers or adjust the spacing between them.

#### Creating hyperlinks between layers You can **create hyperlinks** from one layer to another in your document, even if the layers are on different pages. his can be useful, for example, for simplifying navigation in large documents. To do this: 1. Select the target layer and press `Ctrl + L` / `⌘ + L` (or select **Copy/Paste as → Copy link** on 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.

### [Moving layers](#moving-layers) To **move a layer**, just click and drag it. If you want to **restrict layer movement to the X or Y axis**, hold down `Shift` while you’re moving the layer.

For precise positioning, use the arrow keys. Each keystroke moves a layer by one pixel. Holding down `Shift` increases each step to 10px.

You can also adjust a layer’s position on the canvas or frame using the **X and Y controls in the right panel**: - If a layer is on the canvas, the values in the X and Y fields show the absolute coordinates of its top-left selection handle. - If a layer is a part of a frame, X and Y display the coordinates of its top-left selection handle relative to the frame’s top-left corner.

Tip: Measuring distances between layers can also help with positioning them more accurately. Simply select a layer, press Alt / ⌥, and hover the cursor over another layer to measure the distance between them. Read about all measurement options in Lunacy in the Basics page.

**See also:**
Changing values in the right panel #### Rotating layers To **rotate a layer**, select it, then: - Hover the cursor somewhere any corner of the bounding box. The cursor will turn into a bent double-headed arrow, which you can drag left or right. OR - Change the value in the rotation angle field in the right panel and press `Enter`. To quickly return the layer into its initial position, type `0` in the angle rotation field of the right panel and press `Enter`. You can also hold down `Shift` when rotating the layer to rotate at 90° or 45° angles to quickly get it to its original orientation.

#### Flipping layers To flip a layer, use the **Flip horizontally** (

) and **Flip vertically** (

) buttons that appear on the context toolbar (also available in the **Layer** section on the menu bar). You can also use these shortcuts: - `Ctrl + →` and `Ctrl + ←` / `⌘ + →` and `⌘ + ←` — horizontal flip - `Ctrl + ↑` and `Ctrl + ↓` / `⌘ + ↑` and `⌘ + ↓` — vertical flip

Another way to flip a layer is to drag selection handles like in the demo below.

### [Resizing layers](#resizing-layers) There are several ways to resize a layer: - [Dragging its selection handles](#resizing-by-dragging-selection-handles) - [Using arrow keys](#resizing-using-arrow-keys) - [Changing right panel properties](#resizing-by-adjusting-right-panel-properties) - [With the Scale tool](#scaling-layers) #### [Resizing by dragging selection handles](#resizing-by-dragging-selection-handles) To **resize a layer**, drag any of its selection handles at the corners to adjust its height and width or drag the sides of the bounding box to resize a layer vertically or horizontally. Hold down `Shift` while dragging to preserve the layer’s aspect ratio. Also, you can hold down `Alt` / `⌥` while dragging to **resize the layer from the center**, rather than from the edge you are dragging. The `Alt + Shift + drag` / `⌥ + Shift + drag` shortcut resizes a layer from the center *and* preserves its aspect ratio.

When resizing a frame, its content adjusts to fit the new size. If you want to resize only the frame and keep its content intact, hold down `Ctrl`/`⌘` while resizing. #### [Resizing using arrow keys](#resizing-using-arrow-keys) Select the layer and use the shortcuts `Ctrl + arrow keys` / `⌘ + arrow keys` to resize by 1px or `Ctrl + Shift + arrow keys` / `⌘ + Shift + arrow keys` to resize by 10px.

#### [Resizing by adjusting right panel properties](#resizing-by-adjusting-right-panel-properties) Select a layer and change the values in the the **W (width)** and **H (height)** fields in the right panel to precisely define its size. Click the **Lock aspect ratio** button (

) to preserve the layer’s aspect ratio.

#### [Scaling layers](#scaling-layers) Use the **Scale tool** to resize a layer while preserving the aspect ratio and adjusting the size of any borders/effects applied to the layer. To **scale a layer**: 1. Select the layer. 2. Press `K` or select the **Scale tool** (

) on the toolbar. 3. Drag the bounding box to resize it.

When the **Scale tool** is selected, changing layer size values in the right panel will also scale the layer and all its effects proportionally. #### Resizing constraints With **resizing constraints**, you can determine the behavior of a layer when resizing a group, component, or frame containing the layer. This can be very useful when you need to design a user interface for different screen sizes or devices. You can adjust the individual resizing behavior for each layer in the **Constraints** section of the **right panel**: - The **Pin to edge** control, which pins the layer to one or several edges of the group/component/frame. So, when you resize the container, Lunacy won’t change the distance between the layer and the edges it is pinned to. - The **Fix width** and **Fix size** checkboxes restrict the change of the layer’s width or height so they don’t change as you resize the layer.

Note: Resizing constraints aren’t available for layers in an auto layout frame unless the layer has an absolute position.

**See also:**
Resizing auto layout elements # Layer and text styles Source: https://lunacy.docs.icons8.com/raw/layerstyles.md Learn how to speed up your work with layer and text styles Layer and text styles are sets of predefined properties (fills, borders, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you update a style, all associated layers automatically reflect the changes. The only difference between layer and text styles is that the latter also include typography properties like font, size, line spacing, etc. You can manage and organize styles in the **Styles** tab. ### Creating styles There are two ways of creating styles. **Way 1.** Select a layer with the properties you're likely to reuse and save them as a style. **Way 2.** Click `+` in the **Styles** list and define all the required properties.

### Applying styles Select the required layer or several layers, then choose the style you want to apply from the right panel. Optionally, you can apply styles using the left panel (watch the video above). ### Modifying a layer style There are two ways to modify a style. **Way 1.** 1. Switch to the **Styles** tab, then click the style you want to modify 2. In the displayed panel, make the required changes. 3. Close the panel to apply changes. **Way 2.** 1. Select a layer using the style you want to modify. 2. Make the required changes in the right panel. When you are done, you will see an asterisk (*) next to the style name in the right panel. It indicates that changes have been made to the style.

3. Use one of the following options: * **Update Style** (

): Saves the changes to the existing style. * **Create New Layer Style** (

): Saves the changes to a new style. * **Reset Style** (

) : Discards all changes that you have made. ### Detaching a style Select the required layer and click the **Detach style** button shown below.

The appearance of the layer remains the same, but it is no longer associated with the style and further changes to the style will not affect the layer. ### Organizing styles It is a good practice to organize styles into groups similar to those shown in the figure below.

To organize your styles into groups, consider the following format of style names: `Group name / Subgroup name / Style name` For example, to organize your styles of backgrounds, you can give them the following names: * Backgrounds / Light * Backgrounds / Dark * etc. The number of nesting levels for subgroups is not limited. Another way of organizing styles: 1. Holding down `Shift`, select styles in the left panel. 2. Right-click. 3. On the context menu, click **Group**. 4. Rename the group to the desired name. To rename a style or a style group: 1. Double-click over the style/group. 2. Type the new name and press `Enter`. Style groups and styles appear in the A-Z order in the left panel. ### Duplicating styles You can duplicate your existing styles and quickly create new ones based on their parents. To duplicate a style: * Click the style in the list and press `Ctrl + D`. OR * Right-click the style in the list and select **Duplicate** on the displayed menu. Also, you can select and duplicate several styles at a time. ### Copying styles between documents To copy styles between documents: 1. Select one or several styles in the source document (hold down `Ctrl` or `Shift` to select multiple items). 2. Right-click and select **Copy style** on the displayed menu. 3. Switch to the target document. 4. Open the **Styles** tab. 5. Right-click over the left panel and select **Paste style** on the displayed menu. Also, if you're working with a cloud document, you can consider sharing styles. # Built-in graphics Source: https://lunacy.docs.icons8.com/raw/libraries.md How to make use of our built-in icons, photos, images and UI kits One of the cool things in Lunacy is Libraries. Libraries are collections of visual elements that you can add onto your designs in no time. These collections are accessible through the content tabs and include the following: * [Icons](#icons) * [Photos](#photos-and-masked-photos) * [Illustrations](#illustrations) * [UI kits](#ui-kits) ![A view of the Libraries tabs](public/libraries61.png) For your convenience, the items inside libraries (icons and vector illustrations) are organized by styles categories. Also, to find the required item, you can use the search field at the top of the left panel. Once you've found the item you like, just click it and drag onto the canvas. That's it!

Now you can work with the item in the same way as with any other similar layers. With some limitations you can use all the library items for free. Speaking in plain words, if you are using our app and content for free, please be honest. Your designs *must* include a link to the Icons8 website, otherwise our lawyers get nervous and unhappy. To be able to edit photos in high resolution or to convert icons and illustrations to vector you should subscribe to one of our paid plans. The sections below describe library-specific actions that you can perform with library items. ## [Icons](#icons) The Lunacy icon library includes tons of icons in different styles. After installation your app will feature only free-to-use icons. To have the full library at hand, you should download it. ![Downloading icons library](public/dnldicn.png) ## [Photos and masked photos](#photos-and-masked-photos) When working with the photo libraries you can make use of such handy features as: * Image replacement * Searching for similar images To **replace** an image on the canvas, drag an image from the library and hover it somewhere near the center of the current image. Wait a moment until the green mask and replacement icon appear, and then release the mouse button. ![Replacing an image](public/replaceimage.gif) To **search** the library for images similar to the one you have on the canvas, right-click the image and select **Find similar** on the displayed menu. ![Searching for a similar image](public/findsimilar.png) Lunacy will run through its photo library and display the best matches on the library panel. ## [Illustrations](#illustrations) Illustrations is a collection of vector images for awesome web, mobile and UI designs. But if you are on a free plan, you will only be able to use library items as rasters. ![Illustrations library](public/illustrations1.png) Like with [photos](#photos-and-masked-photos), when working with illustrations you can use the **replacement** and **find similar** features. # Linked design Source: https://lunacy.docs.icons8.com/raw/linked_design.md How to update live webpages directly from Lunacy With the **Linked design** feature, you can adjust your designs in Lunacy and apply the changes to a webpage without leaving the app. This works with changes to: * Vector content * Text and raster content * Colors * Styling effects (borders, shadows, etc.) * Layer shapes * Layer sizes

Note: This feature is only available in cloud documents.

To learn more about the pros of linked design and potential use cases, check out this article. ## How it works for a web developer Switching to linked design might slightly impact your standard practices in the beginning, but it saves you lots of time in the long run. Here's how it works: 1. Deselect all layers (press `Esc` or click anywhere over the canvas). 2. Open the **Export** tab in the right panel. 3. Copy the code with the link to the CSS file and paste it to the **head** section of your HTML code.

Later on, stick to the CSS styles and color variables from this file in your code. To see the CSS code generated by Lunacy, open the link to the CSS file in your browser. 4. In the same panel, copy the code with the script for fetching text content and paste it under the **body** section of your HTML code.

5. One by one, select the layers/layer groups subject to updates from Lunacy, copy their embed code from the **Export** panel and paste it to your HTML code. The advantage of embeds is that they load SVG content into the DOM, and you can apply JavaScript to any embedded element. Here's a visual explanation of the process: ## How it works for a designer #### The basics To make sure that your linked designs work properly, keep these things in mind: * The use of text styles is a **must**. * Any raster images you update via linked design **must** belong to layer groups. You can put all your raster images into a single group or combine them with vector layers in a more logical way, just remember: **standalone image layers won't be updated**. If you're not going to update an image, you can leave it ungrouped. * **Do not** rename layer and text styles after a linked design is online. These names are used in the CSS code, so if you modify them, you'll break the links with the current code. * For the same reason, **do not** add new styles if you don't want to bother the web developer team. Edit your current styles instead. #### Applying changes Here's how you can apply changes to a live webpage: **For non-text layers:** 1. Select the altered layer/layer group. 2. Open the **Export** tab in the right panel. 3. Click

next to the **Linked design** section. This will apply the changes to the webpage.

Tip: If the button appears disabled, click the question mark next to it first.

4. Do this for all the elements you need to upload. **For text layers:** 1. When you're done editing all of your text layers, deselect all layers on the canvas (press `Esc` or click anywhere over the canvas). 2. Click

next to the **Linked design** section. This will apply the changes to the webpage.

Tip: If the button appears disabled, click the question mark next to it first.

### Viewing changes in the browser In your browser, reload the page by pressing `Ctrl + F5`/ `⌘ ⌥ R` to make sure that any cached content is cleared. # Private Cloud Source: https://lunacy.docs.icons8.com/raw/private_cloud.md How to collaborate in total privacy Many industries feel uneasy knowing that their data is floating somewhere in the clouds without proper control — banking, healthcare, insurance, you name it. For design teams working in such fields, Lunacy offers a **Private Cloud** solution with two deployment options: **on-premises** and **virtual private server (VPS)**. ## Private cloud on-premises For companies with a strong focus on security who prefer to keep all their data in-house. **How it works** - You deploy your personal Lunacy Cloud on a dedicated server within your corporate network. - You configure the teams and control who can edit or view certain documents. - You take full care of the server and backups. - Your administrator installs the updates after all the required checks. **What you get** - Total control over your design cloud. - Happy design and other teams enjoying the perks that cloud collaboration brings. - Happy security department since no data gets outside. ## Private cloud on VPS This option is for the teams that don’t feel like sharing a common cloud with the rest of the world but aren’t quite ready to manage their own servers. **How it works** - Our engineers deploy, configure, and update Lunacy Private Cloud for you on a virtual private server in any region or jurisdiction. - You configure the teams and control who can edit or view certain documents. - You make backups of your documents or delegate it to our engineers. - Our engineers assist you with any technical matters as needed. - Unlike users of privately hosted clouds, you can keep using built-in graphics and Lunacy’s AI tools. **What you get** - Efficient design team working in a modern collaborative design editor. - Peace of mind about the security of your design data. - No headache about managing your private design cloud. Both solutions, Private Cloud on-premises and VPS, come with *24/7 priority support*, a *dedicated customer success manager*, and *priority feature requests*. Contact us, to [request a demo](https://ic8.link/B9oI8). # Prototyping Source: https://lunacy.docs.icons8.com/raw/prototyping.md Learn how to create interactive prototypes in Lunacy Prototypes make your design interactive, letting you communicate both aesthetics and user experience. ## Creating a prototype

Note: If you are planning to add prototyping to your project, the use of frames is a must.

To create a prototype, you typically need three key elements: - **Hotspot** – an interactive zone that triggers an action. It can be an entire frame or a specific element within a frame, like a button or menu option. You can turn any selected frame or element into a hotspot by pressing `H` or clicking `+` in the Prototyping section of the right panel. You can also create dedicated hotspot layers, which are useful when an element is too small to interact with comfortably. By adding a hotspot layer over it, you can enlarge the clickable area. To do this, select the **Hotspot tool** from the toolbar (or press `H` when nothing is selected) and draw the hotspot layer wherever needed. - **Connection** – a visual arrow that links the hotspot to its destination, defining the flow of the interaction. - **Destination** – the target frame or a specific location within a frame where the interaction will take the user. The video below shows an example of creating a simple prototype.

What happens in the video: 1. We select **Frame 1**, click `+` in the **Prototyping** section, and link it to **Frame 2**. This makes the entire frame interactive—clicking anywhere on it (default action) navigates to Frame 2. 2. In **Frame 2**, we create a **hotspot** over the icon and text block, grouping them into a single interactive zone. We then link this hotspot back to **Frame 1**. 3. Pressing `F5` opens the **prototype player**. Clicking anywhere in Frame 1 takes us to Frame 2. If we click outside the interactive zone in Frame 2, the player highlights the clickable area. 4. Pressing `Esc` exits the prototype player. The **Prototyping** section offers various settings to help you design more complex prototypes with diverse animations, transitions, and interaction flows. ## Prototyping settings When setting up an interaction in your prototype, think of it as answering a few key questions: * **On what event?** (Trigger) * **What happens?** (Action) * **If it moves, where to?** (Destination) * **What does it look like?** (Animation) * **What happens if it is scrolled?** (Behavior on scroll) The figure below explains the prototyping settings. Experimenting with these options will bring your designs to life with natural interactions.

### Triggers Triggers define what starts an interaction in your prototype. | **Trigger** | **What it does** | **Example use case** | |--------------------|--------------------------------------------------|--------------------------------------------| | **On click** | Activates when the user clicks on an element. | Toggle a dropdown menu when clicking a button. | | **On drag** | Triggers when an element is dragged. | Swipe between frames. | | **While hovering** | Runs as long as the cursor stays over an element. | Change the color of a button when hovered. (You'll need to have a component with different states to switch between them)| | **While pressing**| Active while the user holds down a click or key. | Show an animation while pressing a button. | | **Key** | Responds to a specific keyboard input. | Press "Esc" to close a popup window. | | **Mouse enter** | Fires when the cursor moves over an element. | Expand a sidebar when the cursor enters its area. | | **Mouse leave** | Fires when the cursor moves away from an element. | Collapse a sidebar when the cursor leaves it. | | **Mouse up** | Triggers when a pressed mouse button is released. | Releasing the mouse dismisses a pop-up window. | | **Mouse down** | Triggers when a mouse button is pressed. | Pressing a card makes it pop out slightly. | | **After delay** | Runs automatically after a set time. | Show a notification after a few seconds. | ### Actions The action determines what happens next in the prototype after a trigger. | **Action type** | **What it does** | **Example use case** | |-------------------|----------------------------------|--------------------------------------------------| | **Navigate to** | Moves the user to another frame. | Clicking a button takes the user to a different screen. | | **Scroll to** | Scrolls to a specific section within the same frame. | Clicking "Back to top" smoothly scrolls to the top of the page. | | **Open URL** | Opens an external link in a browser. | Clicking a "Learn more" button takes the user to a website. | | **Back** | Returns to the previous screen. This action type requires no links. | A "Back" button navigates to the last visited frame. | | **Open overlay** | Displays a floating layer over the current screen. | Tapping "Delete" opens a warning. | | **Swap overlay** | Replaces the current overlay with another one. | Switching between different steps of a multi-step form. | | **Close overlay** | Hides the currently active overlay. | Clicking "X" closes a pop-up window. | ### Destinations The destinations dropdown (

) lists all available frames in the document, including those on other pages. Keeping frame names clear and organized is a good practice, especially in large projects—it will save you time when selecting the right frame.

Tip: Hovering over a frame in the list will automatically zoom to it.

### Animations Animations define how transitions between frames happen, adding fluidity to interactions. Below is a breakdown of the available animation types and their configuration options. | **Animation type** | **What it does** | **Example use case** | **Adjustable settings** | |--------------------|------------------------------------------------|------------------------------------------------|------------------| | **Instant** | Changes the frame immediately, with no transition. | Best for quick jumps between screens without visual effects. | None | | **Dissolve** | Fades the current frame into the next one. | Smooth transitions for modals, pop-ups, or scene changes. | - Effects
- Duration | | **Move In / Out** | Moves the new frame in or the old frame out from a specified direction. | Creating a slide-in menu or overlay effect. | - Effects
- Direction
- Duration | | **Push** | Shifts the current frame out while bringing in the new one from the same direction. | Mimicking page transitions in mobile apps. | - Effects
- Direction
- Duration | | **Slide In / Out** | Slides a frame into or out of view without affecting other elements. | Great for sidebars, notifications, or contextual menus. | - Effects
- Direction
- Duration | You can preview how an animation will look and feel by hovering over the preview pane in the prototyping settings. #### Animation effects You can choose between the following animation effects: - **Linear** – moves at a steady pace without acceleration. - **Ease In** – starts slow and gradually speeds up. - **Ease Out** – moves quickly at first, then slows down before stopping. - **Ease In and Out** – combines both effects: begins slowly, accelerates in the middle, and slows down again. - **Gentle** – creates a smooth, gradual transition for a soft feel. - **Quick** – moves rapidly for a snappy, responsive effect. - **Slow** – prolongs the transition for a more relaxed motion. - **Bouncy** – adds a playful, spring-like motion to the animation. - **Custom** – opens the Bézier curve editor, allowing you to fine-tune the acceleration and deceleration of an animation. ### **Behavior on scroll** These options determine how an element behaves when users scroll the prototype: - **Scroll** – the element moves along with the rest of the content as users scroll. - **Fixed** – the element stays in place while the background scrolls (e.g., floating buttons, support chat bubbles). - **Sticky** – the element scrolls normally but becomes fixed once it reaches the top of the prototype. - **Keep Scroll Position** – selecting this checkbox, ensures the prototype maintains the current [scroll position](#scrollable-prototypes) when navigating between screens, preventing it from resetting to the top. ### Scrollable prototypes

Note: Scrollable prototypes work only with frames based on frame presets (Full HD, iMac, iPhone, etc.).

If the list of preset frames does not include a frame of the required size, you can create a custom preset.

To **create a scrollable prototype**: 1. Create a frame using a preset. 2. Resize the frame vertically. Resized frames have the label **Resized** in the right panel:

3. Fill the frame with content and link it with other frames. Preview the prototype as usual and scroll down to test out the interface. ## Previewing prototypes To **preview a prototype**, select the frame you want to start with and click the **Play** button (

) at the top right corner of the interface. If you want to always preview your prototype from a certain frame: 1. Left-click over the frame. 2. On the context menu, select **Set as Start Point**. 3. Before running the prototype player, make sure that nothing is selected.

Note: Selected frames override start points.

To exit the prototype player, click

again, or press `Esc`. ## Sharing prototype previews

Note: This feature is available only in cloud documents. To turn a local document into cloud, click on the top panel.

To share a prototype on the web: 1. Click

or press `F5` to start the prototype player. 2. In the top right corner of the player click **Share**, then click **Copy prototype link** to add the link to your clipboard. 3. Send the link to your teammate or reviewer.

People working with the web prototype can leave comments. Before doing this, they will need to log in or sign up. # Shared libraries Source: https://lunacy.docs.icons8.com/raw/sharedlibraries.md How to reuse components and styles from other files In Lunacy, any **cloud file** that contains components and/or layer or text styles can become a library. You can reuse those components and/or styles across other **cloud files**. This will help you speed up your workflow and keep your designs consistent. To connect a library to a file: 1. In the left panel click **Components** or **Styles**, then click ![library_icon](public/openbook.png). 2. In the displayed window, find the file that you're going to use as a library. 3. In the lower-left corner of the file preview, click **Add**. A list of components/styles from the file will appear in the panel.

Now you can start using the library like any other components or styles. To disconnect a library from a file: 1. In the left panel, click **Components** or **Styles**, then click ![library_icon](public/openbook.png). 2. In the displayed window, find the library file. 3. In the lower-left corner of the file preview, click **Remove**. The lists of components/styles will disappear. # Shortcuts Source: https://lunacy.docs.icons8.com/raw/shortcuts.md Speed up your workflow with Lunacy's shortcuts Optimize and speed up your work in Lunacy with the help of keyboard shortcuts. We keep these shortcuts consistent with both Sketch for Mac and Photoshop. If you are used to these certain combinations, in those apps they will likely match in Lunacy as well. ## General Shortcuts | Action | Windows, Linux | Mac | | ------------- |-------------|---------------| | Open |`Ctrl + O` | `⌘ + O` | | New cloud document |`Ctrl + N` | `⌘ + N` | | New local document |`Ctrl + Shift + N` | `⌘ + Shift + N` | | Save |`Ctrl + S` | `⌘ + S` | | Save as |`Ctrl + Shift + S` | `⌘ + Shift + S` | | Export |`Ctrl + E` | `⌘ + E` | | View Docs |`F1` | `F1` | | Close Tab |`Ctrl + W` | `⌘ + W` | | Next Tab |`Ctrl + Tab` | `⌃ + Tab` | | Prev Tab |`Ctrl + Shift + Tab` | `⌃ + Shift + Tab` | | Exit |`Alt + F4` or `Ctrl + Q` | `⌘ + Q` | | Copy |`Ctrl + C` | `⌘ + C` | | Cut |`Ctrl + X` | `⌘ + X` | | Paste |`Ctrl + V` | `⌘ + V` | | Create frame | `Ctrl + Alt + G` | `⌘ + ⌥ + G` | | Group Selection |`Ctrl + G` | `⌘ + G` | | Ungroup Selection / Remove frame|`Ctrl + Shift + G` | `⌘ + Shift + G` | | Add auto layout | `Shift + A` | `Shift + A` | | Export in PNG to Icons8 Cloud, copy URL to clipboard |`Alt + C + С` | `⌥ + C + C` | | Copy Style |`Ctrl + Alt + C` | `⌥ + ⌘ + C` | | Paste Style |`Ctrl + Alt + V` | `⌥ + ⌘ + C` | | Copy link to layer | `Ctrl + L` | `⌘ + L` | | Undo |`Ctrl + Z` | `⌘ + Z` | | Redo |`Ctrl + Y` or `Ctrl + Shift + Z` | `⌘ + Shift + Z` | | Show Rulers |`Ctrl + R` | `⌘ + R` | | Show Grid |`Shift + G` | `⌘ + G'` | | Show Layout Grid |`Ctrl + \` | `⌃ + G` | | Show Guidelines |`Ctrl + ;` | `⌃ + ;` | | Lock Guidelines |`Ctrl + Alt + ;` | `⌥ + ⌘ + ;` | | Collapse the Layer list |`Ctrl + ~` | `⌃ + ~` | | Switch to Layers |`Alt + 1` | `⌥ + 1` | | Switch to Components |`Alt + 2` | `⌥ + 2` | | Switch to Styles |`Alt + 3` | `⌥ + 3` | | Switch to Icons |`Alt + 4` | `⌥ + 4` | | Switch to Photos |`Alt + 5` | `⌥ + 5` | | Switch to Illustrations |`Alt + 6` | `⌥ + 6` | | Switch to UI Kits |`Alt + 7` | `⌥ + 7` | | Switch to Plugins |`Alt + 8` | `⌥ + 8` | | Switch to Shortcuts |`Shift + F1` |`Shift + F1` / `⌥ + O` | | View code |`F4` | `F4` | ## Tools | Action | Windows, Linux | | ------------- |-------------|---------| | Select |`V` | `V` | | Deselect | `Esc` | `Esc` | | Frame | `F` or `A` | `F` or `A` | | Text |`T` | `T` | | Hand | Hold down `Space` or the **middle mouse button** | Hold down `Space` or the **middle mouse button** | | Rectangle | `R` | `R` | | Rounded Rectangle | `R`, `R` | `R`, `R` | | Line |`L` | `L` | | Arrow | `L`, `L` | `L`, `L` | | Oval | `O` | `O` | | Triangle | `O`, `O` | `O`, `O` | | Polygon | `O`, `O`, `O` | `O`, `O`, `O` | | Star | `O`, `O`, `O`, `O` | `O`, `O`, `O`, `O` | | Draw from center | Hold down `Alt` and drag | Hold down `⌥` and drag | | Draw while preserving aspect ratio | Hold down `Shift` and drag | Hold down `Shift` and drag | | Pen |`P` | `P` | | Pencil |`P`, `P` | `P`, `P` | | Eyedropper |`I` | `I` | | Image |`M` |`M` | | Avatar |`Q` |`Q` | | Icon | `X` | `X` | | Hotspot |`H` |`H` | | Slice |`E` | `E` | | Comment|`C` | `C` | | Like (sticker) |`C, C` | `C, C` | | Dislike (sticker)|`C, C, C` | `C, C, C` | | Heart (sticker) |`C, C, C, C` | `C, C, C, C` | | Question (sticker) | `C, C, C, C, C` | `C, C, C, C, C` | | Button |`B` | `B` | | Text Input |`D` | `D` | | Radio button |`Y` | `Y` | | Toggle |`J` | `J` | | Drop-down list |`W` | `W` | | Component|`S` | `S` | | Crop |`Shift + Enter` | `Shift + Enter` | ## Selecting Layers | Action | Windows, Linux | Mac | | ------------- |-------------|--------------| | Select layer |`Click` | `Click` | | Select All |`Ctrl + A` | `⌘ + A` | | Select All frames (layers beyond frames are ignored) |`Shift + Ctrl + A` |`⌘ + Shift + A`| | Select a layer within a group |`Ctrl + Click` | `⌘ + Click` | ## Editing layers | Action | Windows, Linux | Mac | | ------------- |-------------|--------------| | Edit Mode |`Enter` or `Double click` | `Enter` or `Double click` | | Finish Editing/Deselect all |`Escape` | `Escape`| | Delete layer | `Backspace` or `Del` | `Backspace` or `Del` | | Toggle Mask |`Ctrl + M` | `⌘ + M` | | Flip horizontally |`Shift + H` |`Shift + H` | | Flip vertically |`Shift + V` | `Shift + V` | | Union |`Ctrl + Shift + U` | `⌘ + ⌥ + U` | | Substract |`Ctrl + Shift + P` | `⌘ + ⌥ + P` | | Intersect |`Ctrl + Shift + I` | `⌘ + ⌥ + I` | | Difference |`Ctrl + Shift + X` | `⌘ + ⌥ + X` | | Align Left |`Alt + A` | `⌥ + A` | | Align Right |`Alt + D` | `⌥ + D` | | Align Horizontally |`Alt + H` | `⌥ + A` | | Align Top |`Alt + W` | `⌥ + W` | | Align Bottom |`Alt + S` | `⌥ + S` | | Align Vertically |`Alt + V`| `⌥ + V` | | Distribute Horizontally |`Ctrl + Shift + H` | `⌥ + Shift + H` | | Distribute Vertically |`Ctrl + Shift + V` | `⌥ + Shift + V` | | Tidy up |`Ctrl + Alt + Shift + T` | `⌃ + ⌥ + Shift + T` | | Scale layers |`Ctrl + K` | `⌘ + K` | | Refresh avatar |`Shift + R` | `Shift + R` | | Outline stroke |`Ctrl + Shift + O` | `⌘ + Shift + O` | ## Text Editing | Action | Windows, Linux | Mac | | ------------- |-------------|---------| | Bold |`Ctrl + B` | `⌘ + B` | | Italic |`Ctrl + I` | `⌘ + I` | | Underline |`Ctrl + U` | `⌘ + U` | | Increase Font Size |`Ctrl + Alt +` | `⌥ + ⌘ +` | | Decrease Font Size |`Ctrl + Alt –` | `⌥ + ⌘ -` | | Increase Line Spacing |`Ctrl + Alt + >` | `⌥ + ⌘ + >` | | Decrease Line Height |`Ctrl + Alt + <` | `⌥ + ⌘ + <` | | Increase Character Spacing |`Ctrl + Shift + >` | `⌘ + Shift + >` | | Decrease Character Spacing |`Ctrl + Shift + <` | `⌘ + Shift <` | | Horizontal Align Left |`Ctrl + Alt + {` | `⌥ + ⌘ + {` | | Horizontal Align Center |`Ctrl + Alt + T` | `⌥ + ⌘ + T` | Horizontal Align Right |`Ctrl + Alt + }` | `⌥ + ⌘ + }` | | Horizontal Align Justify |`Ctrl + Alt + J` | `⌥ + ⌘ + J` | | Refresh generated text |`Shift + R` | `Shift + R` | ## Operations with Components | Action | Windows, Linux | Mac | | ------------- |-------------|-------------| | Create Component | `Ctrl + Alt + K` | `⌥ + ⌘ + K` | | Edit Component |`Enter` | `Enter` | | Send to Components Page |`Ctrl + Alt + M`| `⌥ + ⌘ + M` | | Go to Main Component |`Ctrl + Alt + E`| `⌥ + ⌘ + E` | | Detach from Components |`Ctrl + Alt + D` | `⌥ + ⌘ + B` | | Reset instance size |`Ctrl + Alt + R` | `⌥ + ⌘ + R` | | Create component state | `Ctrl + Alt + P` | `⌥ + ⌘ + S` | ## Moving and Resizing layers | Action | Windows, Linux | | ------------- |-------------|-----------| | Distance to layers | `Alt` | `⌥ + ` | | Duplicate | Hold down `Alt` and drag or `Ctrl + D` | Hold down `⌥` and drag or `⌘ + D` | | Move along X/Y axis | Hold down `Shift` and drag | Hold down `Shift` and drag | | Move by 1px |`Arrow keys` | `Arrow keys` | | Move by 10px |`Shift + arrow keys` | `Shift + arrow keys` | | Resize by 1px |`Ctrl + arrow keys` | `⌘ + arrow Keys` | | Resize by 10px |`Ctrl + Shift + arrow keys` | `⌘ + Shift + arrow Keys` | | Resize from center |`Alt + resize` | `⌥ + resize` | | Preserve Ratio |`Shift + resize` | `Shift resize` | | Pan around canvas |Hold down `Space` and drag | Hold down `Space` and drag | Disable snapping while dragging layers | Hold down `Ctrl` and drag | Hold down `⌘` and drag| ## Arranging layers | Action | Windows, Linux | Mac | | ------------- |-------------|------------------| | Bring Forward |`Ctrl + ]` | `⌘ + ]` | | Send Backward |`Ctrl + [` | `⌘ + [` | | Send to Back |`Ctrl + Shift + [` | `⌘ + Shift + [` | | Show / Hide |`Ctrl + Shift + H` | - | | Lock / Unlock |`Ctrl + Shift + L` | - | ## Zoom and Focus | Action | Windows, Linux | Mac | | ------------- |-------------|--------------| | Zoom tool |`Z` | `Z` | | Zoom |`Ctrl + mouse wheel` | `⌘ + mouse wheel` | | Slower zoom |`Ctrl + Shift + mouse wheel` | `⌘ + Shift mouse wheel` | | Zoom In |`Ctrl` + `+` / `+` | `⌘` + `+` or `+` | | Zoom Out |`Ctrl` `-` or `-`| `⌘` + `-` or `-` | | Zoom to 100% |`Ctrl + 0` | `⌘ + 0` | | Zoom to All Elements |`Ctrl + 1`| `⌘ + 1` | | Zoom to Selection |`Ctrl + 2` | `⌘ + 2` | | Fit Width |`Ctrl + 3` | `⌘ + 3` | | Fit Height |`Ctrl + 4` | `⌘ + 4` | | Previous page |`Page up` | `Page up` | | Next page |`Page down` | `Page down` | | Previous frame |`Home` | `Home` | | Next frame |`End` | `End` | | Search |`Ctrl + /` or `/` | `⌘ + /` or `/` | # Fills, borders, effects Source: https://lunacy.docs.icons8.com/raw/styling.md Learn how to work with styling options in Lunacy Use **styling options** to define the color and effects of a layer, including: - **Fills and tints.** Choose from solid, gradient, or image fills and apply tints to customize the colors. - **Borders.** Add them to your layers to create clear distinctions or define boundaries. - **Shadows.** Experiment with outer and inner shadows to add depth and dimension to your elements. - **Blurs.** Add Gaussian or background blurs to your layers. These options appear in the right panel whenever you select layer.

You can apply them to all types of layers, except for hotspots, and slices, though not all layers have all of the styling options available. For example, groups have [tints](#tints) instead of [fills](#fills), and component instances have both these options. Save time by creating layer styles for individual or multiple styling options. You can easily reuse them across different layers, keeping your designs consistent. **See also:**
Layer and text styles ## Adding styling options To **apply a fill, border, or any other styling option** to a layer: 1. Select a layer. 2. Click `+` next to the required styling section in the **right panel**. 3. Adjust the settings to define styling parameters for the layer.

### Managing and deleting styling options Each layer can have multiple styling options of the same type (except for blurs). For example, you can apply an image fill to a layer and a semi-transparent solid fill on top of it. Also, a layer can have several borders or shadows. Just click the `+` icon to add another styling setting. To adjust a layer’s appearance, rearrange the order of the styling settings within each section.

You can temporarily hide some of the settings by clicking

. To delete a styling setting, click

### Applying styling options to multiple layers To apply styling options to multiple layers, select them and click `+` next to any of the styling sections in the right panel.

If you see **Click + to replace mixed content** in any of the styling sections in the right panel, it means that the selected layers already have different settings for this option. Click `+` to override the current settings and apply the same styling option to the selected layers.

## [Fills](#fills) **Fills** define the color of a layer. Fill options are available in all styling sections (except for blurs) and define the color of the selected layer, borders, or shadows. There are several ways to change the fill color. You can: - Open the color picker/slider by clicking the color swatch in the **Fill** section. - Use the **Eyedropper tool** (`I`) and click on a color you want to use for your layer. - Pick a color variable or a preset color. - Inside the color picker, type or paste the HEX, RGBA, HSB, or HLS value for a solid fill into the color code input field. - Enter the HEX value for solid fills manually into the color text box in the **Fill** section or the color picker.

Note: The methods below work for solid fills or parts of a gradient.

#### Color picker To open the **color picker**, click the color swatch in one of the styling sections in the right panel.

The color picker displays these settings:

**Fill type.** Available for the **Fill** and **Border** color pickers only. **Color selection box.** This is where you select the color. **The eyedropper tool.** Click it and use the tool to sample colors from other layers or the interface. **Color selection slider.** Slide along the bar to switch colors. **Opacity slider.** Slide along the bar to adjust the opacity. **Color code.** Displays the code of the currently selected color:
- HEX - RGB - HSB - HSL **Color code input field.** Paste HEX, RGBA, HSB, or HLS values here for maximum accuracy. **The opacity entry field.** Manually enter the opacity percentage. **Create color variable.** This button opens the color variable editing mode. **Preset colors.** To speed up your work with colors, you can save them here and select them directly from this panel later. There are two types of preset colors:
- **Global** colors appear in the color picker in all documents.
- **Document** colors are available in the current document only. **Global and document presets.** To switch between global and document colors, open the dropdown menu. To delete a color preset, right-click over it, then select **Remove**. **Switch view.** Use this button to switch the presets between list and grid views. In list view, you’ll be able to rename colors: right-click a color, then select **Rename**. **Add color preset.** Use this button to add the currently selected color to **Global** or **Document** presets. ### Fill types There are three major types of fills: 1. **Solid fills** (default) 2. **Gradient fills**: - Linear - Radial - Angular 3. **Image fills** You can set these fills for a layer and adjust them in the **Fill** section of the right panel.

**Color picker.** The color swatch matches the color of the selected layer. Click it to open the color picker. **HEX color code.** Displays the HEX code of a fill. Alternatively, this field shows the name of the color variable applied to the layer. **Color variables.** Opens the dropdown menu to view the list of document color variables. **Fill opacity.** The opacity of the fill. You can also adjust the opacity inside the color picker itself. **Show/hide fill.** Hides the fill. **Delete fill.** Removes the fill from the layer. **Add fill.** Adds another fill on top of the current one. You can move fills around by dragging the leftmost part of a fill up or down. **Fill properties.** This button opens the panel where you can select between the Non-Zero and Even-Odd options for filling overlapping paths. **Blend mode.** Blend mode determines how the fill blends with the layer underneath. Activate it to set the blend mode for a fill (when active, the option will replace the **Hide** and **Delete** buttons) and click it again to hide it.

Note: Understanding blend modes is mainly a matter of practice and experimenting, but here’s a rundown of the theory.

#### Solid fills To **define a solid fill**, use [any of the ways described in the section above](#fills). #### Gradients **Gradients** are combinations of two or more colors blended into each other inside the same fill layer. To **add a gradient fill**: 1. In the **Fills** section of the right panel, click the color swatch to open up the color picker. 2. At the top of the color picker, click one of these buttons to select the gradient type: * linear (

) * radial (

) * angular (

) 3. The gradient bar with two handles will show up in the color picker. 4. Also, you will see a gradient control with two color points over the layer. The appearance of the gradient control depends on the selected gradient type. 5. Use the gradient control and/or the gradient bar to get the desired effect.

Here’s a list of actions applicable to all types of gradients: - **Change the color of a gradient point** by clicking it (or the corresponding gradient bar handle) and selecting the required color. - To **add a color to a gradient**, just click over the gradient bar or the gradient control. To adjust the color, move the handles or the color points. - To **delete a gradient color**, point the cursor over the respective color point or handle, then press `Del`. - To **save a gradient as a color preset**, select the variable type (Global or Document) and click `+`. - To **invert a gradient**, use the

button next to the gradient bar. ##### Linear gradients Working with linear gradients is pretty straight-forward.

##### Radial gradients When you select the radial type, the gradient control is the radius of a circle. You can: - Select the edge color point to change the size of the circle. - Select the center color point and drag it to reposition the origin point of the gradient. - Drag the square handles on the edge of the circle to resize or reshape it into an ellipse.

##### Angular gradients When you select an angular gradient, the gradient control takes the form of a circle with color points on its edges. Drag the points around the circle to get the desired gradient effect and add some extra color points if needed.

#### Image fills To **create an image fill**: 1. Click the color swatch. 2. In the top bar of the color picker, click

. 3. Click **Choose image**. 4. Select an image from on your computer and click **Open**.

Use the drop-down list below the **Choose image** button to select the fill method: - **Fill.** Adjusts the image size to the layer’s width. - **Fit.** Adjusts the image size to fit the layer’s height. - **Stretch.** Stretches the image to fit the layer’s width and height. - **Tile.** Duplicates the image in a tile pattern to fit the layer. The size of tiles is adjustable. You can quickly replace an image **or** image fill by holding down `Ctrl` / `⌘` and dropping an image from your desktop or the **Photos** library in the left panel onto a layer, like in the demo below.

**See also:**
Avatar tool
Tips and tricks ### Tints Tints are a quick and easy way to apply a color to groups and component instances. They are particularly useful when you need to adjust the color of a semi-filled layer or a complex icon.

The **Tints** section only appears in the right panel when you select a group or a component instance. Unlike other styling options, you can only apply one tint to a layer. #### Tint overrides Overrides to tints added to component instances are useful when you are designing tabs or panels with elements that have different states expressed through different colors.

Note: You need to add default tints before you can create tint overrides.

When you override a tint, the

button appears in the **Tint** section of the right panel. Clicking it removes only the tint override, while all other overrides stay unchanged. Read more about tint overrides in the Components page. ## Borders You can add borders to any layer except for hotspots and slices. The **Border** section opens up in the right panel when you add a border to an element. Here, you can adjust a border’s color, thickness, and shape. In this same section, you can adjust the appearance of lines, curves, arrows, and other open paths since they work more or less like partial borders.

**Color swatch.** The color swatch matches the color of the border. Click it to open the border color picker. **HEX color code.** Shows the name of a color variable or the HEX code of a fill. Open the dropdown menu to view the list of document color variables. **Color variables.** Opens the dropdown menu to view the list of document color variables. **Border position.** You can choose to place borders on the inside, outside, or center (default) of the layer’s bounding box. The only option available for open paths (lines, arrows, curves, etc.) is center.

**Show/hide border.** Hides the border. **Borders thickness.** Determines the thickness of a border or an open path. **Advanced border settings.** More adjustment options for the shape and appearance of a border. Read more about advanced settings for borders below. **Add border.** Adds another border on top of the current one. You can move borders around by dragging the leftmost part of a border up or down. **Delete border.** Removes the border from the layer. ### Advanced border settings

Advanced border settings include: - **Caps.** Define the shape of the caps of open paths: no caps, round, or square. Open paths include those created with the Line, Arrow, or Pen/Pencil tools. - **Folds.** Adjust the appearance of the corners for arrows and paths with corners drawn with the Pen/Pencil tool. - **Start and End.** Determine the appearance of the ends of open paths drawn with the Line, Arrow, or Pen/Pencil tools.

- **Dash and Gap.** Create dashed lines or borders. Define the length of the dashes and the gaps between them in the corresponding input fields. To turn the border into a solid line, set all the values to 0.

## Effects Open up the **Effects** section in the right panel to add shadows or blurs to your layers: 1. Click `+` next to **Effects** in the right panel. 2. Select an effect from the dropdown menu. 3. Click

to open up the effect settings and adjust them as you need.

### Shadows You can add drop shadows and inner shadows to your layers. Both types have the same settings that include **color**, **X and Y offsets**, **blur**, and **spread**. You can overlay multiple shadows of the same or different types in one layer.

### Blurs There are two types of blur effects you can add to layers: **Gaussian** — blurs the selected layer. **Background** — blurs the layer underneath the selected layer. To see the background blur effect, delete or hide the fill of the selected layer or bring its **fill opacity** below 100%. When using this type of blur, you can also adjust the **saturation** of the blurred layer.

Note: Blur is quite a demanding effect in terms of computing resources. Avoid excessive usage of blurs within a document. For this reason, we limited the maximum blur value that you can set using the slider to 50. Manually, you can set values up to 10,000.

# System requirements Source: https://lunacy.docs.icons8.com/raw/sysreq.md Hardware and software requirements ## Operating system Lunacy runs on the following operating systems: * Windows 10, 11 * macOS 12.0 or later * Linux: latest Ubuntu-based distributions, Snapcraft-supported operating systems, Flatpak-supported systems. Lunacy does not support x86 architectures, only x64 or ARM on all operating systems. ## Hardware requirements | | Minimum | Recommended | | ------------- |-------------|---------------| | RAM |2 GB | 4 GB | | Graphics | 512 MB | 4 GB | | Processor |2-core CPU | 4-core CPU | | Storage | 500 MB of available space, HDD | 1 GB of available space, SSD | Install the latest version of Lunacy from the official website. All versions and installers (including beta versions) are listed in the Release History.

Note: Beta versions are only available through direct installations from the Release History page.

# Teams Source: https://lunacy.docs.icons8.com/raw/teams.md Learn how to organize teamwork Create **teams** to optimize your workflow with design files and systems. With teams, you can collaborate with other users and organize your documents into **projects**, which work just like folders. To start working with teams, log in to your Icons8 account. You can create and see your teams in the left panel of the Home tab.

This chapter covers the basics of working with teams, collaboration and project options, and team management. ## How teams work in Lunacy Teams are available for all registered users. You can create one team on the trial plan and switch over to the paid team plan whenever you’re ready. ### [Trial team plan vs. paid team plan](#trial-vs-paid-teams) | | Trial team plan | Professional team plan | | ---------------------------- | ----------------------- | -------------------------- | |Cloud document limit| Up to 10 documents across all team projects (including deleted documents) | Unlimited| | Document editors/exporters | Up to 3 | Unlimited| | Document viewers | Unlimited | Unlimited| | Version history | Last 30 days | Entire version history | | Deleted files | Stored for 30 days | Stored forever | | Team member limit | Up to 3 (including the team owner) | Add more members to your team as it grows | | Other | - | A personal cloud license for the **team owner** | Once you decide to switch to the paid plan, click over the team name in the left panel of the **Home tab.** Click **Upgrade plan** and follow the instructions.

Note: If you are already a member of a free team (not the owner) and want to create a team with a paid plan, you’ll have to leave the free team first.

**See also:**
Plans and pricing ## Creating teams To **create a team**: 1. Open the **Home** **tab**. 2. In the left panel, click **Create New Team**. 3. Type the name of the team, then click **Create team**. 4. (optional) On the next screen, click **Copy link** to invite other team members. You can always copy the invite link in the upper-right corner **Members** tab of the team page. 5. Click **Continue**.

The user who created the team is the **team owner**. Right-click the team name in the left panel to open up the context menu that lets you: - Rename the team - Change the team avatar - [Upgrade your plan]( ) - [Delete the team]( ) ## Managing teams To **manage your team**, switch to the **Home** **tab**, then click the required team name in the left panel. The team screen will open up, featuring two tabs: [Projects](#projects) and [Members](#members). ### [Projects](#projects) To start creating team documents, you’ll need at least one project to organize them. Think of projects as folders for your team’s documents.

All the documents within team projects automatically become available to all team members. To **create a project**: 1. Select the required team in the left panel of the **Home** **tab**. Make sure you end up on the **Projects** tab. 2. At the top right corner of the screen, click **New Project**. 3. Name your project and press `Enter`.

You can now add documents to the project. Using the three prompts at the top of the project page, you can: - Create new cloud documents. - Import existing `.sketch` files. - Import Figma files. To **show/hide a project name** in the left panel, use the **Pin** (

) button at the top right corner. To **rename a project**, use the context menu in the left panel or click over the project name in the main area. To **change the project avatar**, simply click on it.

To **delete a document** from a project: 1. Right-click the document to open up the context menu. 2. Select **Delete**. Deleted documents move to the **Deleted** section of the **Home** **tab**. There, you can restore or permanently delete documents. To **delete a project**: 1. Delete all documents from the project first. 2. Click the **Delete project** button at the top right corner. **OR** Right-click over the project in the left panel, then click **Delete** on the context menu.

Note: Not all users can delete documents and projects. Check out the table below for details.

### [Members](#members) Use the **Members tab** to: - Generate invite links for new members. - Manage team members and their roles. - Delete team members. - Copy a link for a pending invite to resend it.

To create an invite link, click **Invite user** in the upper-right corner of the screen. The link ends up in your clipboard, and a new record appears in the list of team members. Until the invitee opens the link, you’ll see the **Invite pending** caption instead of their username. Once a user opens the link, their username and avatar will show up on the **Members** tab. You can visit team member profiles by right-clicking their avatars. Use the drop-down list in the **Team permissions** column to assign **user roles** to team members: **Can view**. Assigned by default to all users joining a team via an invite link. Users with this set of permissions can only view the content of team documents. **Can export**. This is for developer handoff. Users with this set of permissions can view designs, inspect layer properties, and export document layers. **Can edit**. Users with this role can create and edit team documents, but they lack certain administrative permissions. **Admin**. Team admins can do all of the above, as well as rename the team, change its avatar, assign roles to other members, and delete members from the team. #### [Role permissions](#role-permissions) | | Owner | Admin | Can edit | Can view | Can export | | --- | --- | --- | --- | --- | --- | | Change the team plan | + | - | - | - | - | | Delete the team | + | - | - | - | - | | Leave the team | - | + | + | + | + | | Rename the team | + | + | - | - | - | | Change the team avatar | + | + | - | - | - | | Assign roles to team members | + | + | - | - | - | | Delete members from the team | + | + | - | - | - | | Create documents | + | + | + | - | - | | Rename documents | + | + | + | - | - | | Delete documents | + | + | + | - | - | | Create a project | + | + | + | - | - | | Rename projects | + | + | + | - | - | | Delete projects | + | + | + | - | - | | Invite new members (copy invite links) | + | + | + | - | - | | View the list of team members | + | + | + | + | + | | View the list of projects | + | + | + | + | + | | View the list of documents | + | + | + | + | + | ### Deleting a team To **delete a team**, right-click the team name on the left panel of the **Home** **tab**, then select **Delete**. Note that only the team owner can delete the team. Deleting the team means that: - All documents associated with the team move to the **Deleted** section of the **Home tab**. - Team members lose access to the documents. - The name of the team appears greyed out in the left **Home tab** panel. A right-click over a deleted team opens up the context menu that lets you either permanently delete the team or restore it.

# Text Source: https://lunacy.docs.icons8.com/raw/text.md Learn how to work with text in Lunacy This section describes how to add and modify text layers in Lunacy, and how to use the built-in placeholder text generation tool. ## Adding text layers To **add a text layer**, press `T` or select

on the toolbar to activate the **Text tool**, then: - **Click anywhere on the canvas** to place the text layer. You can either type your own text or use the generated text options that appear in the dropdown menu as you create the layer. Lunacy applies [horizontal resize mode](#resizing-options) to text added this way. OR - **Click and drag** to place a text layer with your custom size. Placeholder texts will appear inside the layer you’re creating, with their font size set automatically.

Generated text options include names, job titles, emails, countries, headings, paragraphs, and over a dozen more placeholders for you to choose from. Read more about [working with generated text content](#text-generation) below. #### Text-related menus Lunacy has a wide range of text editing options, all located in their respective menus:

- **Text layer properties in the right panel.** The **Text** section appears in the right panel whenever you select a text layer. It’s a more convenient way to access all the text options available on the menu bar, including fonts, their weight and size, line and paragraph spacing, advanced text options such as text case, list styling, and others. - **Text style menu.** Also located in the right panel. It contains the list of all applicable text styles in the document. - **Text options** **on the menu bar.** Open the **Text** tab on the menu bar to access all the text options available in the right panel, as well as the **Fonts embedding** and **Emoji style** options. Read more about [embedding fonts](#fonts-embedding) and [working with emojis](#working-with-emojis) below. ## Editing text To **edit a text layer**: 1. Click the layer on the canvas or select it in the **Layer list**. 2. Press `Enter` or click the **Edit Layer** button (

) on the context toolbar to enable **Edit mode**. 3. Type a new text or edit the existing one and modify any text properties in the **Text** section of the right panel. 4. Once you’re done, press `Esc` to exit the edit mode. Editing a layer with generated texts won’t detach it from the generated content. You’ll still be able to refresh it.

## Text settings Once you add and select a text layer, the **Text** section appears in the right panel, displaying all the available text settings and formatting options:

Note: You can apply different font settings of the same type (fonts, font size, color, text size) to a text within a layer. In this case, when this layer is selected, the fields in the right panel will display Mix.

#### Font list To change fonts, click on the font list menu in the **right panel**, then: - Type the font family name in the field. - Expand the dropdown menu with the list of available fonts, then select one from the list.

The font list displays available fonts and their samples, with your three most recently used fonts displayed at the top. If a font name is too long and seems truncated, hover a cursor over it to view the full name. You can filter fonts using the buttons above the list: - **All**: Shows the full list of available fonts. - **System**: Shows the list of fonts installed on your computer. - **Google**: Shows the list of fonts available in the [Google Fonts](https://fonts.google.com/) library.

Lunacy’s integration with Google Fonts solves most problems with missing fonts. Before you apply a Google font for the first time, it appears without a matching sample. Click on a Google font for Lunacy to automatically download and apply it to the selected text layer.

Note: You might experience a slight loading delay when applying a Google font for the first time. Also, if your computer is not connected to the internet, the list of Google fonts only includes the fonts that you have already used.

#### Font style Open the font style dropdown menu to change a text’s styling properties (**Bold**, *Italic*, ***Bold Italic***, etc.) If a font only has one style, this menu will be grayed out.

To change the properties of an individual word, you don’t necessarily have to select it. Just set the cursor anywhere inside or at the end of a word and change the properties. If you set the cursor at the very end of the text, the formatting options will be applied to the entire text. You can also use standard text editor shortcuts to speed things up: - `Ctrl + B` / `⌘ + B` — **Bold** - `Ctrl + I` / `⌘ + I` — *Italic* - `Ctrl + U` / `⌘ + U` — Underline

#### Font size Use this field to **set the font size** or press `Ctrl + Alt + "+"` / `⌥ + ⌘ + "+"` and `Ctrl + Alt + "-"`/`⌥ + ⌘ + "-"` to increase and decrease the font size respectively.

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

**See also:**
Right panel properties #### Line, letter, and paragraph spacing Use these settings to adjust the spacing between lines, letters, and paragraphs. The default **line spacing** depends on the selected font, as well as its style and size. It appears grayed out, but you can change the value manually anytime. To **restore the default line spacing value**, delete the current value and press `Enter`. The default **letter** and **paragraph spacing** is set to `0`. You can **change spacing values** by: - Selecting the required font size from the list. - Entering a value in the input field. - Hovering over the input field and scrolling with the middle mouse button. - Using shortcuts: - `Ctrl + Alt + >` / `⌥ + ⌘ + >` or `Ctrl + Alt + <` / `⌥ + ⌘ + <` — increase or decrease line spacing. - `Ctrl + Shift + >` / `⌘ + Shift + >` or `Ctrl + Shift + <` / `⌘ + Shift + <` — increase or decrease letter spacing. - There is no shortcut for paragraph spacing.

#### Text color Use this field to **change the text color**: - Click on the color circle to open up the standard color picker. - Choose a color style from the document colors. - Enter a color code manually.

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

**See also:**
Layer and text styles #### [Resizing options](#resizing-options) These three buttons determine how text boxes change in size depending on the content: - **Horizontal resize**: The text box expands horizontally to fit the text content on a single line. - **Vertical resize**: The text box adjusts vertically to fit the text content, while the width of the text box remains unchanged. - **Fixed size**: In this mode, the size of the text box is fixed and does not adjust to fit the text content.

**Some notes:** - If you drag and shrink a text box around a single-line text, the resize mode will adjust automatically. Double-click on it to reset the box to horizontal resize mode and transform the multiline text into a single line again.

- If your text box is larger than the text inside it, click on the text box borders to enable auto-resize mode and make the text box fit snugly around the text.

#### Text alignment Use these buttons to align text inside the text box or use these shortcuts: - `Ctrl + Alt + {` / `⌥ + ⌘ + {` — align text to the left - `Ctrl + Alt + }` / `⌥ + ⌘ + }` — align text to the right - `Ctrl + Alt + T` / `⌥ + ⌘ + T` — center text - `Ctrl + Alt + J` / `⌥ + ⌘ + J` — justify

You can also align text within text boxes using the **alignment magnets** that appear around the text box when you select it. They combine the functions of text alignment and text position so you can position your text right on the canvas.

If you want to hide the magnets, uncheck the **Text Alignment Magnets** option in the **View** section of the menu bar. #### Text position Adjust the position of text content within the text box: - Position text to the top border (default option) - Position text to the bottom border - Center the text within the layer

#### Additional text options ##### Formatting Click

in the **Text** section of the right panel to access additional text formatting options. They include: - **Transform options.** Choose the letter case for your text: - **Aa**: Title Case - **AA**: UPPER CASE - **aa**: lower case - **Decorations.** Apply underline or strikethrough effects. - **List type.** Choose from numbered or bullet point list styles. - **Features.** Add special features like subscript and superscript to your text.

Tip: If you select several text layers, the Selection fonts and colors section in the right panel will display all the fonts and colors present in the selected layers, so you can adjust these properties for several texts at a time.

**See also:**
Selection fonts and colors ##### Text on path The **Text on path** option enables you to bend text in any way you want: 1. Create a text. 2. Create a path. Make sure that the path is below the text in the Layer list. Also, make sure that the text box and the bounding box of the path overlap. 3. With the text selected, click ![textoptions](/public/textoptions.png) on the right panel. Then select the **Text on Path** checkbox. 4. To move the text along the path, drag the text block horizontally. 5. (Optional) If you want glyphs to adjust their appearance to the bends, select the **Warp glyphs** checkbox in **Text options**.

##### Text truncate and Max lines You can truncate overflowing text with an ellipsis (`…`) when it exceeds the bounds of a text box. This keeps your designs clean and readable without manually resizing text layers. Also, you can use the **Max lines** parameter to define the number of lines before the text truncates. This can be useful when working with auto layouts.

## [Text generation](#text-generation) When you need to add placeholder text to your designs, there’s no need to leave the app to google them or think of anything yourself: Lunacy does the work for you. Generated texts include names, job titles, various types of contact information, headings and paragraphs, as well as over a dozen more options. To use text generation, activate the **Text tool** (`T`) and click on the canvas, then: - Choose one of the text generation options that appear in the dropdown menu below the cursor. OR - Start typing the desired placeholder option (“name,” “paragraph,” “email,” etc.) and choose from the narrowed list of options.

When you click and drag to create a custom size text layer, Lunacy automatically fills the layer with placeholder texts. **Auto font size** sets the size of the text depending on the width and height of the text box: Lunacy guesses whether you’re creating a heading, paragraph, email field, and so on. You can either leave these texts or go ahead with your own options.

### Auto refresh To refresh the generated text, click

or press `Shift + R`. Also, anytime you copy a layer with generated text, a new generated placeholder will appear in the duplicate.

This happens due to **Auto Refresh**, which you can turn off by selecting **Detach from Generated Content** in the layer context menu or in the **Layer → Content Generation** section of the menu bar. Combine text generation with other handy Lunacy features, like the Avatar tool and Repeat grid so your design process stays distraction-free:

## Text styles and effects In addition to text settings, you can also apply standard layer effects to your text layers, including: - **Fills** - **Borders** - **Drop shadows** - **Inner shadows** - **Blurs**

You can save combinations of layer effects and text settings as **text styles** which you can reuse across your document. Text styles appear alongside other layer styles in the dropdown menu of the **Style** section in the right panel.

Note: When you edit a text layer that includes effects, Lunacy hides layer styling effects and will show them again once you finish and exit Edit mode. This makes it easier to edit heavily styled text layers, like the one below.

**See also:**
Styling
Layer and text styles ## Text and shapes #### Adding text to shapes You can add a perfectly centered text layer to a shape by selecting the shape, then pressing `T` to activate the text tool. Lunacy will group the shape and the resulting text layer. The text you enter in the layer will be in **Fixed size** mode, restricted by the borders.

This is useful for designing buttons, menus, and similar UI elements, especially when coupled with [text generation](#text-generation). #### Converting text to outlines You can **convert text into outlines**, so that every letter becomes a vector shape: - Press `Ctrl + Shift + O` / `⌘ + Shift + O`. - Select **Outline stroke** on the context menu. - Select **Text → Convert to Outlines** on the menu bar.

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

## [Missing fonts](#missing-fonts) When you open a document, Lunacy checks whether all the required fonts are available on your computer. If some of them are missing but they are available in the Google Fonts library, Lunacy will download and apply them, provided your computer is connected to the internet. If they aren’t part of Google Fonts, the missing fonts button (

) appears on the top bar. Lunacy renders the text layers using the default Inter font, and when you select these layers, the name of the missing font appears in red in the font menu. Click the missing fonts button to open up a dialog box with options to replace the missing fonts with alternatives so you can edit the layers.

## [Fonts embedding](#fonts-embedding) You can embed fonts into your document before sharing it with other people to ensure that the text layers will look exactly as you designed them, even on computers without the fonts used in the document. To **embed fonts**: 1. Go to **Text → Fonts Embedding** on the menu bar. 2. Select the required fonts and click **Embed fonts**.

Note: By embedding a font, you confirm that you have a license allowing you to distribute the font.

## [Using emojis](#working-with-emojis) You can add emojis to text layers in any convenient way by using the emoji keyboard on your OS or pasting them into the text box. The emoji styles in Lunacy include Apple, Microsoft, and Noto style emojis. Switch through them by selecting **Text → Emoji Style** on the menu bar.

# Tips and tricks Source: https://lunacy.docs.icons8.com/raw/tips.md 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

# Tools Source: https://lunacy.docs.icons8.com/raw/tools.md 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

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.

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

Tip: You can drag layers into existing frames or draw a frame over several layers to frame them.

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

Tip: To draw a horizontal, vertical, or 45-degree diagonal path, hold down Shift when placing the second point of a segment.

#### [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`.

Tip: To write multiline comments, use Shift + 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**.

Tips: The default collection of avatars built into Lunacy includes five images, which you can use even if you’re offline. When you’re online, you have access to the full collection of avatars featuring photos of real-life models.

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.

# Color variables Source: https://lunacy.docs.icons8.com/raw/variables.md How to create and manage color variables Color variables are reusable **solid** color presets that help you maintain color consistency across your designs. Once you create a color variable, you can apply it to multiple layers. If you update the variable, all layers using that color will update automatically, making it easier to manage themes and ensure uniformity. Color variables can also be organized into groups, similar to components and styles, making it simple to switch or edit colors across your design project. By default, the **Variables** tab is populated with the variables from the document [palette](#color-palettes-and-auto-shape-colors). However, you're free to delete them, and create your own color variables. ## Creating a color variable 1. Select a layer and open the **Color Picker**. 2. Choose your desired color, then click **Create Color Variable**. 3. Enter a name for the variable, or keep the auto-assigned one (you can rename it anytime).

## Applying a color variable to a Layer 1. Select the layer you want to style. 2. Choose the color variable from the color dropdown in the right panel (see the polygon in the video above). ## Organizing color variables For convenience, you can organize color variables into groups. To create groups: * Use slashes in the variable names. For example, `Group name / Variable name` or `Group name / Subgroup name / Variable name`, etc. OR * Holding down `Shift`, select the variables in the left panel, then open the context menu and click **Group**. ## Editing and managing variables - To edit a variable, click ![settings icon](/public/settingsicon.png) next to it in the left panel. - To delete or rename a variable or group, right-click the variable in the left panel and choose the desired option from the context menu.

Note: If a color variable has an auto-assigned name, it will update automatically when you edit the color. If you’ve set a custom name, the name will stay the same.

## Color palettes and auto shape colors All newly created documents come with default color variables for main, accent, background, and text colors. They appear on the **Variables** tab in a group named `Palette`. You can click

to generate a new palette. Using the document color palette, Lunacy applies color to shapes automatically depending on their size and predicted purpose. Larger shapes have background colors while smaller elements are assigned primary or accent colors.

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 the **Palette** group from the **Variables** tab (watch the video above).