Слои и страницы
Интерфейс редактора состоит из трёх основных панелей: слои (слева), холст (по центру) и свойства (справа). Все панели можно изменять по размеру, перетаскивая разделители.
Панель слоёв
Панель слоёв слева отображает иерархию документа в виде дерева.
Древовидное отображение
Узлы отображаются в сворачиваемом дереве. Нажмите на стрелку рядом с фреймом, группой или компонентом, чтобы развернуть или свернуть дочерние элементы.
Перетаскивание для изменения порядка
Перетаскивайте слои для изменения их порядка. Это меняет z-порядок узла в графе сцены — узлы выше в списке отображаются поверх остальных.
Переключение видимости
Нажмите значок глаза рядом с любым слоем, чтобы скрыть или показать его на холсте. Скрытые узлы остаются в дереве.
Переименование
Дважды кликните по имени слоя, чтобы переименовать его встроенным редактированием. Нажмите Enter или кликните в другом месте для подтверждения, Escape — для отмены.
Синхронизация выделения
Клик по слою в панели выделяет соответствующий узел на холсте, и наоборот.
Панель страниц
Панель страниц показывает все страницы документа.
- Переключение страницы — кликните по вкладке страницы, чтобы сделать её активной. Холст переключается на эту страницу и восстанавливает её позицию просмотра.
- Добавить страницу — нажмите кнопку добавления для создания новой страницы
- Удалить страницу — удаляет текущую страницу
- Переименовать страницу — дважды кликните по имени страницы для встроенного редактирования. Нажатие Enter или Escape, или клик в другом месте подтверждает переименование.
У каждой страницы свой холст и состояние области просмотра.
Панель свойств
Панель свойств справа имеет три вкладки:
Вкладка «Дизайн»
Показывает свойства выделенных узлов, организованные в разделы:
- Внешний вид — прозрачность, скругление углов (с переключателем независимых углов), видимость
- Заливка — сплошной цвет, градиенты (линейный, радиальный, угловой, ромбовидный), заливка изображением, привязка переменных
- Обводка — цвет, толщина, окончания, соединения, штриховой шаблон
- Эффекты — тень, внутренняя тень, размытие слоя, размытие фона, размытие переднего плана
- Типографика — семейство шрифта, размер, начертание, кнопки форматирования B/I/U/S (отображаются для текстовых узлов)
- Раскладка — элементы управления авто-раскладкой (отображаются для фреймов с авто-раскладкой)
- Экспорт — масштаб, формат и кнопка экспорта (см. Экспорт)
Когда узлы не выделены, вкладка «Дизайн» показывает свойства уровня страницы, включая цвет фона холста.
Вкладка «Код»
Отображает выделенный узел в виде кода с подсветкой синтаксиса, нумерацией строк и кнопкой копирования. Переключатель формата позволяет выбрать один из двух режимов вывода:
- OpenPencil JSX — дерево компонентов, совместимое с
renderJsx()для программного двустороннего преобразования - Tailwind CSS v4 — HTML с утилитарными классами (
<div className="flex gap-4 p-3">) для вставки в проекты React/Vue
Вкладка «ИИ»
Интерфейс ИИ-чата (также переключается через ⌘J), который может создавать и изменять элементы дизайна на естественном языке. Поддерживает несколько моделей ИИ через OpenRouter.
Сочетания клавиш
| Действие | Mac | Windows / Linux |
|---|---|---|
| Переключить ИИ-чат | ⌘J | Ctrl + J |
Мобильная раскладка
На мобильных устройствах и маленьких экранах боковые панели заменяются выдвижной нижней панелью с жестом свайпа. Вкладки в верхней части панели переключают между представлениями «Слои», «Свойства», «Дизайн» и «Код». Панель инструментов сжимается в компактную горизонтальную полосу с переключением категорий.
Советы
- Ширина панелей сохраняется автоматически — она сохраняется между перезагрузками.
- Используйте панель слоёв для поиска перекрывающихся узлов, по которым сложно кликнуть на холсте.
- Контекстное меню предоставляет дополнительные действия для выделенных узлов.
- См. Выделение и манипуляции для сочетаний клавиш z-порядка (]/[) и переключения видимости/блокировки.