Explore the Lunacy interface
Lunacy’s interface is intuitive and minimal. It won’t take long for you to learn how to interact with it.
This section is a brief overview of the app’s interface. Get acquainted with the basics so you can get started with your designs right away.
These are the main elements of the interface:
Use them to switch between:
- The Layer list
- Document assets (components, layer and text styles)
- Built-in libraries of icons, photos, illustrations, as well as UI kits and plugins
- The list of shortcuts
Shrink the width of the Content tabs panel by dragging its border to the left:
The 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.
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.
This is your working area. Read in detail about working with the canvas.
The 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.
The menu bar
Displays the options and commands related to files, layers, editing, etc. It also features the button, which opens up the Home tab.
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.
The tabs of currently open files are displayed on the right of the Home button. Click on the tabs to switch between them or press
Ctrl + Tab /
⌘ + Tab and
Ctrl + Shift + Tab /
⌘ + Shift + Tab.
Starts the prototype previewer. Read more about prototyping in Lunacy.
This button opens up a menu with these options:
|Button||Description||Windows and Linux Shortcut / Menu Option||MacOS Shortcut / Menu Option|
|The Show/Hide rulers button toggles rulers on and off.||
|The Show grid button enables the display of the square grid.||
|The Layout grid button controls the display of the layout grid and is available only when there is a frame on the canvas.||
|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 on and off.||
The Zoom control
Use it to adjust the zoom value. Read in more detail about zooming options.
Use it to switch between the light and dark themes.
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
When you need to hide the interface partially or entirely:
- 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.
The canvas is your working area. Add layers to it and place them wherever you want.
Read in detail about working with the canvas in the Basics section.
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:
|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
|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
|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
Other basic operations with layers are available on the context menu.
To collapse all layers in the Layer list, press
Ctrl + ~ /
⌘ + ~.
To quickly move to a specific layer in large projects:
- Find it by typing its name in the search field.
- Select it in the Layer list.
Ctrl + 2/
⌘ + 2or 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.
The right panel appears on the right of the Lunacy interface when you select a layer.
When you create a new document, the first thing you’ll see on the right is a list of frame presets. Once you add a frame or layer, the right panel will open up and display its properties. If you deselect all frames and layers, you will see general workspace settings and options.
Read more about working with the right panel.
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:
- Click the
+icon above the Layer list.
- Name the new page.
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.
In the Home tab, you can manage your:
- Personal documents (both local and cloud).
- Teams and team projects.
- Account and profile information.
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:
- 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.
- 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.
- 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 docments.
To create a new document, use any of the following ways depending on the document type:
|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||
|At the top of the screen, click||
Note: Find out more about local and cloud 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:
Ctrl + O/
⌘ + O.
- Click the Open button on the action bar.
- Click File → Open on the menu bar.
Supported formats include
To open a cloud document shared with you:
- Copy the link to the document.
Ctrl + V/
⌘ + Vanywhere in the app.
- Click File → Open URL From Clipboard.
You can import:
.sketchdocuments to Lunacy Cloud
- Figma documents to local
.sketchdocuments (which you can then upload to Lunacy Cloud)
.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
- In Figma, set your file’s sharing options to Anyone with the link → can view/edit.
- Copy the link to the file.
Ctrl + V/
⌘ + Vanywhere 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:
- Click your profile icon in the file browser and choose Settings.
- Scroll down to the Personal access token section.
- Enter a brief description for the token, and press
- Copy the token and return to Lunacy.
- 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.
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:
- Click at the top right corner of your profile page.
- Select Web Profile. This will open your public web profile in the browser.
- Copy the link in the address bar.
- 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.