---
title: Слои и страницы
description: Управление слоями, страницами и панелью свойств в OpenPencil.
---

# Слои и страницы

Интерфейс редактора состоит из трёх основных панелей: слои (слева), холст (по центру) и свойства (справа). Все панели можно изменять по размеру, перетаскивая разделители.

## Панель слоёв

Панель слоёв слева отображает иерархию документа в виде дерева.

### Древовидное отображение

Узлы отображаются в сворачиваемом дереве. Нажмите на стрелку рядом с фреймом, группой или компонентом, чтобы развернуть или свернуть дочерние элементы.

### Перетаскивание для изменения порядка

Перетаскивайте слои для изменения их порядка. Это меняет z-порядок узла в графе сцены — узлы выше в списке отображаются поверх остальных.

### Переключение видимости

Нажмите значок глаза рядом с любым слоем, чтобы скрыть или показать его на холсте. Скрытые узлы остаются в дереве.

### Переименование

Дважды кликните по имени слоя, чтобы переименовать его встроенным редактированием. Нажмите <kbd>Enter</kbd> или кликните в другом месте для подтверждения, <kbd>Escape</kbd> — для отмены.

### Синхронизация выделения

Клик по слою в панели выделяет соответствующий узел на холсте, и наоборот.

## Панель страниц

Панель страниц показывает все страницы документа.

- **Переключение страницы** — кликните по вкладке страницы, чтобы сделать её активной. Холст переключается на эту страницу и восстанавливает её позицию просмотра.
- **Добавить страницу** — нажмите кнопку добавления для создания новой страницы
- **Удалить страницу** — удаляет текущую страницу
- **Переименовать страницу** — дважды кликните по имени страницы для встроенного редактирования. Нажатие <kbd>Enter</kbd> или <kbd>Escape</kbd>, или клик в другом месте подтверждает переименование.

У каждой страницы свой холст и состояние области просмотра.

## Панель свойств

Панель свойств справа имеет три вкладки:

### Вкладка «Дизайн»

Показывает свойства выделенных узлов, организованные в разделы:

- **Внешний вид** — прозрачность, скругление углов (с переключателем независимых углов), видимость
- **Заливка** — сплошной цвет, градиенты (линейный, радиальный, угловой, ромбовидный), заливка изображением, привязка переменных
- **Обводка** — цвет, толщина, окончания, соединения, штриховой шаблон
- **Эффекты** — тень, внутренняя тень, размытие слоя, размытие фона, размытие переднего плана
- **Типографика** — семейство шрифта, размер, начертание, кнопки форматирования B/I/U/S (отображаются для текстовых узлов)
- **Раскладка** — элементы управления [авто-раскладкой](./auto-layout) (отображаются для фреймов с авто-раскладкой)
- **Экспорт** — масштаб, формат и кнопка экспорта (см. [Экспорт](./exporting))

Когда узлы не выделены, вкладка «Дизайн» показывает свойства уровня страницы, включая цвет фона холста.

### Вкладка «Код»

Отображает выделенный узел в виде кода с подсветкой синтаксиса, нумерацией строк и кнопкой копирования. Переключатель формата позволяет выбрать один из двух режимов вывода:

- **OpenPencil JSX** — дерево компонентов, совместимое с `renderJsx()` для программного двустороннего преобразования
- **Tailwind CSS v4** — HTML с утилитарными классами (`<div className="flex gap-4 p-3">`) для вставки в проекты React/Vue

### Вкладка «ИИ»

Интерфейс ИИ-чата (также переключается через <kbd>⌘</kbd><kbd>J</kbd>), который может создавать и изменять элементы дизайна на естественном языке. Поддерживает несколько моделей ИИ через OpenRouter.

## Сочетания клавиш

| Действие | Mac | Windows / Linux |
|----------|-----|-----------------|
| Переключить ИИ-чат | <kbd>⌘</kbd><kbd>J</kbd> | <kbd>Ctrl</kbd> + <kbd>J</kbd> |

## Мобильная раскладка

На мобильных устройствах и маленьких экранах боковые панели заменяются выдвижной нижней панелью с жестом свайпа. Вкладки в верхней части панели переключают между представлениями «Слои», «Свойства», «Дизайн» и «Код». Панель инструментов сжимается в компактную горизонтальную полосу с переключением категорий.

## Советы

- Ширина панелей сохраняется автоматически — она сохраняется между перезагрузками.
- Используйте панель слоёв для поиска перекрывающихся узлов, по которым сложно кликнуть на холсте.
- [Контекстное меню](./context-menu) предоставляет дополнительные действия для выделенных узлов.
- См. [Выделение и манипуляции](./selection-and-manipulation) для сочетаний клавиш z-порядка (]/[) и переключения видимости/блокировки.