Вкладка Design на правой панели управляет визуальным оформлением каждого элемента. Доступные свойства зависят от типа элемента, однако большинство из них имеют общие параметры стилизации.

Пропустите вкладку Design совсем.

Попросите AI Editor «придать пейволу тёмный, премиальный вид» — и он изменит стиль всех элементов сразу: заливки, углы, типографику и отступы.

Explore the AI Editor›

Видимость

Переключатель Visibility определяет, отображается ли элемент на экране.

• Show (по умолчанию): элемент всегда виден.
• Conditional: элемент виден только при выполнении определённых условий. Подробнее см. в разделе Условная видимость.
• Hide: элемент всегда скрыт. Используйте это, чтобы временно убрать элемент из флоу без его удаления.

Заливка

Раздел Fill задаёт фон элемента. Чтобы заполнить весь экран, используйте фон экрана.

Заливка состоит из одного или нескольких слоёв. Каждый слой имеет один из следующих типов:

• Сплошной цвет : Используйте палитру или введите HEX-значение. Настройте прозрачность, чтобы сделать фон полупрозрачным.
• Градиент : Два и более цветовых стопа. Перетаскивайте стопы, чтобы настроить переход, и задайте угол с помощью ползунка Direction. Чтобы изменить стоп, отредактируйте его строку в разделе Stops. Чтобы добавить стоп, кликните на полосу градиента или на рядом с Stops. Ползунок в строке слоя меняет прозрачность всех стопов одновременно.
• Изображение или Видео : Изображение или видео в качестве фона.

Чтобы управлять слоями:

• Чтобы добавить слой, нажмите рядом с Fill.
• Чтобы изменить тип слоя, нажмите на его образец и выберите тип.
• Чтобы изменить порядок слоёв, перетащите их строки.
• Чтобы удалить слой, нажмите в его строке.

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

Чтобы повторно использовать слой в других элементах или создать его тёмную версию, сохраните его как цветовой стиль. Чтобы повторно использовать изображение вместе с его окраской, создайте единый многослойный стиль.

Граница

Границы по умолчанию отключены. Нажмите рядом с Border на правой панели, чтобы добавить границу. Чтобы убрать её, нажмите рядом с заголовком Border.

При наличии границы настройте:

• Color: Используйте палитру цветов или введите hex-значение. Чтобы применить цветовой стиль, выберите его на вкладке Styles. Граница игнорирует слои изображений и видео стиля.
• Width: Толщина границы в пикселях.

Углы

Раздел Corners управляет радиусом скругления углов.

• Radius slider: задаёт одинаковый радиус для всех четырёх углов
• Per-corner toggle : включите, чтобы задать отдельный радиус для каждого угла

Эффекты

Нажмите кнопку плюса рядом с Effects, чтобы добавить один или несколько визуальных эффектов:

• Drop shadow: Тень за элементом
• Inner shadow: Тень внутри границ элемента
• Layer blur: Размывает элемент и его дочерние элементы

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

Анимация

Нажмите кнопку рядом с Animation, чтобы добавить анимационный эффект. На данный момент доступна только анимация Pulse — элемент ритмично увеличивается и уменьшается, привлекая к себе внимание.

Настройте анимацию Pulse с помощью следующих параметров:

Параметр	Описание
Scale amount (%)	Насколько элемент увеличивается относительно исходного размера
Duration (ms)	Продолжительность одного цикла анимации
Delay between loops (ms)	Пауза между повторениями
Shadow color	Цвет пульсирующей тени
Shadow size (px)	Размер пульсирующей тени

Предпросмотр анимации

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

• Нажмите кнопку Toggle animations над превью устройства. Она включает или отключает анимации на экране — после включения они воспроизводятся непрерывно, пока вы не нажмёте снова. Кнопка появляется только тогда, когда на активном экране есть хотя бы одна анимация.
• Откройте контекстное меню экрана (значок с тремя точками рядом со слоем экрана) и выберите Play Animation.

Внешний вид

• Opacity: от 0% (прозрачный) до 100% (непрозрачный)
• Rotation: введите значение в градусах для поворота элемента

Свойства типографики (текстовые элементы)

Для текстовых элементов отображается раздел Typography со следующими настройками:

Шрифт

Нажмите на выпадающий список шрифтов , чтобы открыть выбор шрифта. В нём есть две вкладки:

• Styles: Список сохранённых текстовых стилей вашего проекта. Выберите стиль, чтобы сразу применить все его настройки типографики.
• Fonts: Список всех доступных семейств шрифтов. Найдите нужный через поиск или прокрутку. Встроенные шрифты могут отображаться по-разному на разных устройствах — для единообразного отображения загрузите пользовательский шрифт.

Чтобы сохранить текущие настройки типографики как новый текстовый стиль, нажмите рядом с вкладками. После этого элемент будет использовать новый стиль.

Размер и насыщенность

• Weight: Выберите насыщенность шрифта из выпадающего списка
• Size: Выберите размер из выпадающего списка или введите произвольное значение

Цвет

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

Выравнивание

Две группы элементов управления выравниванием:

• По горизонтали: По левому краю , По центру , или По правому краю
• По вертикали: По верхнему краю , По середине , или По нижнему краю

Оформление

• None : Без оформления (по умолчанию)
• Underline : Добавляет подчёркивание текста
• Strikethrough : Добавляет зачёркивание текста

Усечение

Включите усечение, чтобы обрезать текст, превышающий значение Max Lines. Это удобно при поддержке нескольких языков: если переведённая строка длиннее оригинала, усечение не даст ей сломать вёрстку.

Настройки состояний (интерактивные элементы)

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

Каждое состояние может переопределять любое визуальное свойство — заливку, границу, цвет типографики, прозрачность и другие.

Выбираемые состояния

Элементы, входящие в выбираемую группу (варианты квиза, продукты, вкладки, переключатели и чекбоксы), по умолчанию имеют два состояния:

• Default: Обычный вид элемента
• Selected: Вид, когда пользователь выбрал этот вариант. Переопределите такие свойства, как заливка, цвет рамки и цвет текста, чтобы выделить активный выбор

Чтобы задать стиль для неактивного состояния выбираемого элемента, добавьте третье состояние вручную. Откройте States settings и добавьте Disabled state.

Состояние Disabled зависит от условий. Выберите его и нажмите Set conditions , чтобы указать, при каких условиях элемент становится неактивным во время выполнения, — например, когда обязательное поле пустое.

Состояния полей ввода

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

• Default: обычный вид без фокуса
• Active: поле в фокусе, готово к вводу
• Invalid: введённое значение не прошло валидацию
• Disabled: поле неактивно и недоступно для взаимодействия

Другие элементы с управлением состоянием

Некоторые элементы поддерживают стилизацию по состояниям, выходящую за рамки стандартной схемы Default / Selected / Disabled:

• Шаги индикатора прогресса — три состояния для каждого шага: Completed, Current и Upcoming.
• Точки карусели — два варианта цвета: Color для неактивных точек и Active Color для точки текущего слайда.

Переиспользуемые стили

Чтобы текстовые и цветовые свойства оставались единообразными во всём флоу, сохраните их как переиспользуемые стили. При изменении стиля он обновится во всех элементах и экранах, которые его используют.