mirror of
https://github.com/icons8/lunacy-docs.git
synced 2026-08-24 02:24:27 -05:00
update free format, re-generate llms.txt
This commit is contained in:
Sergey Mikolaitis
@@ -1,180 +0,0 @@
|
||||
---
|
||||
# Page settings
|
||||
layout: default
|
||||
keywords:
|
||||
comments: false
|
||||
|
||||
# Hero section
|
||||
title: Creating a private Lunacy cloud
|
||||
description: For clients with internet connection and local data storage
|
||||
icon: 'document-body'
|
||||
|
||||
# Micro navigation
|
||||
micro_nav: false
|
||||
|
||||
# Page navigation
|
||||
page_nav:
|
||||
next:
|
||||
content:
|
||||
url:
|
||||
prev:
|
||||
content:
|
||||
url:
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
You should have Docker installed on your system. You can download it [here](https://docs.docker.com/get-docker/).
|
||||
|
||||
## System requirements
|
||||
|
||||
- 2-4 CPU cores
|
||||
- 2-8 GB of RAM (based on users count)
|
||||
- 50-100GB of disk space if connected to cloud storage, or 1TB+ if all data is stored on a single server
|
||||
|
||||
## **Installation**
|
||||
|
||||
**1. Create a Docker compose file**
|
||||
|
||||
If you’re going to store your design data locally, create a file named compose.yaml with the following content:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
db:
|
||||
image: postgres:17
|
||||
restart: always
|
||||
environment:
|
||||
POSTGRES_USER: postgres
|
||||
POSTGRES_PASSWORD: 123
|
||||
POSTGRES_PORT: 5432
|
||||
volumes:
|
||||
- data:/var/lib/postgresql/data
|
||||
networks:
|
||||
- lunacy-net
|
||||
app:
|
||||
image: lunacyd
|
||||
environment:
|
||||
FORCE_HTTPS: false
|
||||
ports:
|
||||
- "5555:80"
|
||||
volumes:
|
||||
- bucket:/root/bucket
|
||||
- changes:/root/wwwroot/DocumentsChanges
|
||||
networks:
|
||||
- lunacy-net
|
||||
depends_on:
|
||||
- db
|
||||
restart: always
|
||||
volumes:
|
||||
data:
|
||||
bucket:
|
||||
changes:
|
||||
networks:
|
||||
lunacy-net: {}
|
||||
```
|
||||
If you prefer to store data in AWS S3 instead of locally, use the following compose.yaml file:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
db:
|
||||
image: postgres:17
|
||||
restart: always
|
||||
environment:
|
||||
POSTGRES_USER: postgres
|
||||
POSTGRES_PASSWORD: 123
|
||||
POSTGRES_PORT: 5432
|
||||
volumes:
|
||||
- data:/var/lib/postgresql/data
|
||||
networks:
|
||||
- lunacy-net
|
||||
app:
|
||||
image: lunacyd
|
||||
environment:
|
||||
FORCE_HTTPS: false
|
||||
S3_ENDPOINT: "<Insert Endpoint like this: eu-central-1>"
|
||||
S3_APPKEY: "<Insert AppKey>"
|
||||
S3_KEYID: "<Insert KeyID>"
|
||||
ports:
|
||||
- "5555:80"
|
||||
volumes:
|
||||
- bucket:/root/bucket
|
||||
- changes:/root/wwwroot/DocumentsChanges
|
||||
networks:
|
||||
- lunacy-net
|
||||
depends_on:
|
||||
- db
|
||||
restart: always
|
||||
volumes:
|
||||
data:
|
||||
bucket:
|
||||
changes:
|
||||
networks:
|
||||
lunacy-net: {}
|
||||
```
|
||||
If you will use a domain name for your server with enabled TLS - set `FORCE_HTTPS` to true.
|
||||
|
||||
**2. Deploy Lunacy cloud**
|
||||
|
||||
In the compose.yaml file directory, run the following command:
|
||||
|
||||
```
|
||||
docker compose up
|
||||
```
|
||||
The server will start and register with the licensing server.
|
||||
|
||||
**3. Contact Icons8**
|
||||
|
||||
Contact us at sales@icons8.com after the server is up and running, and we will provide you with a license.
|
||||
|
||||
## **Initial server setup**
|
||||
|
||||
**1. Access the server**
|
||||
|
||||
Navigate to `http://localhost:5555/` in your web browser.
|
||||
|
||||
**2. Register an Administrator account**
|
||||
|
||||
Create an administrator account. This account is separate from the Lunacy user accounts and is used only for administrative purposes.
|
||||
|
||||
**3. Create Lunacy users**
|
||||
|
||||
Go to the **Users** tab and create user accounts for Lunacy.
|
||||
You can now connect to the dedicated server from the Lunacy app.
|
||||
|
||||
**4. Configure firewall**
|
||||
|
||||
Allow connection to the Lunacy License Server from your intranet `https://lu.icons8.com` `116.203.33.165:443`.
|
||||
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> The Lunacy dedicated server must be connected to the License server for several purposes:</p>
|
||||
<ol>
|
||||
<li>Check License information</li>
|
||||
<li>Check Cloud Server updates</li>
|
||||
<li>Check Lunacy updates</li>
|
||||
<li>Ensure 24/7 in-app support</li>
|
||||
</ol>
|
||||
<p>All data is encrypted and transmitted through a single endpoint, using a single data stream/connection. Updates are downloaded and applied only after the administrator's approval.</p>
|
||||
</div>
|
||||
|
||||
|
||||
## **Connecting Lunacy to the server**
|
||||
|
||||
**1. Open Lunacy**
|
||||
|
||||
**2. Log Out**
|
||||
|
||||
If you are currently logged in, log out of your Icons8 account.
|
||||
|
||||
**3. Connect to the server**
|
||||
|
||||
Navigate to **Home** > **Log in** > **Dedicated** and enter the following details:
|
||||
|
||||
- `http:\\[your_ip_address]:5555` OR `https://your_domain.com/` (if you’ve configured a domain name)
|
||||
- username configured in the previous step
|
||||
- password
|
||||
|
||||
Click **Connect**. Lunacy will connect to the private cloud.
|
||||
|
||||
|
||||
|
||||
|
||||
+663
-344
File diff suppressed because it is too large
Load Diff
+316
-114
@@ -1053,19 +1053,29 @@ The main advantage of using components is that you can edit multiple instances o
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_basics.png" height="auto"><source src="/public/component_basics.mp4" type="video/mp4"></video>
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> If a component has multiple states, any changes you make apply only to instances of the same state. Instances of other states will not be affected.</p> </div>
|
||||
|
||||
## [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.
|
||||
* **Main component**. The original element 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 page**. A dedicated document page used for storing main components. Lunacy adds it automatically.
|
||||
|
||||
* **Component state**. Components from the same category or subcategory are called **component states**. They define the different styles for one component.
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> Starting from v.12, the Component page appears only in two cases:</p>
|
||||
<ul>
|
||||
<li>When you copy a component from another file to a local file</li>
|
||||
<li>When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
* **Component state**. A component can have different variants (Default, Hovered, Pressed, etc.). These variants are called [component states](#component-states).
|
||||
|
||||
* **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 <a href="https://lunacy.docs.icons8.com/autolayout/#nested-auto-layouts" target="_blank">nested auto layouts</a>.
|
||||
|
||||
@@ -1073,12 +1083,12 @@ These are the basic terms related to components and their functions:
|
||||
|
||||
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`.
|
||||
1. Select the element you want to convert into a component.
|
||||
2. Click <embed type="image/svg+xml" alt="go_to_main" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/0yVpQqG2_kmdN0fYegHJ4g.svg" width="16" /> in the context toolbar at the top of the canvas or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_components_methods.png" height="auto"><source src="/public/creating_components_methods.mp4" type="video/mp4"></video>
|
||||
<embed type="image/svg+xml" alt="creating_component" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/hRtUIR33v0uSHlyfeTDbqA.svg" />
|
||||
|
||||
You can also select a layer and click <embed type="image/svg+xml" alt="go_to_main" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/0yVpQqG2_kmdN0fYegHJ4g.svg" width="16" /> in the context toolbar at the top of the canvas or select the **Create component** option on the context menu.
|
||||
<!--
|
||||
|
||||
#### Layers vs. Frames
|
||||
|
||||
@@ -1092,11 +1102,16 @@ The difference is shown here:
|
||||
|
||||
Find out more about [component pages](#components-page).
|
||||
|
||||
-->
|
||||
|
||||
#### Components and instances in the Layer list
|
||||
|
||||
<embed type="image/svg+xml" alt="components_instances_in_layer_list" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/f8iTdn1orUiVLyZVImJClg.svg" width="844" />
|
||||
<embed type="image/svg+xml" alt="Components_in_layer_list" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/-kkur9FADkmKjIa6O0cOBg.svg" />
|
||||
|
||||
Main components are bold and colored pink (<embed type="image/svg+xml" alt="color_code_F15085" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/b6VBjbQ0FEaLpb01JY4uEw.svg" width="12" />) in the <a href="https://lunacy.docs.icons8.com/interface/#layer-list" target="_blank">Layer list</a>, and there’s a component symbol (<embed type="image/svg+xml" alt="main_component" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/JApz_Mo2XE6YIoPMoYA3ow.svg" width="16" />) in front of their name.
|
||||
|
||||
Main components are bold and colored pink in the <a href="https://lunacy.docs.icons8.com/interface/#layer-list" target="_blank">Layer list</a>, and there’s a component symbol (<embed type="image/svg+xml" alt="main_component" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/JApz_Mo2XE6YIoPMoYA3ow.svg" width="16" />) in front of their name.
|
||||
|
||||
Сomponents with more than one [state](#component-states) come with a dashed border around the symbol.
|
||||
|
||||
Component instance names aren’t bold but have the instance symbol (<embed type="image/svg+xml" alt="instance_icon" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/7zBFwNg0JEKWT8fAiIVn9A.svg" width="16" />) and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel.
|
||||
|
||||
@@ -1104,11 +1119,14 @@ Component instance names aren’t bold but have the instance symbol (<embed type
|
||||
|
||||
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:
|
||||
To **add a component instance** to the canvas, you can:
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/reusing_components_left_panel.png" height="auto"><source src="/public/reusing_components_left_panel.mp4" type="video/mp4"></video>
|
||||
- Drag it from the **Components tab** to where you want to place it.
|
||||
- Duplicate the existing instance on the canvas.
|
||||
|
||||
Right-click a component in the left panel to bring up the context menu with these options:
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/adding_components_ph.png" height="auto"><source src="/public/adding_copmonents.mp4" type="video/mp4"></video>
|
||||
|
||||
Right-click a component in the **Components tab** to bring up the context menu with these options:
|
||||
|
||||
- Rename component
|
||||
- Edit component
|
||||
@@ -1118,7 +1136,13 @@ Right-click a component in the left panel to bring up the context menu with thes
|
||||
- Expand all
|
||||
- Collapse all
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> If you used any components from built-in or manually created <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a>, they will also appear in the Components tab.</p> </div>
|
||||
<embed type="image/svg+xml" alt="components_conext_menu" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/eML-tlBOk0aTrB6E2O7xiA.svg" />
|
||||
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> If you created any elements using the <a href="https://lunacy.docs.icons8.com/tools/#gui-tool" target="_blank">GUI tool</a>, they will also appear in the <b>Components tab</b> in the group named <b>Web</b>.</p> </div>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
## [Managing components](managing-components)
|
||||
|
||||
@@ -1159,39 +1183,51 @@ You can use **Components page** that Lunacy generates automatically to store all
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> 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.</p> </div>
|
||||
|
||||
-->
|
||||
|
||||
## [Component states](#component-states)
|
||||
|
||||
You can create several **states** for a component and switch between them as needed in the **right panel**.
|
||||
You can create multiple states for a component and switch between them as needed. States let you define variations like *Default*, *Hover*, or *Pressed*.
|
||||
|
||||
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.
|
||||
1. Select a component.
|
||||
2. Click <embed type="image/svg+xml" alt="Add New" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/xeqQWIYNtUePMxnmkm1vMA.svg" /> in the context tool bar or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. A dashed frame will appear around the component, and the new state will be added below the original.
|
||||
3. Make the required changes to the new state.
|
||||
4. To create additional states, select the original component or any existing state and click `+` again.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_component_state.png" height="auto"><source src="/public/creating_component_state.mp4" type="video/mp4"></video>
|
||||
|
||||
A new component will appear near the default main component, defining the new component state.
|
||||
Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.).
|
||||
|
||||
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**.
|
||||
To **rename a state**:
|
||||
|
||||
New component states for a distinct component will be displayed in the right panel as you select the component’s instances.
|
||||
1. Select the state.
|
||||
2. Press F2 and type the new state name after the slash (for example, `Button / Hover` > `Button / Disabled`).
|
||||
|
||||
**Alternative workflow**
|
||||
|
||||
You can also create a new component state from any instance on the canvas.
|
||||
|
||||
See both methods in the video below.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_states_ph.png" height="auto"><source src="/public/copmonent_states.mp4" type="video/mp4"></video>
|
||||
|
||||
To **switch through component states**:
|
||||
|
||||
1. Select a component instance.
|
||||
2. Choose the new component state in the **right panel**.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/switching-component_state.png" height="auto"><source src="/public/switching-component_state.mp4" type="video/mp4"></video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/swtiching_component_states_ph.png" height="auto"><source src="/public/swtiching_copmonent_states.mp4" type="video/mp4"></video>
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> 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.</p> </div>
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> Switching component states doesn’t affect overrides.</p> </div>
|
||||
|
||||
<!--
|
||||
|
||||
## 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**:
|
||||
This is how component categories and subcategories appear in the **Components tab**:
|
||||
|
||||
<embed type="image/svg+xml" alt="categories_components" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/TDamndg4PkCuDPWyD2wrEQ.svg" width="844" />
|
||||
|
||||
@@ -1207,105 +1243,99 @@ 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**:
|
||||
You can **edit a component**:
|
||||
|
||||
- Right on the canvas like any other design element. This is the most straightforward and convenient way to edit components.
|
||||
- In the **Component editor**.
|
||||
- Directly in the **Components page**.
|
||||
- On 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 <embed type="image/svg+xml" alt="exit_component_editor" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/CafkdkTnjUyKoai6_Ky0UQ.svg" width="16" /> on the context toolbar, click anywhere over the dimmed area, or press `Esc` to exit the component editor.
|
||||
2. You'll see a pink frame around the canvas and the contents of the component will appear in the **Layer list**.
|
||||
3. Use the right panel to make the required changes.
|
||||
4. Click anywhere over the canvas, or press `Esc` to exit the component editor.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/editing_components_1.png" height="auto"><source src="/public/editing_components_1.mp4" type="video/mp4"></video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_editor_ph.png" height="auto"><source src="/public/copmonent_editor.mp4" type="video/mp4"></video>
|
||||
|
||||
#### Making edits in the Components page
|
||||
#### Making edits on 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**.
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> Starting from v.12, the Component page appears only in two cases:</p>
|
||||
<ul>
|
||||
<li>When you copy a component from another file to a local file</li>
|
||||
<li>When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
1. Right-click on an instance and select **Go to 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 used the **Go to 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.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/editing_components_2.png" height="auto"><source src="/public/editing_components_2.mp4" type="video/mp4"></video>
|
||||
|
||||
## [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.
|
||||
You can swap between instances of 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 <embed type="image/svg+xml" alt="swap_components" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/FwHiX5HVcE23ZwIlDilhyw.svg" width="16" />
|
||||
next to it:
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components_swap_tab.png" height="auto"><source src="/public/components_swap_tab.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
**Method 2**:
|
||||
|
||||
1. Open the **component state menu** in the **Component** section of the right panel.
|
||||
2. Select the required category and component state.
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components_swap_rightpanel.png" height="auto"><source src="/public/components_swap_rightpanel.mp4" type="video/mp4"></video>
|
||||
1. In the right panel, open the Component list.
|
||||
2. Select the required component (and its state).
|
||||
|
||||
The video below shows both these merthods.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_switching_ph.png" height="auto"><source src="/public/copmonent_switching.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
|
||||
#### Deleting components
|
||||
|
||||
Delete 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.
|
||||
|
||||
|
||||
## [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:
|
||||
### Creating instances
|
||||
|
||||
- Press `Ctrl + D` or `Ctrl + C → Ctrl + V`.
|
||||
- Hold down `Alt`, then drag to place an instance on the canvas.
|
||||
To **add a component instance** to the canvas, you can:
|
||||
|
||||
#### Component instance properties
|
||||
- Drag it from the **Components tab** to where you want to place it.
|
||||
- Duplicate the existing instance on the canvas.
|
||||
|
||||
For a component instance, the **Component** section in the **right panel** will look like this:
|
||||
See the video in the [Reusing components](#reusing-components) section.
|
||||
|
||||
<embed type="image/svg+xml" alt="rightpanel_instance" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/zztZgnyr9EqhG8-NFu-_hA.svg" width="844" />
|
||||
### Instance properties
|
||||
|
||||
#### Component state menu
|
||||
When you select a component instance, the right panel shows an additional section that looks like this:
|
||||
|
||||
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 <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > button appears in this section, indicating that the instance has an override:
|
||||
|
||||
<embed type="image/svg+xml" alt="instance_reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/5lHhTwB-kkq7WL8ZYDn_QQ.svg" width="844" />
|
||||
|
||||
Click it to **reset the override** and revert the instance back to the style of the main component.
|
||||
<embed type="image/svg+xml" alt="instance_properties" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/smJwPS7NKUexrqNTb-1Sxg.svg" />
|
||||
|
||||
|
||||
## Creating overrides
|
||||
- **Component list**. A dropdown menu displaying the name of the component. When open, it shows all other components available in the document. By choosing items in the list you can [swap components](#swapping-components).
|
||||
- **Component states**. Previews of all availalable [component states](#component-states).
|
||||
- **Detach from component**. Use this button (or `Ctrl + Alt + D` / `⌘ + ⌥ + B`) to detach an instance from its component. Once detached, the instance will no longer reflect changes made to the original component.
|
||||
- **Go to Component**. This button will bring you to the instance's main component.
|
||||
- **Reset overrides**. Use this button to remove all [overrides](#overrides) and restore the instance to the component’s original appearance.
|
||||
- **Component type**. This setting currently has no visible effect.
|
||||
|
||||
## Overrides
|
||||
|
||||
To reiterate, an override is any edit you make to a component instance. Let's go over them in detail.
|
||||
|
||||
@@ -1315,11 +1345,11 @@ Click `▾` next to the title of a component instance in the Layer list to expan
|
||||
|
||||
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**.
|
||||
Here’s a simple example of a card component made up of an image (an oval with an **Image** fill) and a labeled button. We applied three overrides: changed the **button color**, updated the **button label**, and replaced the **image**.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_simple_overrides.png" height="auto"><source src="/public/creating_simple_overrides.mp4" type="video/mp4"></video>
|
||||
|
||||
You can easily reset all of these overrides by pressing <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > in the **Component** section, like in the demo above.
|
||||
You can easily reset all of these overrides by pressing <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > in the instance properties.
|
||||
|
||||
Here’s a full list of layers and properties you can create overrides for:
|
||||
|
||||
@@ -1330,6 +1360,8 @@ Here’s a full list of layers and properties you can create overrides for:
|
||||
- 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 <a href="https://lunacy.docs.icons8.com/text/#text-generation-and-text-snippets" target="_blank">text generation</a> and the <a href="https://lunacy.docs.icons8.com/tools/#avatar-tool" target="_blank">Avatar tool</a>.
|
||||
@@ -1340,7 +1372,7 @@ 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.
|
||||
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 component.
|
||||
|
||||
#### Fills and images
|
||||
|
||||
@@ -1377,7 +1409,7 @@ So, when we were creating component instances in the demo above, new texts appea
|
||||
|
||||
#### 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.
|
||||
In the 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:
|
||||
|
||||
@@ -1441,6 +1473,8 @@ For example, there’s quite a few auto layouts in our profile card examples:
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_auto_layout_main.png" height="auto"><source src="/public/component_auto_layout_main.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
-->
|
||||
|
||||
## 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.
|
||||
@@ -1726,7 +1760,7 @@ With a single export operation, you can get multiple files of different formats
|
||||
|
||||
| Format type | Supported formats |
|
||||
| ----------- | ---------------------------------- |
|
||||
| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `GIF` |
|
||||
| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `TIFF`, `BMP` |
|
||||
| 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.
|
||||
@@ -2034,6 +2068,50 @@ Contact us via our feedback form:
|
||||
**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.
|
||||
|
||||
|
||||
### How can I install Lunacy Beta on Flatpack
|
||||
|
||||
You can install Lunacy either as a stable release or as a beta version via Flatpak. The beta version lets you try new features earlier, but only one version (stable or beta) can be installed at a time.
|
||||
|
||||
Both versions share the same application ID: `com.icons8.Lunacy`.
|
||||
|
||||
#### Installing Lunacy Beta (from scratch)
|
||||
|
||||
1. Add the Flathub Beta repository (if not already added):
|
||||
|
||||
```bash
|
||||
flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo
|
||||
```
|
||||
2. Install Lunacy Beta:
|
||||
|
||||
```bash
|
||||
flatpak install flathub-beta com.icons8.Lunacy
|
||||
```
|
||||
#### Switching from Stable to Beta
|
||||
|
||||
1. Uninstall the stable version:
|
||||
|
||||
```bash
|
||||
flatpak uninstall com.icons8.Lunacy
|
||||
```
|
||||
2. Add the Flathub Beta repository (if not already added):
|
||||
|
||||
```bash
|
||||
flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo
|
||||
```
|
||||
3. Install the beta version:
|
||||
|
||||
```bash
|
||||
flatpak install flathub-beta com.icons8.Lunacy
|
||||
```
|
||||
|
||||
#### Running Lunacy
|
||||
|
||||
To run Lunacy (both stable and beta), use the same command:
|
||||
|
||||
```bash
|
||||
flatpak run com.icons8.Lunacy
|
||||
```
|
||||
|
||||
## Questions about features
|
||||
|
||||
Questions about existing or upcoming Lunacy features.
|
||||
@@ -2635,7 +2713,8 @@ There are several types of layers in Lunacy:
|
||||
* <a href="https://lunacy.docs.icons8.com/components/" target="_blank">Components and component instances</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/tools/#icon-tool" target="_blank">Icons</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/tools/#hotspot-tool" target="_blank">Hotspots</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/tools/#slice-tool" target="_blank">Slices</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/tools/#slice-tool" target="_blank">Slices</a>
|
||||
* [Sections](#sections)
|
||||
|
||||
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 <a href="https://lunacy.docs.icons8.com/interface/#layer-list" target="_blank">Layer list</a>.
|
||||
|
||||
@@ -3053,63 +3132,88 @@ You can adjust the individual resizing behavior for each layer in the **Constrai
|
||||
<br>
|
||||
<a href="https://lunacy.docs.icons8.com/autolayout/#resizing-auto-layout-elements">Resizing auto layout elements</a>
|
||||
|
||||
# Layer and text styles
|
||||
## Sections
|
||||
|
||||
Sections are a special layer type that helps you keep related objects together and organize your canvas. They work like visual containers for grouping content.
|
||||
|
||||
With sections, you can:
|
||||
|
||||
- Give them custom names for better navigation
|
||||
- Set a fill color to distinguish different areas of your design
|
||||
- Move sections across the canvas along with all their contents
|
||||
- Nest sections inside one another to create a clear hierarchy
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/sections_ph.png" height="auto"><source src="/public/sections.mp4" type="video/mp4"></video>
|
||||
|
||||
### Working with sections
|
||||
|
||||
- To create a section, click <embed type="image/svg+xml" alt="Section_icon" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/_rDC1o7Vd0mxeecB4RJcZw.svg" />
|
||||
on the toolbar or press `Shift+S`.
|
||||
- To select a section, click its label at the top-left corner.
|
||||
- Once selected, you can move or resize the section.
|
||||
- All objects inside a section move along with it.
|
||||
|
||||
# Styles
|
||||
Source: https://lunacy.docs.icons8.com/raw/layerstyles.md
|
||||
|
||||
Learn how to speed up your work with layer and text styles
|
||||
Learn how to speed up your work with 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.
|
||||
Styles are sets of predefined properties (fills, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you edit a style, all associated layers update automatically.
|
||||
|
||||
The only difference between layer and text styles is that the latter also include typography properties like font, size, line spacing, etc.
|
||||
Lunacy supports the following style types:
|
||||
|
||||
- **Color styles** — for fills and borders
|
||||
|
||||
- **Effect styles** — for shadows and blurs
|
||||
|
||||
- **Text styles** — for fonts, sizes, line spacing, and other text properties
|
||||
|
||||
- **Layout grid styles** — for layout guides applied to frames
|
||||
|
||||
You can manage and organize styles in the **Styles** tab.
|
||||
|
||||
<embed type="image/svg+xml" alt="styles_tab" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/B4vRzcgloEGqyUB7hUGTFg.svg" />
|
||||
|
||||
|
||||
### 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 1.**
|
||||
|
||||
1. Select a layer with the properties you're likely to reuse.
|
||||
2. Go to the **Styles** tab and click `+` next to the type of style you're going to create.
|
||||
3. Type the new new style name and press `Enter` or click anywhere over the canvas.
|
||||
|
||||
**Way 2.** Click `+` in the **Styles** list and define all the required properties.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_styles_ph.png" height="auto"><source src="/public/creating_styles.mp4" type="video/mp4"></video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_stylesv12.png" height="auto"><source src="/public/creating_styles_v12.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
|
||||
### 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).
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/applying_styles_v12_ph.png" height="auto"><source src="/public/applying_styles_v12.mp4" type="video/mp4"></video>
|
||||
|
||||
### Modifying a layer style
|
||||
|
||||
There are two ways to modify a style.
|
||||
### Modifying a style
|
||||
|
||||
**Way 1.**
|
||||
|
||||
1. Switch to the **Styles** tab, then click the style you want to modify
|
||||
1. Switch to the **Styles** tab, hover over the style you want to modify, then click <embed type="image/svg+xml" alt="Edit_icon" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/ois3SsbaIE-VPWPJ6_gN-w.svg" />.
|
||||
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.
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/editing_styles_v12_ph.png" height="auto"><source src="/public/editing_styles_v12.mp4" type="video/mp4"></video>
|
||||
|
||||
<embed type="image/svg+xml" alt="editing_style" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/14zxECrRDUSbcciXXjl2PQ.svg" />
|
||||
|
||||
|
||||
3. Use one of the following options:
|
||||
|
||||
* **Update Style** (<embed type="image/svg+xml" alt="Checkmark" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/lQA_atI7Bk-0aprvMzlB5w.svg" />): Saves the changes to the existing style.
|
||||
* **Create New Layer Style** (<embed type="image/svg+xml" alt="Plus" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/_rTigJIyfUmibMI3iRNl5Q.svg" />): Saves the changes to a new style.
|
||||
* **Reset Style** (<embed type="image/svg+xml" alt="Reset" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/-CkP9OjHL0Kz5Vxza54Eig.svg" />) : Discards all changes that you have made.
|
||||
|
||||
|
||||
### Detaching a style
|
||||
|
||||
Select the required layer and click the **Detach style** button shown below.
|
||||
|
||||
<embed type="image/svg+xml" alt="detaching_style" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/9IaLOhrj3kaLEqqUJV4FKw.svg" />
|
||||
<embed type="image/svg+xml" alt="detaching_styles" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/k5f7tarviE6PmC2qMV4jig.svg" />
|
||||
|
||||
|
||||
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.
|
||||
@@ -3118,7 +3222,7 @@ The appearance of the layer remains the same, but it is no longer associated wit
|
||||
|
||||
It is a good practice to organize styles into groups similar to those shown in the figure below.
|
||||
|
||||
<embed type="image/svg+xml" alt="organizing_styles" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/H7X3965HHUWrgLYs26FQLA.svg" />
|
||||
<embed type="image/svg+xml" alt="organizing_stylesv12" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/J2FHVidH90CQnS6vHLPreA.svg" />
|
||||
|
||||
|
||||
To organize your styles into groups, consider the following format of style names:
|
||||
@@ -3325,6 +3429,104 @@ Here's how you can apply changes to a live webpage:
|
||||
|
||||
In your browser, reload the page by pressing `Ctrl + F5`/ `⌘ ⌥ R` to make sure that any cached content is cleared.
|
||||
|
||||
# LLM Integration
|
||||
Source: https://lunacy.docs.icons8.com/raw/mcp.md
|
||||
|
||||
using Model Context Protocol (MCP)
|
||||
|
||||
## What is MCP?
|
||||
|
||||
The Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect with external data sources and tools. It provides a standardized way for AI models to access and interact with various applications, databases, and services while maintaining security and user control.
|
||||
|
||||
MCP acts as a bridge between AI assistants like Claude and your local applications, allowing them to work together seamlessly. Instead of manually copying and pasting information between applications, MCP enables direct communication and data exchange.
|
||||
|
||||
## How MCP Works in Lunacy
|
||||
|
||||
Lunacy implements MCP through a local server that runs alongside your Lunacy application. This server provides secure access to your Lunacy projects, allowing AI assistants to:
|
||||
|
||||
* Access information about selected objects in your designs
|
||||
* Retrieve color variables from your design system
|
||||
* Get details about components and their properties
|
||||
* Access images and other design assets
|
||||
|
||||
The MCP server launches automatically when enabled and runs locally on your machine, ensuring your design data remains secure and private.
|
||||
|
||||
## Enabling MCP in Lunacy
|
||||
|
||||
To start using MCP with Lunacy:
|
||||
|
||||
|
||||
1. Open Lunacy
|
||||
2. Navigate to the main menu
|
||||
3. Select **AI → Model Context Protocol → MCP Server Enabled**
|
||||
4. The MCP server will start running locally and be ready to accept connections
|
||||
|
||||
## Connecting Claude to Lunacy's MCP Server
|
||||
|
||||
To connect Claude Desktop to your Lunacy MCP server:
|
||||
|
||||
### Step 1: Install Claude Desktop
|
||||
|
||||
Download and install Claude Desktop from <https://claude.ai/download>
|
||||
|
||||
### Step 2: Get MCP Configuration
|
||||
|
||||
In Lunacy, you have two options:
|
||||
|
||||
**Option A: Full Configuration (Recommended for new setups)**
|
||||
|
||||
* Go to **AI → Model Context Protocol → Copy MCP Servers File**
|
||||
* This copies a complete JSON configuration file
|
||||
|
||||
**Option B: Single Server Entry (For existing MCP setups)**
|
||||
|
||||
* Go to **AI → Model Context Protocol → Copy MCP Server Entry**
|
||||
* This copies just the Lunacy server configuration line
|
||||
|
||||
### Step 3: Configure Claude Desktop
|
||||
|
||||
|
||||
1. Open Claude Desktop
|
||||
2. Open the Settings menu (press Ctrl+, on Windows or Cmd+, on macOS)
|
||||
3. Navigate to the **Developer** tab
|
||||
4. Click **Edit Config** - this will open your file manager with the `claude_desktop_config.json` file highlighted
|
||||
5. Open the highlighted `claude_desktop_config.json` file in any text editor
|
||||
6. If using Option A: Replace the entire file contents with the copied JSON configuration
|
||||
7. If using Option B: Add the copied server entry to your existing `mcpServers` section, maintaining valid JSON structure
|
||||
8. Save the file and restart Claude Desktop completely
|
||||
|
||||
Once configured, Claude will be able to interact directly with your Lunacy projects and access design information in real-time.
|
||||
|
||||
## Creative Use Cases
|
||||
|
||||
The real power of MCP integration comes from combining Lunacy's design data with other MCP servers to create seamless, automated workflows:
|
||||
|
||||
**AI-Powered Design-to-Code Pipeline** Select a complex dashboard layout in Lunacy and ask Claude to generate a complete React application with TypeScript, including component structure, state management, API integration points, and even mock data that matches your design specifications. Claude can analyze your color variables and component hierarchy to create a fully functional prototype.
|
||||
|
||||
**Intelligent Design System Documentation** Combine Lunacy MCP with file system access to automatically generate comprehensive design system documentation. Claude can analyze your components, extract design patterns, document usage guidelines, and create markdown files with embedded design tokens and component examples - all while maintaining your existing folder structure.
|
||||
|
||||
**Cross-Platform Design Consistency** Use multiple MCP servers to ensure design consistency across platforms. Claude can compare your Lunacy designs with existing mobile apps (via screenshots), web implementations (via web scraping), and documentation (via file system access) to identify inconsistencies and suggest improvements.
|
||||
|
||||
**Automated Asset Optimization Workflow** Connect Lunacy with file system and image processing MCP servers. Claude can analyze your selected designs, export optimized assets in multiple formats, automatically organize them into proper folder structures, and even generate the corresponding CSS sprites or icon fonts.
|
||||
|
||||
**Dynamic Content-Aware Design** Combine Lunacy data with database or API MCP servers to create designs that adapt to real content. Claude can analyze your layout components, fetch actual data from your systems, and suggest design modifications based on content length, image aspect ratios, or data complexity.
|
||||
|
||||
**Smart Design Review and Feedback** Use Lunacy MCP with communication tools (Slack, email) and project management systems. Claude can analyze your selected designs, compare them against design guidelines, generate detailed review reports, and automatically distribute them to stakeholders with embedded design previews and actionable feedback.
|
||||
|
||||
**Intelligent Brand Compliance Checking** Connect Lunacy with document analysis MCP servers to automatically verify brand guideline compliance. Claude can analyze your designs against brand documentation, check color usage, typography consistency, spacing rules, and generate compliance reports with specific recommendations.
|
||||
|
||||
**Automated Handoff Documentation** Combine Lunacy data with development tools MCP servers to create comprehensive developer handoffs. Claude can generate technical specifications, component props documentation, animation guidelines, responsive behavior notes, and integration instructions - all tailored to your specific tech stack.
|
||||
|
||||
## Benefits of MCP Integration
|
||||
|
||||
* **Seamless Workflow**: No need to manually export or copy design information
|
||||
* **Real-time Access**: Claude always works with your current project state
|
||||
* **Enhanced Productivity**: Get instant analysis and suggestions for your designs
|
||||
* **Secure Connection**: All data remains local and private
|
||||
* **Context-Aware Assistance**: Claude understands your specific design context
|
||||
|
||||
The MCP integration transforms how you work with AI assistance in your design process, making it more efficient and contextually relevant to your actual projects.
|
||||
|
||||
# Private Cloud
|
||||
Source: https://lunacy.docs.icons8.com/raw/private_cloud.md
|
||||
|
||||
@@ -5336,7 +5538,7 @@ Below is a brief description of all available tools, which we will then go over
|
||||
| <embed type="image/svg+xml" alt="text_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/P69ZzGxWo0upt-S25nVP5g.svg" width="28" /> | **Text tool.** Add text layers to the document. Comes with an on-canvas <a href="https://lunacy.docs.icons8.com/text/#text-generation-and-text-snippets" target="_blank">text generation</a> option.| `T` |
|
||||
| <embed type="image/svg+xml" alt="pen_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/ox33KNr9I0Sby8cSNl1BIg.svg" width="28" /> | **Pen tool.** Used for creating custom vectors or shapes.| `P` |
|
||||
| <embed type="image/svg+xml" alt="img_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/Ow3QgJBiy0KHVu-4_JiYXQ.svg" width="28" /> | **Image tool.** Use it for importing images. | `M` |
|
||||
| <embed type="image/svg+xml" alt="gui_tools" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/jVG8u-6oukqQkwog6PvoVg.svg" width="240" /> | **GUI tools.** A set of basic interface element components from <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a> (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button<br>`D` — text input field<br>`F` — checkbox<br>`Y` — radio button<br>`J` — toggle<br>`W` — dropdown |
|
||||
| <embed type="image/svg+xml" alt="gui_tools" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/jVG8u-6oukqQkwog6PvoVg.svg" width="240" /> | **GUI tool.** A set of basic interface element components from <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a> (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button<br>`D` — text input field<br>`F` — checkbox<br>`Y` — radio button<br>`J` — toggle<br>`W` — dropdown |
|
||||
| <embed type="image/svg+xml" alt="icon_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/B0LK2cd1-USlSrOotEB22Q.svg" width="28" /> | **Icon tool.** Keeps recently used icons at hand. | `X` |
|
||||
| <embed type="image/svg+xml" alt="comment_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/P4EDGuPTdkSRCxwgY5ydxw.svg" width="28" /> | **Comment tool.** Activate it to leave <a href="https://lunacy.docs.icons8.com/comments/" target="_blank">comments</a> anywhere on the canvas (only available in <a href="https://lunacy.docs.icons8.com/clouddocs/" target="_blank">cloud documents</a>).| `C` |
|
||||
| <embed type="image/svg+xml" alt="scale_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/scm-lgqtykigv546NkSUrQ.svg" width="28" /> | **Scale tool.** Proportionally change the size of the elements on the canvas. | `K` |
|
||||
|
||||
+2
-2
@@ -17,9 +17,10 @@
|
||||
- [Images](https://lunacy.docs.icons8.com/raw/images.md): Optimize your work with images in Lunacy.
|
||||
- [Interface](https://lunacy.docs.icons8.com/raw/interface.md): Explore the Lunacy interface.
|
||||
- [Layers](https://lunacy.docs.icons8.com/raw/layers.md): Learn how to work with different types of layers in Lunacy.
|
||||
- [Layer and text styles](https://lunacy.docs.icons8.com/raw/layerstyles.md): Learn how to speed up your work with layer and text styles.
|
||||
- [Styles](https://lunacy.docs.icons8.com/raw/layerstyles.md): Learn how to speed up your work with styles.
|
||||
- [Built-in graphics](https://lunacy.docs.icons8.com/raw/libraries.md): How to make use of our built-in icons, photos, images and UI kits.
|
||||
- [Linked design](https://lunacy.docs.icons8.com/raw/linked_design.md): How to update live webpages directly from Lunacy.
|
||||
- [LLM Integration](https://lunacy.docs.icons8.com/raw/mcp.md): using Model Context Protocol (MCP).
|
||||
- [Private Cloud](https://lunacy.docs.icons8.com/raw/private_cloud.md): How to collaborate in total privacy.
|
||||
- [Prototyping](https://lunacy.docs.icons8.com/raw/prototyping.md): Learn how to create interactive prototypes in Lunacy.
|
||||
- [Shared libraries](https://lunacy.docs.icons8.com/raw/sharedlibraries.md): How to reuse components and styles from other files.
|
||||
@@ -35,7 +36,6 @@
|
||||
## Optional
|
||||
|
||||
- [Contacts](https://lunacy.docs.icons8.com/raw/contact.md): Reach out to us on any of our platforms.
|
||||
- [Free format](https://lunacy.docs.icons8.com/raw/free-format.md): Details of the .free format for developers.
|
||||
- [Localization](https://lunacy.docs.icons8.com/raw/localization.md): Help us localize Lunacy to your language.
|
||||
- [Release History](https://lunacy.docs.icons8.com/raw/release-notes.md): New features and fixes for each version of Lunacy.
|
||||
- [Legacy Release History](https://lunacy.docs.icons8.com/raw/rn_before_v10.md): New features and fixes for each version of Lunacy.
|
||||
|
||||
+120
-86
@@ -9,19 +9,29 @@ The main advantage of using components is that you can edit multiple instances o
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_basics.png" height="auto"><source src="/public/component_basics.mp4" type="video/mp4"></video>
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> If a component has multiple states, any changes you make apply only to instances of the same state. Instances of other states will not be affected.</p> </div>
|
||||
|
||||
## [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.
|
||||
* **Main component**. The original element 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 page**. A dedicated document page used for storing main components. Lunacy adds it automatically.
|
||||
|
||||
* **Component state**. Components from the same category or subcategory are called **component states**. They define the different styles for one component.
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> Starting from v.12, the Component page appears only in two cases:</p>
|
||||
<ul>
|
||||
<li>When you copy a component from another file to a local file</li>
|
||||
<li>When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
* **Component state**. A component can have different variants (Default, Hovered, Pressed, etc.). These variants are called [component states](#component-states).
|
||||
|
||||
* **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 <a href="https://lunacy.docs.icons8.com/raw/autolayout.md#nested-auto-layouts" target="_blank">nested auto layouts</a>.
|
||||
|
||||
@@ -29,12 +39,12 @@ These are the basic terms related to components and their functions:
|
||||
|
||||
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`.
|
||||
1. Select the element you want to convert into a component.
|
||||
2. Click <embed type="image/svg+xml" alt="go_to_main" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/0yVpQqG2_kmdN0fYegHJ4g.svg" width="16" /> in the context toolbar at the top of the canvas or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_components_methods.png" height="auto"><source src="/public/creating_components_methods.mp4" type="video/mp4"></video>
|
||||
<embed type="image/svg+xml" alt="creating_component" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/hRtUIR33v0uSHlyfeTDbqA.svg" />
|
||||
|
||||
You can also select a layer and click <embed type="image/svg+xml" alt="go_to_main" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/0yVpQqG2_kmdN0fYegHJ4g.svg" width="16" /> in the context toolbar at the top of the canvas or select the **Create component** option on the context menu.
|
||||
<!--
|
||||
|
||||
#### Layers vs. Frames
|
||||
|
||||
@@ -48,11 +58,16 @@ The difference is shown here:
|
||||
|
||||
Find out more about [component pages](#components-page).
|
||||
|
||||
-->
|
||||
|
||||
#### Components and instances in the Layer list
|
||||
|
||||
<embed type="image/svg+xml" alt="components_instances_in_layer_list" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/f8iTdn1orUiVLyZVImJClg.svg" width="844" />
|
||||
<embed type="image/svg+xml" alt="Components_in_layer_list" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/-kkur9FADkmKjIa6O0cOBg.svg" />
|
||||
|
||||
Main components are bold and colored pink (<embed type="image/svg+xml" alt="color_code_F15085" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/b6VBjbQ0FEaLpb01JY4uEw.svg" width="12" />) in the <a href="https://lunacy.docs.icons8.com/raw/interface.md#layer-list" target="_blank">Layer list</a>, and there’s a component symbol (<embed type="image/svg+xml" alt="main_component" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/JApz_Mo2XE6YIoPMoYA3ow.svg" width="16" />) in front of their name.
|
||||
|
||||
Main components are bold and colored pink in the <a href="https://lunacy.docs.icons8.com/raw/interface.md#layer-list" target="_blank">Layer list</a>, and there’s a component symbol (<embed type="image/svg+xml" alt="main_component" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/JApz_Mo2XE6YIoPMoYA3ow.svg" width="16" />) in front of their name.
|
||||
|
||||
Сomponents with more than one [state](#component-states) come with a dashed border around the symbol.
|
||||
|
||||
Component instance names aren’t bold but have the instance symbol (<embed type="image/svg+xml" alt="instance_icon" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/7zBFwNg0JEKWT8fAiIVn9A.svg" width="16" />) and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel.
|
||||
|
||||
@@ -60,11 +75,14 @@ Component instance names aren’t bold but have the instance symbol (<embed type
|
||||
|
||||
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:
|
||||
To **add a component instance** to the canvas, you can:
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/reusing_components_left_panel.png" height="auto"><source src="/public/reusing_components_left_panel.mp4" type="video/mp4"></video>
|
||||
- Drag it from the **Components tab** to where you want to place it.
|
||||
- Duplicate the existing instance on the canvas.
|
||||
|
||||
Right-click a component in the left panel to bring up the context menu with these options:
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/adding_components_ph.png" height="auto"><source src="/public/adding_copmonents.mp4" type="video/mp4"></video>
|
||||
|
||||
Right-click a component in the **Components tab** to bring up the context menu with these options:
|
||||
|
||||
- Rename component
|
||||
- Edit component
|
||||
@@ -74,7 +92,13 @@ Right-click a component in the left panel to bring up the context menu with thes
|
||||
- Expand all
|
||||
- Collapse all
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> If you used any components from built-in or manually created <a href="https://lunacy.docs.icons8.com/raw/libraries.md#ui-kits" target="_blank">UI kits</a>, they will also appear in the Components tab.</p> </div>
|
||||
<embed type="image/svg+xml" alt="components_conext_menu" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/eML-tlBOk0aTrB6E2O7xiA.svg" />
|
||||
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> If you created any elements using the <a href="https://lunacy.docs.icons8.com/raw/tools.md#gui-tool" target="_blank">GUI tool</a>, they will also appear in the <b>Components tab</b> in the group named <b>Web</b>.</p> </div>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
## [Managing components](managing-components)
|
||||
|
||||
@@ -115,39 +139,51 @@ You can use **Components page** that Lunacy generates automatically to store all
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> 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.</p> </div>
|
||||
|
||||
-->
|
||||
|
||||
## [Component states](#component-states)
|
||||
|
||||
You can create several **states** for a component and switch between them as needed in the **right panel**.
|
||||
You can create multiple states for a component and switch between them as needed. States let you define variations like *Default*, *Hover*, or *Pressed*.
|
||||
|
||||
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.
|
||||
1. Select a component.
|
||||
2. Click <embed type="image/svg+xml" alt="Add New" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/xeqQWIYNtUePMxnmkm1vMA.svg" /> in the context tool bar or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. A dashed frame will appear around the component, and the new state will be added below the original.
|
||||
3. Make the required changes to the new state.
|
||||
4. To create additional states, select the original component or any existing state and click `+` again.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_component_state.png" height="auto"><source src="/public/creating_component_state.mp4" type="video/mp4"></video>
|
||||
|
||||
A new component will appear near the default main component, defining the new component state.
|
||||
Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.).
|
||||
|
||||
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**.
|
||||
To **rename a state**:
|
||||
|
||||
New component states for a distinct component will be displayed in the right panel as you select the component’s instances.
|
||||
1. Select the state.
|
||||
2. Press F2 and type the new state name after the slash (for example, `Button / Hover` > `Button / Disabled`).
|
||||
|
||||
**Alternative workflow**
|
||||
|
||||
You can also create a new component state from any instance on the canvas.
|
||||
|
||||
See both methods in the video below.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_states_ph.png" height="auto"><source src="/public/copmonent_states.mp4" type="video/mp4"></video>
|
||||
|
||||
To **switch through component states**:
|
||||
|
||||
1. Select a component instance.
|
||||
2. Choose the new component state in the **right panel**.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/switching-component_state.png" height="auto"><source src="/public/switching-component_state.mp4" type="video/mp4"></video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/swtiching_component_states_ph.png" height="auto"><source src="/public/swtiching_copmonent_states.mp4" type="video/mp4"></video>
|
||||
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> 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.</p> </div>
|
||||
<div class="callout callout--info"> <p><strong>Note:</strong> Switching component states doesn’t affect overrides.</p> </div>
|
||||
|
||||
<!--
|
||||
|
||||
## 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**:
|
||||
This is how component categories and subcategories appear in the **Components tab**:
|
||||
|
||||
<embed type="image/svg+xml" alt="categories_components" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/TDamndg4PkCuDPWyD2wrEQ.svg" width="844" />
|
||||
|
||||
@@ -163,105 +199,99 @@ 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**:
|
||||
You can **edit a component**:
|
||||
|
||||
- Right on the canvas like any other design element. This is the most straightforward and convenient way to edit components.
|
||||
- In the **Component editor**.
|
||||
- Directly in the **Components page**.
|
||||
- On 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 <embed type="image/svg+xml" alt="exit_component_editor" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/CafkdkTnjUyKoai6_Ky0UQ.svg" width="16" /> on the context toolbar, click anywhere over the dimmed area, or press `Esc` to exit the component editor.
|
||||
2. You'll see a pink frame around the canvas and the contents of the component will appear in the **Layer list**.
|
||||
3. Use the right panel to make the required changes.
|
||||
4. Click anywhere over the canvas, or press `Esc` to exit the component editor.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/editing_components_1.png" height="auto"><source src="/public/editing_components_1.mp4" type="video/mp4"></video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_editor_ph.png" height="auto"><source src="/public/copmonent_editor.mp4" type="video/mp4"></video>
|
||||
|
||||
#### Making edits in the Components page
|
||||
#### Making edits on 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**.
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> Starting from v.12, the Component page appears only in two cases:</p>
|
||||
<ul>
|
||||
<li>When you copy a component from another file to a local file</li>
|
||||
<li>When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
1. Right-click on an instance and select **Go to 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 used the **Go to 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.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/editing_components_2.png" height="auto"><source src="/public/editing_components_2.mp4" type="video/mp4"></video>
|
||||
|
||||
## [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.
|
||||
You can swap between instances of 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 <embed type="image/svg+xml" alt="swap_components" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/FwHiX5HVcE23ZwIlDilhyw.svg" width="16" />
|
||||
next to it:
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components_swap_tab.png" height="auto"><source src="/public/components_swap_tab.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
**Method 2**:
|
||||
|
||||
1. Open the **component state menu** in the **Component** section of the right panel.
|
||||
2. Select the required category and component state.
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/components_swap_rightpanel.png" height="auto"><source src="/public/components_swap_rightpanel.mp4" type="video/mp4"></video>
|
||||
1. In the right panel, open the Component list.
|
||||
2. Select the required component (and its state).
|
||||
|
||||
The video below shows both these merthods.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_switching_ph.png" height="auto"><source src="/public/copmonent_switching.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
|
||||
#### Deleting components
|
||||
|
||||
Delete 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.
|
||||
|
||||
|
||||
## [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:
|
||||
### Creating instances
|
||||
|
||||
- Press `Ctrl + D` or `Ctrl + C → Ctrl + V`.
|
||||
- Hold down `Alt`, then drag to place an instance on the canvas.
|
||||
To **add a component instance** to the canvas, you can:
|
||||
|
||||
#### Component instance properties
|
||||
- Drag it from the **Components tab** to where you want to place it.
|
||||
- Duplicate the existing instance on the canvas.
|
||||
|
||||
For a component instance, the **Component** section in the **right panel** will look like this:
|
||||
See the video in the [Reusing components](#reusing-components) section.
|
||||
|
||||
<embed type="image/svg+xml" alt="rightpanel_instance" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/zztZgnyr9EqhG8-NFu-_hA.svg" width="844" />
|
||||
### Instance properties
|
||||
|
||||
#### Component state menu
|
||||
When you select a component instance, the right panel shows an additional section that looks like this:
|
||||
|
||||
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 <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > button appears in this section, indicating that the instance has an override:
|
||||
|
||||
<embed type="image/svg+xml" alt="instance_reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/5lHhTwB-kkq7WL8ZYDn_QQ.svg" width="844" />
|
||||
|
||||
Click it to **reset the override** and revert the instance back to the style of the main component.
|
||||
<embed type="image/svg+xml" alt="instance_properties" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/smJwPS7NKUexrqNTb-1Sxg.svg" />
|
||||
|
||||
|
||||
## Creating overrides
|
||||
- **Component list**. A dropdown menu displaying the name of the component. When open, it shows all other components available in the document. By choosing items in the list you can [swap components](#swapping-components).
|
||||
- **Component states**. Previews of all availalable [component states](#component-states).
|
||||
- **Detach from component**. Use this button (or `Ctrl + Alt + D` / `⌘ + ⌥ + B`) to detach an instance from its component. Once detached, the instance will no longer reflect changes made to the original component.
|
||||
- **Go to Component**. This button will bring you to the instance's main component.
|
||||
- **Reset overrides**. Use this button to remove all [overrides](#overrides) and restore the instance to the component’s original appearance.
|
||||
- **Component type**. This setting currently has no visible effect.
|
||||
|
||||
## Overrides
|
||||
|
||||
To reiterate, an override is any edit you make to a component instance. Let's go over them in detail.
|
||||
|
||||
@@ -271,11 +301,11 @@ Click `▾` next to the title of a component instance in the Layer list to expan
|
||||
|
||||
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**.
|
||||
Here’s a simple example of a card component made up of an image (an oval with an **Image** fill) and a labeled button. We applied three overrides: changed the **button color**, updated the **button label**, and replaced the **image**.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_simple_overrides.png" height="auto"><source src="/public/creating_simple_overrides.mp4" type="video/mp4"></video>
|
||||
|
||||
You can easily reset all of these overrides by pressing <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > in the **Component** section, like in the demo above.
|
||||
You can easily reset all of these overrides by pressing <embed type="image/svg+xml" alt="reset_overrides" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PmMyhR72A0GyShZvh91lgA.svg" width="16" > in the instance properties.
|
||||
|
||||
Here’s a full list of layers and properties you can create overrides for:
|
||||
|
||||
@@ -286,6 +316,8 @@ Here’s a full list of layers and properties you can create overrides for:
|
||||
- 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 <a href="https://lunacy.docs.icons8.com/raw/text.md#text-generation-and-text-snippets" target="_blank">text generation</a> and the <a href="https://lunacy.docs.icons8.com/raw/tools.md#avatar-tool" target="_blank">Avatar tool</a>.
|
||||
@@ -296,7 +328,7 @@ 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.
|
||||
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 component.
|
||||
|
||||
#### Fills and images
|
||||
|
||||
@@ -333,7 +365,7 @@ So, when we were creating component instances in the demo above, new texts appea
|
||||
|
||||
#### 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.
|
||||
In the 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:
|
||||
|
||||
@@ -397,6 +429,8 @@ For example, there’s quite a few auto layouts in our profile card examples:
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_auto_layout_main.png" height="auto"><source src="/public/component_auto_layout_main.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
-->
|
||||
|
||||
## 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.
|
||||
|
||||
+1
-1
@@ -23,7 +23,7 @@ With a single export operation, you can get multiple files of different formats
|
||||
|
||||
| Format type | Supported formats |
|
||||
| ----------- | ---------------------------------- |
|
||||
| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `GIF` |
|
||||
| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `TIFF`, `BMP` |
|
||||
| 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.
|
||||
|
||||
@@ -74,6 +74,50 @@ Contact us via our feedback form:
|
||||
**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.
|
||||
|
||||
|
||||
### How can I install Lunacy Beta on Flatpack
|
||||
|
||||
You can install Lunacy either as a stable release or as a beta version via Flatpak. The beta version lets you try new features earlier, but only one version (stable or beta) can be installed at a time.
|
||||
|
||||
Both versions share the same application ID: `com.icons8.Lunacy`.
|
||||
|
||||
#### Installing Lunacy Beta (from scratch)
|
||||
|
||||
1. Add the Flathub Beta repository (if not already added):
|
||||
|
||||
```bash
|
||||
flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo
|
||||
```
|
||||
2. Install Lunacy Beta:
|
||||
|
||||
```bash
|
||||
flatpak install flathub-beta com.icons8.Lunacy
|
||||
```
|
||||
#### Switching from Stable to Beta
|
||||
|
||||
1. Uninstall the stable version:
|
||||
|
||||
```bash
|
||||
flatpak uninstall com.icons8.Lunacy
|
||||
```
|
||||
2. Add the Flathub Beta repository (if not already added):
|
||||
|
||||
```bash
|
||||
flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo
|
||||
```
|
||||
3. Install the beta version:
|
||||
|
||||
```bash
|
||||
flatpak install flathub-beta com.icons8.Lunacy
|
||||
```
|
||||
|
||||
#### Running Lunacy
|
||||
|
||||
To run Lunacy (both stable and beta), use the same command:
|
||||
|
||||
```bash
|
||||
flatpak run com.icons8.Lunacy
|
||||
```
|
||||
|
||||
## Questions about features
|
||||
|
||||
Questions about existing or upcoming Lunacy features.
|
||||
|
||||
+663
-326
File diff suppressed because it is too large
Load Diff
+24
-2
@@ -14,7 +14,8 @@ There are several types of layers in Lunacy:
|
||||
* <a href="https://lunacy.docs.icons8.com/raw/components.md" target="_blank">Components and component instances</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/raw/tools.md#icon-tool" target="_blank">Icons</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/raw/tools.md#hotspot-tool" target="_blank">Hotspots</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/raw/tools.md#slice-tool" target="_blank">Slices</a>
|
||||
* <a href="https://lunacy.docs.icons8.com/raw/tools.md#slice-tool" target="_blank">Slices</a>
|
||||
* [Sections](#sections)
|
||||
|
||||
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 <a href="https://lunacy.docs.icons8.com/raw/interface.md#layer-list" target="_blank">Layer list</a>.
|
||||
|
||||
@@ -430,4 +431,25 @@ You can adjust the individual resizing behavior for each layer in the **Constrai
|
||||
|
||||
**See also:**
|
||||
<br>
|
||||
<a href="https://lunacy.docs.icons8.com/raw/autolayout.md#resizing-auto-layout-elements">Resizing auto layout elements</a>
|
||||
<a href="https://lunacy.docs.icons8.com/raw/autolayout.md#resizing-auto-layout-elements">Resizing auto layout elements</a>
|
||||
|
||||
## Sections
|
||||
|
||||
Sections are a special layer type that helps you keep related objects together and organize your canvas. They work like visual containers for grouping content.
|
||||
|
||||
With sections, you can:
|
||||
|
||||
- Give them custom names for better navigation
|
||||
- Set a fill color to distinguish different areas of your design
|
||||
- Move sections across the canvas along with all their contents
|
||||
- Nest sections inside one another to create a clear hierarchy
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/sections_ph.png" height="auto"><source src="/public/sections.mp4" type="video/mp4"></video>
|
||||
|
||||
### Working with sections
|
||||
|
||||
- To create a section, click <embed type="image/svg+xml" alt="Section_icon" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/_rDC1o7Vd0mxeecB4RJcZw.svg" />
|
||||
on the toolbar or press `Shift+S`.
|
||||
- To select a section, click its label at the top-left corner.
|
||||
- Once selected, you can move or resize the section.
|
||||
- All objects inside a section move along with it.
|
||||
+29
-25
@@ -1,60 +1,64 @@
|
||||
# Layer and text styles
|
||||
# Styles
|
||||
|
||||
> Learn how to speed up your work with layer and text styles
|
||||
> Learn how to speed up your work with 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.
|
||||
Styles are sets of predefined properties (fills, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you edit a style, all associated layers update automatically.
|
||||
|
||||
The only difference between layer and text styles is that the latter also include typography properties like font, size, line spacing, etc.
|
||||
Lunacy supports the following style types:
|
||||
|
||||
- **Color styles** — for fills and borders
|
||||
|
||||
- **Effect styles** — for shadows and blurs
|
||||
|
||||
- **Text styles** — for fonts, sizes, line spacing, and other text properties
|
||||
|
||||
- **Layout grid styles** — for layout guides applied to frames
|
||||
|
||||
You can manage and organize styles in the **Styles** tab.
|
||||
|
||||
<embed type="image/svg+xml" alt="styles_tab" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/B4vRzcgloEGqyUB7hUGTFg.svg" />
|
||||
|
||||
|
||||
### 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 1.**
|
||||
|
||||
1. Select a layer with the properties you're likely to reuse.
|
||||
2. Go to the **Styles** tab and click `+` next to the type of style you're going to create.
|
||||
3. Type the new new style name and press `Enter` or click anywhere over the canvas.
|
||||
|
||||
**Way 2.** Click `+` in the **Styles** list and define all the required properties.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_styles_ph.png" height="auto"><source src="/public/creating_styles.mp4" type="video/mp4"></video>
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_stylesv12.png" height="auto"><source src="/public/creating_styles_v12.mp4" type="video/mp4"></video>
|
||||
|
||||
|
||||
|
||||
### 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).
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/applying_styles_v12_ph.png" height="auto"><source src="/public/applying_styles_v12.mp4" type="video/mp4"></video>
|
||||
|
||||
### Modifying a layer style
|
||||
|
||||
There are two ways to modify a style.
|
||||
### Modifying a style
|
||||
|
||||
**Way 1.**
|
||||
|
||||
1. Switch to the **Styles** tab, then click the style you want to modify
|
||||
1. Switch to the **Styles** tab, hover over the style you want to modify, then click <embed type="image/svg+xml" alt="Edit_icon" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/ois3SsbaIE-VPWPJ6_gN-w.svg" />.
|
||||
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.
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/editing_styles_v12_ph.png" height="auto"><source src="/public/editing_styles_v12.mp4" type="video/mp4"></video>
|
||||
|
||||
<embed type="image/svg+xml" alt="editing_style" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/14zxECrRDUSbcciXXjl2PQ.svg" />
|
||||
|
||||
|
||||
3. Use one of the following options:
|
||||
|
||||
* **Update Style** (<embed type="image/svg+xml" alt="Checkmark" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/lQA_atI7Bk-0aprvMzlB5w.svg" />): Saves the changes to the existing style.
|
||||
* **Create New Layer Style** (<embed type="image/svg+xml" alt="Plus" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/_rTigJIyfUmibMI3iRNl5Q.svg" />): Saves the changes to a new style.
|
||||
* **Reset Style** (<embed type="image/svg+xml" alt="Reset" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/-CkP9OjHL0Kz5Vxza54Eig.svg" />) : Discards all changes that you have made.
|
||||
|
||||
|
||||
### Detaching a style
|
||||
|
||||
Select the required layer and click the **Detach style** button shown below.
|
||||
|
||||
<embed type="image/svg+xml" alt="detaching_style" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/9IaLOhrj3kaLEqqUJV4FKw.svg" />
|
||||
<embed type="image/svg+xml" alt="detaching_styles" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/k5f7tarviE6PmC2qMV4jig.svg" />
|
||||
|
||||
|
||||
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.
|
||||
@@ -63,7 +67,7 @@ The appearance of the layer remains the same, but it is no longer associated wit
|
||||
|
||||
It is a good practice to organize styles into groups similar to those shown in the figure below.
|
||||
|
||||
<embed type="image/svg+xml" alt="organizing_styles" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/H7X3965HHUWrgLYs26FQLA.svg" />
|
||||
<embed type="image/svg+xml" alt="organizing_stylesv12" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/J2FHVidH90CQnS6vHLPreA.svg" />
|
||||
|
||||
|
||||
To organize your styles into groups, consider the following format of style names:
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
# LLM Integration
|
||||
|
||||
> using Model Context Protocol (MCP)
|
||||
|
||||
|
||||
## What is MCP?
|
||||
|
||||
The Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect with external data sources and tools. It provides a standardized way for AI models to access and interact with various applications, databases, and services while maintaining security and user control.
|
||||
|
||||
MCP acts as a bridge between AI assistants like Claude and your local applications, allowing them to work together seamlessly. Instead of manually copying and pasting information between applications, MCP enables direct communication and data exchange.
|
||||
|
||||
## How MCP Works in Lunacy
|
||||
|
||||
Lunacy implements MCP through a local server that runs alongside your Lunacy application. This server provides secure access to your Lunacy projects, allowing AI assistants to:
|
||||
|
||||
* Access information about selected objects in your designs
|
||||
* Retrieve color variables from your design system
|
||||
* Get details about components and their properties
|
||||
* Access images and other design assets
|
||||
|
||||
The MCP server launches automatically when enabled and runs locally on your machine, ensuring your design data remains secure and private.
|
||||
|
||||
## Enabling MCP in Lunacy
|
||||
|
||||
To start using MCP with Lunacy:
|
||||
|
||||
|
||||
1. Open Lunacy
|
||||
2. Navigate to the main menu
|
||||
3. Select **AI → Model Context Protocol → MCP Server Enabled**
|
||||
4. The MCP server will start running locally and be ready to accept connections
|
||||
|
||||
## Connecting Claude to Lunacy's MCP Server
|
||||
|
||||
To connect Claude Desktop to your Lunacy MCP server:
|
||||
|
||||
### Step 1: Install Claude Desktop
|
||||
|
||||
Download and install Claude Desktop from <https://claude.ai/download>
|
||||
|
||||
### Step 2: Get MCP Configuration
|
||||
|
||||
In Lunacy, you have two options:
|
||||
|
||||
**Option A: Full Configuration (Recommended for new setups)**
|
||||
|
||||
* Go to **AI → Model Context Protocol → Copy MCP Servers File**
|
||||
* This copies a complete JSON configuration file
|
||||
|
||||
**Option B: Single Server Entry (For existing MCP setups)**
|
||||
|
||||
* Go to **AI → Model Context Protocol → Copy MCP Server Entry**
|
||||
* This copies just the Lunacy server configuration line
|
||||
|
||||
### Step 3: Configure Claude Desktop
|
||||
|
||||
|
||||
1. Open Claude Desktop
|
||||
2. Open the Settings menu (press Ctrl+, on Windows or Cmd+, on macOS)
|
||||
3. Navigate to the **Developer** tab
|
||||
4. Click **Edit Config** - this will open your file manager with the `claude_desktop_config.json` file highlighted
|
||||
5. Open the highlighted `claude_desktop_config.json` file in any text editor
|
||||
6. If using Option A: Replace the entire file contents with the copied JSON configuration
|
||||
7. If using Option B: Add the copied server entry to your existing `mcpServers` section, maintaining valid JSON structure
|
||||
8. Save the file and restart Claude Desktop completely
|
||||
|
||||
Once configured, Claude will be able to interact directly with your Lunacy projects and access design information in real-time.
|
||||
|
||||
## Creative Use Cases
|
||||
|
||||
The real power of MCP integration comes from combining Lunacy's design data with other MCP servers to create seamless, automated workflows:
|
||||
|
||||
**AI-Powered Design-to-Code Pipeline** Select a complex dashboard layout in Lunacy and ask Claude to generate a complete React application with TypeScript, including component structure, state management, API integration points, and even mock data that matches your design specifications. Claude can analyze your color variables and component hierarchy to create a fully functional prototype.
|
||||
|
||||
**Intelligent Design System Documentation** Combine Lunacy MCP with file system access to automatically generate comprehensive design system documentation. Claude can analyze your components, extract design patterns, document usage guidelines, and create markdown files with embedded design tokens and component examples - all while maintaining your existing folder structure.
|
||||
|
||||
**Cross-Platform Design Consistency** Use multiple MCP servers to ensure design consistency across platforms. Claude can compare your Lunacy designs with existing mobile apps (via screenshots), web implementations (via web scraping), and documentation (via file system access) to identify inconsistencies and suggest improvements.
|
||||
|
||||
**Automated Asset Optimization Workflow** Connect Lunacy with file system and image processing MCP servers. Claude can analyze your selected designs, export optimized assets in multiple formats, automatically organize them into proper folder structures, and even generate the corresponding CSS sprites or icon fonts.
|
||||
|
||||
**Dynamic Content-Aware Design** Combine Lunacy data with database or API MCP servers to create designs that adapt to real content. Claude can analyze your layout components, fetch actual data from your systems, and suggest design modifications based on content length, image aspect ratios, or data complexity.
|
||||
|
||||
**Smart Design Review and Feedback** Use Lunacy MCP with communication tools (Slack, email) and project management systems. Claude can analyze your selected designs, compare them against design guidelines, generate detailed review reports, and automatically distribute them to stakeholders with embedded design previews and actionable feedback.
|
||||
|
||||
**Intelligent Brand Compliance Checking** Connect Lunacy with document analysis MCP servers to automatically verify brand guideline compliance. Claude can analyze your designs against brand documentation, check color usage, typography consistency, spacing rules, and generate compliance reports with specific recommendations.
|
||||
|
||||
**Automated Handoff Documentation** Combine Lunacy data with development tools MCP servers to create comprehensive developer handoffs. Claude can generate technical specifications, component props documentation, animation guidelines, responsive behavior notes, and integration instructions - all tailored to your specific tech stack.
|
||||
|
||||
## Benefits of MCP Integration
|
||||
|
||||
* **Seamless Workflow**: No need to manually export or copy design information
|
||||
* **Real-time Access**: Claude always works with your current project state
|
||||
* **Enhanced Productivity**: Get instant analysis and suggestions for your designs
|
||||
* **Secure Connection**: All data remains local and private
|
||||
* **Context-Aware Assistance**: Claude understands your specific design context
|
||||
|
||||
The MCP integration transforms how you work with AI assistance in your design process, making it more efficient and contextually relevant to your actual projects.
|
||||
+190
-43
@@ -4,23 +4,209 @@
|
||||
|
||||
|
||||
|
||||
# Version 13
|
||||
|
||||
*Release date: March 3, 2026*
|
||||
|
||||
<a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?ocid=badge" target="_blank">Microsoft Store</a> \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_13.0.exe) \| <a href="https://apps.apple.com/app/id1582493835" target="_blank">App Store</a> \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_13.0.dmg) \| <a href="https://snapcraft.io/lunacy" target="_blank">Snapcraft</a> \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_13.0.deb) \| [Flatpak](https://flathub.org/en/apps/com.icons8.Lunacy)
|
||||
|
||||
* **Scroll overflow**. Content that exceeds a frame’s bounds can now be scrolled on prototypes.
|
||||
* **Multiple prototype flows**. Create multiple prototype flows with different starting points on a page. Start a flow from the list in the right panel.
|
||||
* **Override inspector**. It now appears in the right panel when a component instance with overrides is selected. It helps manage overrides in complex documents such as design systems.
|
||||
* **Vertical trim**. Text layers can now trim extra vertical space, improving alignment and layout consistency.
|
||||
* **Export file prefixes now create folders**. Using slashes (/) in the prefix will generate corresponding folders during export.
|
||||
* **Platform selector**. You can choose the target platform, and the GUI tool will automatically provide matching components. This behavior will be extended to other tools over time.
|
||||
* **Stack layout support**. Lunacy now correctly reads and writes Sketch's stack layouts.
|
||||
|
||||
|
||||
# Version 12
|
||||
|
||||
*Release date: February 9, 2026*
|
||||
|
||||
<a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?ocid=badge" target="_blank">Microsoft Store</a> \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_12.3.exe) \| <a href="https://apps.apple.com/app/id1582493835" target="_blank">App Store</a> \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_12.3.dmg) \| <a href="https://snapcraft.io/lunacy" target="_blank">Snapcraft</a> \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_12.3.deb) \| [Flatpak](https://flathub.org/en/apps/com.icons8.Lunacy)
|
||||
|
||||
|
||||
### Lunacy online
|
||||
|
||||
Lunacy now has a full-featured web version available at [lunacyapp.com](https://lunacyapp.com). Teams working with sensitive data can also deploy the web version in [closed environments](https://icons8.com/lunacy-dedicated).
|
||||
|
||||
### AI Chat
|
||||
|
||||
Get inspired or edit your designs with LLMs. Choose between Claude, Gemini, OpenAI, and Grok. No API keys required, free to use, with support for auto layout.
|
||||
|
||||
<embed type="image/svg+xml" alt="ai_chat" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/ckrn6CUT-E21WRRW1LoHgA.svg" />
|
||||
|
||||
|
||||
### Improved MCP server
|
||||
|
||||
The MCP server has been expanded with additional methods for more advanced integrations.
|
||||
|
||||
### Plugins
|
||||
|
||||
You can now create custom plugins for Lunacy in any programming language using the MCP API. See the docs and example plugins on our [GitHub](https://github.com/icons8/lunacy-plugins).
|
||||
|
||||
### Connectors
|
||||
|
||||
You can now use connectors (<embed type="image/svg+xml" alt="connector_icon" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/kZ0jItZ2_EWHEuYJdbC8WA.svg" /> or `X`
|
||||
) to visually link layers and show relationships or flow. Connectors move with linked objects and can be customized like arrows or lines.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/connectors_ph.png" height="auto"><source src="/public/connectors.mp4" type="video/mp4"></video>
|
||||
|
||||
### Sections
|
||||
|
||||
We’ve added **sections**, a new layer type that helps you keep related objects together.
|
||||
|
||||
You can:
|
||||
|
||||
- Name sections
|
||||
- Change their fill
|
||||
- Drag sections along with their contents across the canvas
|
||||
|
||||
To create a section, click <embed type="image/svg+xml" alt="Section_icon" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/_rDC1o7Vd0mxeecB4RJcZw.svg" />
|
||||
on the toolbar or press `Shift+S`.
|
||||
|
||||
To select a section, click its label.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/sections_ph.png" height="auto"><source src="/public/sections.mp4" type="video/mp4"></video>
|
||||
|
||||
### New styles
|
||||
|
||||
In addition to color and layer styles, text and layout guide styles are now available. All the styles can be applied to layers separately.
|
||||
|
||||
This improves the usability of styles and fixes lots of Figma compatibility issues.
|
||||
|
||||
<embed type="image/svg+xml" alt="new styles" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/lXHX2rfLOE6SztymAS3eyg.svg" />
|
||||
|
||||
|
||||
### Skew
|
||||
|
||||
You can now skew layers.
|
||||
|
||||
1. In the upper menu, click **Layer → Add Skew**.
|
||||
2. Use the controls in the right panel, to adjust the skew.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/skew_ph.png" height="auto"><source src="/public/skew.mp4" type="video/mp4"></video>
|
||||
|
||||
<div class="callout callout--info">
|
||||
<p><strong>Note:</strong> Some shape editors may not fully support skewed layers yet (we’re working on it). If you run into issues, reset the skew, make your edits, then reapply it.</p></div>
|
||||
|
||||
### Improved prototyping
|
||||
|
||||
Prototyping has been improved with Smart Animate, Spring animations, and a Flow List for managing multiple prototype flows.
|
||||
|
||||
### Improved auto layout
|
||||
|
||||
Auto layout elements can now be reordered by dragging them directly on the canvas.
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/al_swap_ph.png" height="auto"><source src="/public/al_swap.mp4" type="video/mp4"></video>
|
||||
|
||||
### Changes to components
|
||||
|
||||
#### Component page has left the building (almost)
|
||||
|
||||
You can now create components on any page.
|
||||
|
||||
The Component page is now created only in two cases:
|
||||
|
||||
- When you copy a component from another file to a local file
|
||||
- When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
|
||||
|
||||
#### Enhanced component states UX
|
||||
|
||||
You can now create and manage component states right on the canvas (right-panel options are still available).
|
||||
|
||||
<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/add_component_state_ph.png" height="auto"><source src="/public/add_component_state.mp4" type="video/mp4"></video>
|
||||
|
||||
Under the hood, we've reworked component states for better compatibility with Figma variants, resulting in more accurate Figma imports.
|
||||
|
||||
### Import of .fig files
|
||||
|
||||
We've deprecated Figma import over API due to its limitations and recurring issues.
|
||||
|
||||
Instead, .fig file import ensures higher quality and faster conversion.
|
||||
|
||||
### New zooming and panning options
|
||||
The zoom control in the top-right corner now includes two new features:
|
||||
|
||||
**Pan with Right Click** — pan the canvas by dragging while holding the right mouse button
|
||||
|
||||
**Zoom with Scroll Wheel** — zoom the canvas using the scroll wheel without needing to hold `Ctrl` or `Cmd`
|
||||
|
||||
<embed type="image/svg+xml" alt="new_zooming_options" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/Mo3KvydXnUqpkv9lHGb-LQ.svg" />
|
||||
|
||||
### Updated Color Picker
|
||||
|
||||
We have significantly improved the Color Picker:
|
||||
|
||||
- New gradient stop editor.
|
||||
- CSS color support.
|
||||
- New color spaces including LCH, OKLCH, LAB, OKLAB, and HWB.
|
||||
- Image filters and blend modes for fills and borders have been moved to the Color Picker.
|
||||
|
||||
### Changes to right panel
|
||||
|
||||
- The right panel is now resizable.
|
||||
- Comments now show up only when the comment tool is enabled.
|
||||
|
||||
|
||||
### Support for Sketch 2025 file format
|
||||
|
||||
The Sketch 2025 file format, which includes major updates, is now supported.
|
||||
|
||||
### Lower RAM usage
|
||||
|
||||
We've reworked the render logic to handle large pages more efficiently. Huge pages now load progressively at a controlled pace, letting you navigate smoothly without interruptions.
|
||||
|
||||
### Updated .FREE format
|
||||
|
||||
Lunacy's .free format has been updated, with changes primarily affecting variables.
|
||||
|
||||
### Variables rollout underway
|
||||
|
||||
We’ve started a long-term process to support Figma’s complex variable system. When importing .fig files, new variables and properties may appear to preserve important data. However, these won’t be functional right away. We’ll gradually implement full support for variables, including themes, groups, theme switching, field binding, and more.
|
||||
|
||||
### Lunacy on Flatpak
|
||||
|
||||
Lunacy Beta is now available on Flatpak.
|
||||
|
||||
### Fixes and improvements
|
||||
|
||||
- Issues affecting cloud collaboration have been resolved.
|
||||
- All known instance override issues have been fixed.
|
||||
|
||||
|
||||
# Version 11
|
||||
|
||||
## 11.6
|
||||
|
||||
*Release date: July 2, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.6.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.6.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.6.deb)
|
||||
|
||||
* Now LLM can edit Selection over MCP.
|
||||
* Fix of Copy/Paste on Windows.
|
||||
|
||||
## 11.5
|
||||
|
||||
*Release date: June 26, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.5.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.5.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.5.deb)
|
||||
|
||||
* LLM Integration over MCP.
|
||||
* Fixed Icons8 Icons integration.
|
||||
|
||||
## 11.4
|
||||
|
||||
*Release date: April 21, 2025*
|
||||
|
||||
<a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?ocid=badge" target="_blank">Microsoft Store</a> \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.4.exe) \| <a href="https://apps.apple.com/app/id1582493835" target="_blank">App Store</a> \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.dmg) \| <a href="https://snapcraft.io/lunacy" target="_blank">Snapcraft</a> \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.deb)
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.4.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.deb)
|
||||
|
||||
Fixed 10 app crash reasons.
|
||||
|
||||
|
||||
## 11.3
|
||||
|
||||
*Release date: April 18, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.3.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.3.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.3.deb)
|
||||
|
||||
### New selection tools
|
||||
|
||||
Two new options are now available in the Action Bar:
|
||||
@@ -69,19 +255,12 @@ We’ve optimized the disk size of Lunacy. Depending on your platform, it now ta
|
||||
|
||||
*Release date: March 27, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.2.1.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.1.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.1.deb)
|
||||
|
||||
|
||||
|
||||
- Reverted recent changes to masks. They now work as before.
|
||||
|
||||
## 11.2
|
||||
|
||||
*Release date: March 27, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.2.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.deb)
|
||||
|
||||
|
||||
### Fixes and improvements
|
||||
- Added navigation buttons to the Prototype Player.
|
||||
- Fixed crashes and file access issues on macOS.
|
||||
@@ -92,8 +271,6 @@ We’ve optimized the disk size of Lunacy. Depending on your platform, it now ta
|
||||
|
||||
*Release date: March 21, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.1.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.1.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.1.deb)
|
||||
|
||||
### Prototyping overlays support
|
||||
|
||||
Added support for overlays in prototypes.
|
||||
@@ -136,8 +313,6 @@ Options to disable **Auto Z-Index** and **Auto Shape Colors** were added to the
|
||||
|
||||
*Release date: March 4, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.0.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.0.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.0.deb)
|
||||
|
||||
### Advanced prototyping
|
||||
|
||||
We added new triggers and animations, so you can now create more complex prototypes. See the full details in the updated <a href="https://lunacy.docs.icons8.com/raw/prototyping.md" target="_blank">Prototyping guide</a>.
|
||||
@@ -195,8 +370,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio
|
||||
|
||||
*Release date: January 15, 2025*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.11.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.11.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.11.deb)
|
||||
|
||||
### Improvements and fixes
|
||||
|
||||
- Fixed server connection issues.
|
||||
@@ -205,8 +378,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio
|
||||
|
||||
*Release date: December 13, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.10.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.10.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.10.deb)
|
||||
|
||||
### Improvements and fixes
|
||||
|
||||
- Major rendering performance boost, achieving 60fps where it was previously 1-10fps.
|
||||
@@ -217,8 +388,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio
|
||||
|
||||
*Release date: December 3, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.9.0.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.9.0.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.9.0.deb)
|
||||
|
||||
### Improvements and fixes
|
||||
|
||||
- PDF import is now faster. If a document has more than eight pages of equal size, they are arranged in a grid.
|
||||
@@ -231,9 +400,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio
|
||||
|
||||
*Release date: November 29, 2024*
|
||||
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.8.0.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.8.0.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.8.0.deb)
|
||||
|
||||
### Improvements and fixes
|
||||
|
||||
- New document page selector.
|
||||
@@ -244,8 +410,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio
|
||||
|
||||
*Release date: November 23, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.7.0.1613.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.7.0.1613.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.7.0.1613.deb)
|
||||
|
||||
### Improvements and fixes
|
||||
|
||||
- Improved hardware compatibility.
|
||||
@@ -257,9 +421,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio
|
||||
|
||||
*Release date: November 18, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.6.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.6.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.6.deb)
|
||||
|
||||
|
||||
### Color variables
|
||||
|
||||
We've introduced the **Variables** tab in the left panel, where you can now manage **color variables**. Soon, we’ll be adding other variable types too.
|
||||
@@ -282,8 +443,6 @@ For details about color variables, click <a href="https://lunacy.docs.icons8.com
|
||||
|
||||
*Release date: October 23, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.5.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.5.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.5.deb)
|
||||
|
||||
In this version, we're introducing a preview of a few experimental AI-based features. All the features are accessible through the main and context menus.
|
||||
|
||||
Give them a try and feel free to share your feedback that will help us improve them.
|
||||
@@ -329,8 +488,6 @@ You can now use preset and custom prompts to edit text content with the help of
|
||||
|
||||
*Release date: October 15, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.4.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.4.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.4.deb)
|
||||
|
||||
- Auto updates in shared libraries. When someone edits a component or style in the library, the changes automatically become available in all files using that library once you reopen them.
|
||||
- Magnets now work not only with text, but also for adjusting alignment in frames with auto layout.
|
||||
|
||||
@@ -343,8 +500,6 @@ You can now use preset and custom prompts to edit text content with the help of
|
||||
|
||||
*Release date: October 4, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.3.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.3.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.3.deb)
|
||||
|
||||
#### Text on path
|
||||
|
||||
You can now bend text in any way you want:
|
||||
@@ -383,10 +538,6 @@ Also, you can use the **Max lines** parameter to define the number of lines befo
|
||||
|
||||
*Release date: September 24, 2024*
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.2.exe)
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.2.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.2.deb)
|
||||
|
||||
#### Context menu search
|
||||
|
||||
You can now quickly find and run almost any command through the context menu.
|
||||
@@ -407,8 +558,6 @@ In future updates, this field will also be used for contextual AI-related comman
|
||||
|
||||
*Release date: September 13, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.1.exe) \| [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.1.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.1.deb)
|
||||
|
||||
#### PDF and AI files import
|
||||
|
||||
You can now import PDF and Adobe Illustrator (.ai) files into Lunacy.
|
||||
@@ -439,8 +588,6 @@ Added *Simulated Bold* and *Oblique* styles for single-weight fonts.
|
||||
|
||||
*Release date: August 27, 2024*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.0.1.exe) \| [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.0.1.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.0.1.deb)
|
||||
|
||||
#### Redesigned left sidebar
|
||||
|
||||
We redesigned the left sidebar to give you more space on the canvas:
|
||||
|
||||
@@ -9,10 +9,6 @@
|
||||
|
||||
*Release date: May 27, 2024*
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_9.6.1.exe) - Windows installers are temporarily missing a code sign certificate. This may lead to security warnings during installation. We are working to resolve this issue as soon as possible.
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_9.6.1.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_9.6.1.deb)
|
||||
|
||||
### Improvements
|
||||
|
||||
- To enhance user experience, the shortcut for the Insert Text into Shape feature is now `Shift+T`.
|
||||
@@ -24,10 +20,6 @@
|
||||
|
||||
*Release date: April 26, 2024*
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_9.6.0.exe)
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_9.6.0.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_9.6.0.deb)
|
||||
|
||||
### Get your own Lunacy Cloud
|
||||
|
||||
For design teams who want to be sure about the safety of their data, Lunacy now offers two options: **Private Cloud** and **Virtual Private Server** (VPS).
|
||||
@@ -88,10 +80,6 @@ For more information, [contact us](https://icons-8.typeform.com/LunacyPrivacy).
|
||||
|
||||
*Release date: March 19, 2024*
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_9.5.0.exe)
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_9.5.0.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_9.5.0.deb)
|
||||
|
||||
### FREE format
|
||||
|
||||
The default file format in Lunacy is now `.free`, which is almost fully compatible with the features from the Figma and Sketch formats. We designed `.free` to address the issues available in `.sketch` when it comes to very large design files.
|
||||
@@ -127,10 +115,6 @@ Yes. You can easily convert between the formats using the **Save as** option.
|
||||
|
||||
*Release date: February 08, 2024*
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_9.4.2.5022.exe)
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_9.4.2.5022.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_9.4.2.5022.deb)
|
||||
|
||||
Fixed the bug with the minimum macOS version requirement of 14.0. Now Lunacy runs flawlessly on macOS 11 and higher.
|
||||
|
||||
|
||||
@@ -138,10 +122,6 @@ Fixed the bug with the minimum macOS version requirement of 14.0. Now Lunacy run
|
||||
|
||||
*Release date: February 02, 2024*
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_9.4.1.exe)
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_9.4.1.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_9.4.1.deb)
|
||||
|
||||
### Faster launch times, lower memory usage
|
||||
|
||||
Lunacy now is compiled to the native code for all operating systems. This brings:
|
||||
@@ -159,12 +139,6 @@ We switched to a new transport protocol. This will help reduce latency when work
|
||||
|
||||
*Release date: December 28, 2023*
|
||||
|
||||
Download:
|
||||
|
||||
* [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_9.3.6.exe)
|
||||
* [MacOS Installer](https://lcdn.icons8.com/setup/Lunacy_9.3.6.dmg)
|
||||
* [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_9.3.6.deb)
|
||||
|
||||
### Bug fixes
|
||||
- 20 bugs fixed
|
||||
|
||||
@@ -173,9 +147,6 @@ Download:
|
||||
|
||||
*Release date: December 20, 2023*
|
||||
|
||||
Download: [Windows](https://lcdn.icons8.com/setup/LunacySetup_9.3.1.exe), [MacOS](https://lcdn.icons8.com/setup/Lunacy_9.3.1.dmg), [Linux](https://lcdn.icons8.com/setup/Lunacy_9.3.1.deb).
|
||||
|
||||
|
||||
### Individual borders
|
||||
|
||||
Define the thickness of borders individually for each side of a rectangle or frame. To do this:
|
||||
@@ -252,8 +223,6 @@ Drag the handle at the bottom of single-line text boxes to adjust the font size.
|
||||
## 9.2.1 hotfix
|
||||
*Release date: August 17, 2023*
|
||||
|
||||
Download: [Windows](https://lcdn.icons8.com/setup/LunacySetup_9.2.1.exe), [MacOS](https://lcdn.icons8.com/setup/Lunacy_9.2.1.dmg), [Linux](https://lcdn.icons8.com/setup/Lunacy_9.2.1.deb).
|
||||
|
||||
### Bug fixes
|
||||
- Fixed huge memory consumption.
|
||||
- Fixed window flicker on macOS.
|
||||
@@ -652,8 +621,6 @@ We removed the notification panel. All notifications now appear as toasts at the
|
||||
|
||||
*Release date: July 22, 2022*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.6.2.exe)
|
||||
|
||||
### Personal Cloud plan
|
||||
|
||||
|
||||
@@ -744,8 +711,6 @@ To remove documents from your online profile, simply unpublish them. By default,
|
||||
|
||||
*Release date: May 16, 2022*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.5.0.exe)
|
||||
|
||||
### Teams
|
||||
|
||||
Teams serve to make it easier for you to manage collaborative documents and people who have access to them.
|
||||
@@ -777,8 +742,6 @@ Note that you can still share cloud documents with other users as you did it ear
|
||||
|
||||
*Release date: March 28, 2022*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.4.1.exe)
|
||||
|
||||
### Fixed issues
|
||||
|
||||
* Fixed GPU acceleration on Windows
|
||||
@@ -789,8 +752,6 @@ Note that you can still share cloud documents with other users as you did it ear
|
||||
|
||||
*Release date: March 18, 2022*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.4.0.exe)
|
||||
|
||||
### Redesigned context menu
|
||||
|
||||
Context menu has become more compact and easier to use. The most popular commands (Copy, Paste, Lock, and other) now appear as buttons. Depending on how the menu shows up on the canvas (down- or upwards), the button bar appears at the top or the bottom of the menu so that it is close to the mouse pointer.
|
||||
@@ -844,8 +805,6 @@ To jump to the target layer, hover the mouse over the linked layer, press down `
|
||||
|
||||
*Release date: March 2, 2022*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.3.0.exe)
|
||||
|
||||
### Easier component state management
|
||||
|
||||
The Inspector panel now features the **Component** section, so it has become way easier to manage components and their states.
|
||||
@@ -894,8 +853,6 @@ For other actions, use the respective controls at the bottom of the **Component*
|
||||
|
||||
*Release date: January 29, 2022*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.2.0.0.exe)
|
||||
|
||||
### Color variables
|
||||
|
||||
Color variables let you efficiently manage colors in your documents and instantly recolor all the layers using the same color variable. You can apply color variables to fills, borders, and shadows.
|
||||
@@ -957,8 +914,6 @@ To hide comments, click **Comments** once again.
|
||||
|
||||
*Release date: December 23, 2021*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.1.0.0.exe)
|
||||
|
||||
### Support for Apple Silicon
|
||||
Now Lunacy can run on Macs with Apple Silicon processors.
|
||||
You can download the build on our website. Later it will also be available on the App Store.
|
||||
@@ -1017,9 +972,6 @@ We redesigned the **Code** panel for better usability. Also, now it features the
|
||||
|
||||
*Release date: October 28, 2021*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_8.0.5.exe)
|
||||
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/e6wCzETfb6c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
|
||||
@@ -1037,7 +989,7 @@ It means that even more people can install Lunacy and create awesome designs, sh
|
||||
|
||||
* We temporarily removed the support for external plugins. That was a trade-off we had to make in order to release the Mac and Linux versions. We're planning to restore the feature in one of the upcoming releases.
|
||||
* We removed suggestions panels. We need to re-think this feature. A new, revamped version will appear soon.
|
||||
* There is a known issue with the display of some fonts. We're doing our best to fix it. Workaround: use [v.6.9](https://lcdn.icons8.com/setup/LunacySetup_6.9.0.exe).
|
||||
* There is a known issue with the display of some fonts. We're doing our best to fix it.
|
||||
* And one more thing. If you'd like to have Lunacy on iPad, vote for it <a href="https://lunatics.icons8.com/discussion/204/lunacy-for-ipad#latest" target="_blank">here</a>.
|
||||
|
||||
|
||||
@@ -1047,9 +999,6 @@ It means that even more people can install Lunacy and create awesome designs, sh
|
||||
|
||||
*Release date: June 25, 2021*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_7.1.0.exe)
|
||||
|
||||
|
||||
### New features
|
||||
|
||||
#### Privacy and share links management
|
||||
@@ -1096,9 +1045,6 @@ To exit the mode, click the user's avatar once again.
|
||||
|
||||
*Release date: May 21, 2021*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_7.0.0.exe)
|
||||
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pz8S9ducEQg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
### New features
|
||||
@@ -1182,8 +1128,6 @@ If you also want to take part in Lunacy localization, click <a href="https://lun
|
||||
## 6.9
|
||||
*Release date: March 17, 2021*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_6.9.0.exe)
|
||||
|
||||
### New features
|
||||
|
||||
#### Hot exit
|
||||
@@ -1204,8 +1148,6 @@ Moreover, Lunacy will remember your actions with files, so that you will be able
|
||||
## 6.8
|
||||
*Release date: February 03, 2021*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_6.8.0.exe)
|
||||
|
||||
### New features
|
||||
|
||||
#### New look and feel
|
||||
@@ -1253,8 +1195,6 @@ To view and manage comments, enable the Comment tool.
|
||||
## 6.7
|
||||
*Release date: December 31, 2020*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_6.7.0.exe)
|
||||
|
||||
### New features
|
||||
|
||||
#### Cutting out rasters
|
||||
@@ -1320,8 +1260,6 @@ To use this feature, click **Text > Fonts Embedding** on the menu bar. In the di
|
||||
|
||||
*Release date: November 17, 2020*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_6.5.0.exe)
|
||||
|
||||
### New features
|
||||
|
||||
#### Smooth corners
|
||||
@@ -1555,8 +1493,6 @@ Also, you can hold down Shift to get a perfectly vertical, horizontal or 45-degr
|
||||
|
||||
*Release date: August 04, 2020*
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_6.0.0.exe)
|
||||
|
||||
### New features
|
||||
|
||||
#### Support for Sketch plugins (Beta)
|
||||
@@ -1812,8 +1748,6 @@ _Release date: May 18, 2020_
|
||||
## 5.5
|
||||
_Release date: April 30, 2020_
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_5.5.exe)
|
||||
|
||||
### Improvements
|
||||
- Panning performance improvements
|
||||
- Selection performance improvements
|
||||
@@ -1861,8 +1795,6 @@ _Release date: April 15, 2020_
|
||||
## 5.3.1 hotfix
|
||||
_Release date: March 26, 2020_
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_5.3.1.exe)
|
||||
|
||||
### Bug Fixes
|
||||
- Critical bug fixes
|
||||
|
||||
@@ -1896,8 +1828,6 @@ _Release date: March 25, 2020_
|
||||
## 5.2
|
||||
_Release date: March 02, 2020_
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_5.2.exe)
|
||||
|
||||
### Features
|
||||
- New Rendering Engine (input lag reduced, performance improved)
|
||||
- Icon Tool
|
||||
@@ -1924,8 +1854,6 @@ _Release date: March 02, 2020_
|
||||
## 5.1.1 hotfix
|
||||
_Release date: February 19, 2020_
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_5.1.1.exe)
|
||||
|
||||
### Bug Fixes
|
||||
- Fixed crashes
|
||||
|
||||
@@ -1978,8 +1906,6 @@ _Release date: January 25, 2020_
|
||||
## 5.0
|
||||
_Release date: January 24, 2020_
|
||||
|
||||
[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_5.0.exe)
|
||||
|
||||
### Features
|
||||
- What's new information inside Lunacy
|
||||
- Basic Tutorial on the first Lunacy Launch
|
||||
@@ -2369,7 +2295,7 @@ _RELEASED May 15, 2019_
|
||||
- Added possibility to move points of editing object with arrow keys
|
||||
- Improved work with zoom field and grid settings
|
||||
- Corrected window size and panel state saving
|
||||
- Corrected vector tool Esc behaviour
|
||||
- Corrected vector tool Esc behaviour
|
||||
|
||||
### Bug Fixes
|
||||
- Fixed the error of exporting objects with long names to a local file
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@ Below is a brief description of all available tools, which we will then go over
|
||||
| <embed type="image/svg+xml" alt="text_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/P69ZzGxWo0upt-S25nVP5g.svg" width="28" /> | **Text tool.** Add text layers to the document. Comes with an on-canvas <a href="https://lunacy.docs.icons8.com/raw/text.md#text-generation-and-text-snippets" target="_blank">text generation</a> option.| `T` |
|
||||
| <embed type="image/svg+xml" alt="pen_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/ox33KNr9I0Sby8cSNl1BIg.svg" width="28" /> | **Pen tool.** Used for creating custom vectors or shapes.| `P` |
|
||||
| <embed type="image/svg+xml" alt="img_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/Ow3QgJBiy0KHVu-4_JiYXQ.svg" width="28" /> | **Image tool.** Use it for importing images. | `M` |
|
||||
| <embed type="image/svg+xml" alt="gui_tools" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/jVG8u-6oukqQkwog6PvoVg.svg" width="240" /> | **GUI tools.** A set of basic interface element components from <a href="https://lunacy.docs.icons8.com/raw/libraries.md#ui-kits" target="_blank">UI kits</a> (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button<br>`D` — text input field<br>`F` — checkbox<br>`Y` — radio button<br>`J` — toggle<br>`W` — dropdown |
|
||||
| <embed type="image/svg+xml" alt="gui_tools" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/jVG8u-6oukqQkwog6PvoVg.svg" width="240" /> | **GUI tool.** A set of basic interface element components from <a href="https://lunacy.docs.icons8.com/raw/libraries.md#ui-kits" target="_blank">UI kits</a> (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button<br>`D` — text input field<br>`F` — checkbox<br>`Y` — radio button<br>`J` — toggle<br>`W` — dropdown |
|
||||
| <embed type="image/svg+xml" alt="icon_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/B0LK2cd1-USlSrOotEB22Q.svg" width="28" /> | **Icon tool.** Keeps recently used icons at hand. | `X` |
|
||||
| <embed type="image/svg+xml" alt="comment_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/P4EDGuPTdkSRCxwgY5ydxw.svg" width="28" /> | **Comment tool.** Activate it to leave <a href="https://lunacy.docs.icons8.com/raw/comments.md" target="_blank">comments</a> anywhere on the canvas (only available in <a href="https://lunacy.docs.icons8.com/raw/clouddocs.md" target="_blank">cloud documents</a>).| `C` |
|
||||
| <embed type="image/svg+xml" alt="scale_tool" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/scm-lgqtykigv546NkSUrQ.svg" width="28" /> | **Scale tool.** Proportionally change the size of the elements on the canvas. | `K` |
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
---
|
||||
# Page settings
|
||||
layout: default
|
||||
keywords:
|
||||
comments: false
|
||||
|
||||
# Hero section
|
||||
title: Release History
|
||||
description: New features and fixes for each version of Lunacy
|
||||
icon: 'activity-history'
|
||||
|
||||
# Micro navigation
|
||||
left_menu_off: false
|
||||
release_note:
|
||||
- title: Version 1
|
||||
url: 'version-1'
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Version 1
|
||||
|
||||
## 1.0.0.259
|
||||
|
||||
*Release date: April 2, 2024*
|
||||
|
||||
- Version number is now displayed in the admin panel
|
||||
|
||||
- User actions logging added
|
||||
|
||||
- SSO login support
|
||||
|
||||
- Fixed issues with loading large documents
|
||||
|
||||
- Other minor bug fixes
|
||||
+1
-3
@@ -35,9 +35,7 @@ else
|
||||
//get md files
|
||||
var mdFiles = Directory.GetFiles(rootPath, "*.md", SearchOption.AllDirectories)
|
||||
.Where(x => !x.EndsWith("README.md") &&
|
||||
!x.EndsWith("index.md") &&
|
||||
!x.EndsWith("rn_private_cloud.md") &&
|
||||
!x.EndsWith("creating_private_cloud.md"))
|
||||
!x.EndsWith("index.md"))
|
||||
.OrderBy(x => Path.GetFileName(x))
|
||||
.ToArray();
|
||||
foreach (var path in mdFiles)
|
||||
|
||||
Reference in New Issue
Block a user