Export

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

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.

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

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:

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.

Code preview

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

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: