Skip to content

Commit

Permalink
edits to sections and rn
Browse files Browse the repository at this point in the history
  • Loading branch information
louiseamber committed Jun 9, 2023
1 parent a948ee7 commit 7181b87
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 34 deletions.
23 changes: 11 additions & 12 deletions docs/autolayout.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ The option to enable auto layout appears in the <a href="https://lunacy.docs.ico

In Lunacy, you can apply auto layout to:


- **Layers in individual frames**. Auto layout settings apply to the layers inside the frame. Resizing these layers will affect the size of the frame (unless you specify otherwise).

- **Several frames**. To do this, put several frames into a container frame, then add auto layout. You can then define the arrangement of the child frames relative to each other.
Expand Down Expand Up @@ -91,14 +90,14 @@ The **Auto layout** section will then display the various properties you can app

<embed type="image/svg+xml" alt="autolayout_properties" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/LFv-N9G44E2xNXuBicy3Yg.svg" width="844" />

### Resizing options
#### Resizing options

Determine how the container frame responds to changes made to layers inside it:

* Set height or width (or both) **Hug** if you want the frame to be resized depending on the size of its contents.
* Use the **Fixed** option if you want the frame to remain unchanged regardless of the size of its contents.

### Layout orientation
#### Layout orientation

Set a **vertical** or **horizontal orientation** for elements in an auto layout. Vertical orientation arranges elements along the **Y axis**, and horizontal orientation places them on the **X axis**.

Expand All @@ -107,7 +106,7 @@ Set a **vertical** or **horizontal orientation** for elements in an auto layout.
To combine both these options, you’ll need to nest auto layout frames in a larger frame.


### Alignment controls
#### Alignment controls

Align your layers within the auto layout. Since alignment options will be determined by auto layout settings, this section of the right panel will be unavailable:

Expand All @@ -120,7 +119,7 @@ Change alignment by:

<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/autolayout_alignment.png" height="auto"><source src="/public/autolayout_alignment.mp4" type="video/mp4"></video>

### Element spacing
#### Element spacing

Define the spacing between elements in an auto layout by:

Expand All @@ -131,29 +130,29 @@ Define the spacing between elements in an auto layout by:

<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/autolayout_spacing.png" height="auto"><source src="/public/autolayout_spacing.mp4" type="video/mp4"></video>

### Padding
#### Padding

Determine the distance from elements to the borders of the container frame. Adjust the value in the right panel just like with element spacing.

### Lock/unlock right and bottom padding
#### Lock/unlock right and bottom padding

When you change left or top padding, right and bottom padding will mirror the new values. Click <embed type="image/svg+xml" alt="unlock_padding" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/PpXulR2e9ECMC6HIzjsYIQ.svg" width="10" /> to change padding for individual sides. If you lock the padding again (click <embed type="image/svg+xml" alt="lock_padding" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/Ik9qCzk510aNl1A3Oi-Grw.svg" width="16" />) after changing values for individual sides, the altered padding values won't revert back to match the opposite side. Enter a matching value on one side of the padding to synchronize the values once more.

### Distribution options
#### Distribution options

Control the way elements are distributed within the auto layout:
- With the **Packed** option active, you can freely change the spacing between elements and the padding around them.
- **Distribute** creates equal spacing between elements depending on the padding. You will only be able to change padding values, while element spacing will be set automatically.

<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/autolayout_distribute.png" height="auto"><source src="/public/autolayout_distribute.mp4" type="video/mp4"></video>

### Stacking behavior
#### Stacking behavior

Determine how elements are stacked when spacing between them is negative. This is useful for designing elements that may overlap in a layout: avatar pictures, images, slides, cards, and so on. The default stacking option is **First on top**, meaning that the top layer in the <a href="https://lunacy.docs.icons8.com/interface/#layer-list" target="_blank">Layer list</a> will be placed first in a stack. To reverse the order, set this option to **Last on top**:

<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/autolayout_stacking.png" height="auto"><source src="/public/autolayout_stacking.mp4" type="video/mp4"></video>

### Border inclusion
#### Border inclusion

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

Expand All @@ -163,11 +162,11 @@ Include or exclude borders from an auto layout. This is useful when, for instanc
<p><strong>Note:</strong> This setting only affects the borders of the elements inside the auto layout, not the borders of the container frame.</p>
</div>

