> For the complete documentation index, see [llms.txt](https://docs.rayon.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rayon.design/documentation/design/layers.md).

# Layers

Using layers to organize your drawings.

The **`Layer` panel** can be found in the top-left corner of the editor.

This panel lists your **canvases** (more [about canvases here](/documentation/layout-and-present/canvases.md)) and their **layers**, with everything on each layer, including your **pages** (more [about pages here](/documentation/layout-and-present/pages.md)).

<figure><img src="https://2112124689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FngVHKyaUSSJPTFck3wkz%2Fuploads%2FXgxxzir5FJKQ2BYiMKXL%2Flayer-panel-canvases.png?alt=media" alt="The Layer panel from the app&#x27;s top-left corner: the Canvases section with a model canvas and a paper canvas, and the Layers section with every layer closed."><figcaption></figcaption></figure>

### What is a layer? <a href="#h_f2ba550f81" id="h_f2ba550f81"></a>

Layers are an **essential tool to organize your drawings.** Layers **contain drawing elements** (geometries, blocks, text, etc.) or even other layers.

Layers let you control a few things:

* **The visibility:** layers can be shown or hidden, which in turn will apply to all their contained elements.
* **The lock behavior**: layers can be locked so that the user cannot select the things hosted on them.
* **The rendering order: the layer list is rendered from top to bottom,** meaning that elements in layers at the top of the list will be placed on the top of your drawing, and layers at the bottom of the list will be rendered at the bottom of your drawing. This list can be reordered at any time.
* **The active layer:** once active, a layer will host all new elements you draw, new pages included.

All the actions described above can be found in the **`Layer`** panel, on any given layer...

<figure><img src="https://2112124689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FngVHKyaUSSJPTFck3wkz%2Fuploads%2F4YmO7yC9cvPRbAbCb7DI%2Flayer-row-states.png?alt=media" alt="The Layer panel with three layer states marked: a hidden layer&#x27;s eye, the active layer&#x27;s check and a locked layer&#x27;s padlock."><figcaption></figcaption></figure>

Selecting a layer will give you access to its properties, in the **`Properties`** panel.\
A few settings can be edited there...

* Layer **name:** the name the layer carries in the **`Layer`** panel.
* Layer **color**: the color that identifies the layer in the **`Layer`** panel, and the color its elements carry in wireframe mode.
* Layer **opacity**: the level of transparency of the objects on the layer.
* Layer **parent**: the layer the selected layer is on. *Root* means that the layer has no parent layer.

![The Properties panel for a selected layer, with its Selection settings and its Inheritable values](https://2112124689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FngVHKyaUSSJPTFck3wkz%2Fuploads%2FTN53G3L7roQHrDcMzP4e%2FLayer_settings.png?alt=media)

#### Inheritable values <a href="#h_inheritable_values" id="h_inheritable_values"></a>

Below those, the **`Inheritable values`** section carries a second set: **`Color`**, **`Opacity`**, **`Stroke weight`**, **`Dash pattern`** and **`Dash scale`**.

These are **not applied to the layer's elements on their own.** They are picked up only by elements set to inherit them, one value at a time. Change one here, and every element inheriting it updates at once.

More [about inheriting values here](/documentation/design/styles.md#h_layer_level_styling).

### Layers in action <a href="#h_bf0b62c012" id="h_bf0b62c012"></a>

Below, we will review the **different actions that layers enable you to do.**

#### Ordering <a href="#h_05449ba223" id="h_05449ba223"></a>

Layers allow you to determine **the order of things on your canvas.** Changing the order of layers will affect the display order of elements.

{% embed url="<https://player.vimeo.com/video/1028232064?autoplay=1&loop=1&muted=1&controls=0>" %}

#### Nesting <a href="#h_7809e8cc1a" id="h_7809e8cc1a"></a>

Layers can be **nested into one another.** At any point, a layer can be dragged onto another to turn it into a child of another layer.

{% embed url="<https://player.vimeo.com/video/1028232078?autoplay=1&loop=1&muted=1&controls=0>" %}

#### Reassigning <a href="#h_cc7b8f847a" id="h_cc7b8f847a"></a>

You can always **change the layer an object is assigned to**, pages included. Simply edit the **`Layer`** property in the **`Properties`** panel.

{% embed url="<https://player.vimeo.com/video/1028232074?autoplay=1&loop=1&muted=1&controls=0>" %}

### Layer states

A **layer state** is a saved snapshot of every layer on the canvas: which layers are shown or hidden, which are locked, and each layer's color and inheritable values. Save one for each way you look at your drawing, then switch between them in one click instead of toggling layers one by one.

Layer states live in the **`Layers`** section of the **`Layer`** panel, under the **`Canvases`** section. Open the **...** menu next to the **`Layers`** header and turn on **`Show layer state`**: a **`Layer state`** dropdown appears under the header, with a **...** menu beside it.

<figure><img src="https://2112124689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FngVHKyaUSSJPTFck3wkz%2Fuploads%2FDtU3VjGeqIPHnVk3gcxl%2Flayer-states.png?alt=media" alt="The Layer panel from the app&#x27;s top-left corner: the Canvases section, the Layers section with its menu open and Show layer state checked, the Layer state dropdown under the header reading Furniture plan, and the layers the state hides marked in the list"><figcaption></figcaption></figure>

* **Save a state:** set your layers the way you want them, then choose **`Save as new`** in the dropdown's **...** menu. Rayon names the state and opens the name for editing: type yours and press Enter.
* **Switch:** pick a state in the dropdown. Every layer goes back to the way that state saved it; a layer created after the state was saved is left as it is.

<figure><img src="https://2112124689-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FngVHKyaUSSJPTFck3wkz%2Fuploads%2FqKPMzWrIuP7kQ3h5y2GS%2Flayer-states-switch.png?alt=media" alt="The Layers section twice, side by side: Furniture plan applied with the Layer state dropdown open on the two states, then Site plan applied; the hidden layers marked in each list and the plan beside them changed"><figcaption></figcaption></figure>

* **Modified:** once you show, hide, lock or restyle a layer after applying a state, its name in the dropdown reads **`Modified`**. **`Save`** overwrites the state with the current layers; **`Restore`** puts the layers back the way the state saved them.
* **`Rename`** and **`Delete`** act on the state shown in the dropdown.

Layer states belong to the canvas they were saved on. When you override a view, picking a state in the dropdown applies it to that view alone.

***

### We are always available

Book a demo with our team, [right here](https://b1kzip68v9f.typeform.com/to/Hgr0eQ4k#source=docs).\
To get some support, reach out to us through our **in-app support chat**.\
More about [our support policy right here](/other-resources/others/support-policy.md).
