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

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

Слои

Левая панель показывает иерархию документа в виде дерева.

Дерево объектов

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

Порядок и родительский объект

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

Видимость

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

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

Дважды щёлкните имя слоя и введите новое. Enter или щелчок за пределами поля сохраняет имя, Escape отменяет изменение.

Связь с выделением на холсте

При выборе слоя в списке выделяется соответствующий объект на холсте. Выделение на холсте также отражается в дереве.

Страницы

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

• Щёлкните страницу, чтобы перейти к ней. 4B Pen восстановит сохранённые положение и масштаб холста.
• Нажмите кнопку добавления, чтобы создать страницу.
• Удалите текущую страницу с помощью соответствующего действия.
• Дважды щёлкните имя страницы, чтобы переименовать её.

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

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

Справа расположены три вкладки.

Дизайн

Здесь находятся свойства выделенных объектов:

• Внешний вид: прозрачность, общий или независимый радиус углов и видимость;
• Заливка: сплошной цвет, линейный, радиальный, угловой и ромбический градиенты, изображение и привязка к переменной;
• Обводка: цвет, толщина, выравнивание, концы, соединения и штрихи;
• Эффекты: внешняя и внутренняя тени, размытие слоя, фона и переднего плана;
• Текст: семейство, начертание и размер шрифта, а также кнопки B/I/U/S;
• Компоновка: настройки автоматической компоновки;
• Экспорт: масштаб, формат и кнопка экспорта.

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

Код

Выделенный объект представлен как JSX с подсветкой синтаксиса и кнопкой копирования. Также доступен экспорт HTML с классами Tailwind CSS v4.

ИИ

Открывает чат с ИИ. Переключить вкладку можно сочетанием ⌘J или CtrlJ.

Интерфейс на небольшом экране

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

Советы

• Ширина панелей сохраняется после перезагрузки.
• Дерево слоёв помогает выбрать перекрытый объект, до которого трудно добраться на холсте.
• Дополнительные действия находятся в контекстном меню.