### Remove auto layout
#### Remove auto layout

Remove the auto layout from the frame. The spacing and padding you applied to the frame using auto layout will remain, but all other auto layout settings will be removed.

### Individual layer properties
#### Individual layer properties
You can also **change the properties of layers** within your auto layout.

To do this, select a layer to open up its individual Auto layout properties.
Expand Down
24 changes: 12 additions & 12 deletions docs/basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Learn more about Lunacy's features, interface capabilities, and useful tips and

## [Working with the canvas](#working-with-the-canvas)

### Navigation
#### Navigation

If your design is taking up too much space on the canvas, use the mouse wheel to scroll vertically. To scroll horizontally, additionally hold down `Shift`.

Expand All @@ -37,7 +37,7 @@ Another way to navigate the canvas is to hold down `Space` to activate the **Han
You can always use the scroll bars on the right and bottom of the workspace, but it's not as convenient as the other options.


### Zooming in and out
#### Zooming in and out

The easiest way to **zoom in and out** in Lunacy is by holding down `Ctrl` / `` and moving the mouse wheel. To **zoom slower**, additionally hold down `Shift`.

Expand All @@ -50,7 +50,7 @@ When the zoom value exceeds 500, Lunacy displays a **pixel grid**. If you want t

Find out about other [zooming options](#zooming-options).

### Changing the canvas color
#### Changing the canvas color

1. Deselect all layers.
2. Use the **Workspace color** control in the right panel.
Expand Down Expand Up @@ -90,7 +90,7 @@ You can also use the **Linked Design** option to include embed links to Lunacy l

The **Code** tab <a href="https://lunacy.docs.icons8.com/export/#code-preview-and-linked-design" target="_blank">displays the code corresponding</a> to your layers.

### Right panel properties with no selected layers
#### Right panel properties with no selected layers

When all layers are deselected, the right panel shows these settings:

Expand All @@ -103,7 +103,7 @@ When all layers are deselected, the right panel shows these settings:

If you need more space, you can hide the right panel panel by selecting **View** > **Right Panel** on the menu bar.

### Changing values in the right panel
#### Changing values in the right panel

To **change values in the right panel** input fields:

Expand All @@ -118,13 +118,13 @@ To **change values in the right panel** input fields:

**Rulers** and **guides** help to position and align layers.

### [Rulers](#rulers)
#### [Rulers](#rulers)

Rulers are enabled by default and use pixels as a measurement unit. They appear at the top and on the left side of the canvas.

To toggle rulers on and off, use the `Ctrl + R` / `⌘ + R` shortcut or select **View** > **Rulers** on the menu bar.

### [Guides](#guides)
#### [Guides](#guides)

To create a guide, click anywhere on a ruler and drag the guide onto the canvas. You can now position layers along the guide. Moving a layer close to it snaps the layer to the guide.

Expand All @@ -140,7 +140,7 @@ You can also open up all of these guide settings by right-clicking over a ruler:

Lunacy has **square** and **layout grids**. If needed, you can display both of them at the same time.

### [Square grid](#square-grid)
#### [Square grid](#square-grid)

If there are no frames on the canvas, Lunacy displays a square grid. Toggle it on and off by clicking the **Show/Hide grid** button on the right panel or pressing `Ctrl + '` / `⌘ + '`.

Expand All @@ -153,7 +153,7 @@ To set the size of grid cells, enter the desired value in the **Grid size** fiel

<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/square_grid.png" height="auto"><source src="/public/square_grid.mp4" type="video/mp4"></video>

### [Layout grid](#layout-grid)
#### [Layout grid](#layout-grid)

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

Expand All @@ -166,7 +166,7 @@ Each frame can have its own layout grid settings:
Lunacy has a variety of options for measuring distances between elements. The measurement option depends on whether a layer is distinct, grouped with other layers, or nested in a frame.


### Individual layers
#### Individual layers

To **measure the distance between two layers**:

Expand All @@ -189,7 +189,7 @@ You can also use this function to **position layers in a precise location or rel

<video autoplay="" muted="" loop="" playsinline="" width="auto" poster="/public/aligning_using_alt.png" height="auto"><source src="/public/aligning_using_alt.mp4" type="video/mp4"></video>

### Grouped layers
#### Grouped layers

Use the steps described above to measure the distances between:

Expand Down Expand Up @@ -275,7 +275,7 @@ These options are also accessible through the **View** section on the menu bar:
<embed type="image/svg+xml" alt="zoom_to" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/_0flAx2EaESsh5HNYbRCig.svg" width="844"/>


### [Show pixels on zoom](#show-pixels-on-zoom)
#### [Show pixels on zoom](#show-pixels-on-zoom)

By default, Lunacy displays the canvas in the **vector mode**, which means that all layers (except for rasterized ones) will preserve their quality regardless of the zoom value. If you need to see individual pixels, you can use the **Show pixels on zoom** button. It displays pixels when the zoom value exceeds 100.

Expand Down
18 changes: 9 additions & 9 deletions docs/export.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,35 +76,35 @@ With a layer selected, you will see these settings:
<embed type="image/svg+xml" alt="export_section_layer" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/fcCzjZUPCUK2tQ8KtEPPdA.svg" width="844" />


### Export size
#### Export size

By default, Lunacy exports layers at their original size (**1x**). You can change it to any of the preset scales or set your own (e.g., 8x, 10x, or 0.3x).

### Prefix/Suffix
#### Prefix/Suffix

Defines the suffix or prefix of the export's file name. For any export size larger than 1x, Lunacy generates a default a default `@<size>` suffix, but you can enter your own in the input field (use only letters and numbers).

### Format
#### Format

Choose any of the available export formats. When exporting to `SVG` or `PDF`, you won’t be able to adjust the export size. It will be 1x by default.

### Publish to Web
#### Publish to Web

Publish any layer to **Lunacy Cloud** and get a shareable link to it. Read in detail about [working with cloud uploads](#cloud-export).

### Show all cloud uploads
#### Show all cloud uploads

Click <embed type="image/svg+xml" alt="export_show_uploads" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/zJT7IKTmPkmdulIMGf5Zag.svg" width="20" /> next to the **Export** section title to open up the **Cloud Uploads** subsection.

### Add export option
#### Add export option

Click `+` to add another export option. This lets you export the same element in different formats, sizes, and other settings.

### Remove export option
#### Remove export option

Click <embed type="image/svg+xml" alt="delete_button" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/kZ6IazBibE-dMPVUiDhphA.svg" width="16" /> next to an export option to remove it.

### Additional export options
#### Additional export options

Click <embed type="image/svg+xml" alt="additional_settings" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/__EaplTjMEWsdoU7Lq0nSg.svg" width="16" /> to open up additional export options. Here, you can:
- Choose a preexisting export preset.
Expand All @@ -122,7 +122,7 @@ An **export preset** defines specific export settings that you can reuse across

Presets are especially useful when, for example, you consistently need to export UI prototypes in specific formats and sizes for your clients, you won't need to manually adjust the settings each time you export the designs.

### Creating an export preset
#### Creating an export preset

You can do this by:

Expand Down
15 changes: 14 additions & 1 deletion docs/release-notes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,22 @@ Available for <a href="https://lunacy.docs.icons8.com/subscriptions/#personal-cl
<!--- `Shift + A` doesn't just add auto layout. It frames selected layers and instantly applies auto layout to them.
- You can now import **passcode-protected Figma files**.-->
- **Improved memory usage.** Up to **30% less RAM** used for storing layer data, so huge files now take up less computer resources.
- Improved memory usage. Up to **30% less RAM** used for storing layer data, so huge files now take up less computer resources.
- We updated the logic of flip operations, so the **Flip Horizontal/Vertical** buttons don't have pressed states anymore.

## 9.1.1 hotfix
_Release date: June 8, 2023_

Download:

* <a href="https://www.microsoft.com/store/apps/9pnlmkkpcljj?ocid=badge" target="_blank">Microsoft Store</a> \| [Installer](https://lcdn.icons8.com/setup/LunacySetup_9.1.1.exe)
* <a href="https://apps.apple.com/app/id1582493835" target="_blank">App Store</a> \| [Installer](https://lcdn.icons8.com/setup/Lunacy_9.1.1.dmg)
* <a href="https://snapcraft.io/lunacy" target="_blank">Snapcraft</a> \| [Installer](https://lcdn.icons8.com/setup/Lunacy_9.1.1.deb)

### Fixed issues

- Linux issues fixed

## 9.1
*Release date: May 31, 2023*

Expand Down

0 comments on commit 7181b87

Please sign in to comment.