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

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

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

Explore the AI Editor›

Видимость

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

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

Заливка

Раздел 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, которая ритмично масштабирует элемент, привлекая к нему внимание. Чтобы выбрать другой эффект, укажите его в поле Type.

Типы анимаций

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

Тип	Что делает	Настройки
Pulse	Элемент увеличивается и возвращается к исходному размеру.	Scale amount (%): насколько увеличивается элемент.
Radial fill waves	Залитая копия формы элемента расходится из-за него и постепенно исчезает.	Scale amount (%): насколько каждая волна увеличивается относительно элемента. Wave size (px): как далеко каждая волна выходит за край элемента. Wave color. Button pulse: также масштабирует элемент с каждой волной на Pulse amount (%).
Radial outline waves	То же, что Radial fill waves, но каждая волна — это контур.	То же, что Radial fill waves.
Glow	Мягкий ореол нарастает вокруг элемента и затухает.	Glow size (px): как далеко простирается ореол в самой яркой точке. Glow color.
Shake	Элемент движется влево и вправо.	Distance (px): как далеко элемент смещается в каждую сторону.
Wiggle	Элемент наклоняется влево и вправо.	Angle (°): насколько элемент отклоняется в каждую сторону.
Bounce	Элемент подпрыгивает вверх и возвращается обратно.	Height (px): насколько высоко подпрыгивает элемент.
Breathe	Элемент постепенно исчезает и появляется снова.	Fade amount (%): насколько сильно элемент затухает в самой бледной точке.
Color shift	Заливка элемента плавно меняет цвет и возвращается обратно.	Shift color.
Border flash	Граница вспыхивает по краю элемента и затухает. Во время воспроизведения заменяет собственную рамку элемента.	Flash width (px): насколько широка граница в самой яркой точке. Она растёт внутрь от края. Flash color.
Shimmer	Светлая полоса пробегает по заливке элемента.	Shimmer width (%): ширина полосы как доля от размера элемента. Shimmer angle (°): направление движения полосы, задаётся как угол градиента. 90° — слева направо. Shimmer color.

Некоторые типы зависят от макета или заливки элемента. Builder показывает уведомление в настройках Animation, если элемент не соответствует этим условиям, и флоу публикуется без анимации:

• Radial fill waves и Radial outline waves: у элемента должны быть фиксированные ширина и высота, а также не должно быть отступов.
• Color shift: элемент должен иметь заливку сплошным цветом или не иметь заливки вовсе.
• Shimmer: элемент должен иметь заливку сплошным цветом.

Настройки тайминга

Параметр	Описание
Duration (ms)	Длительность одного цикла анимации
Delay between loops (ms)	Пауза между повторениями
Show after delay (ms)	Пауза перед первым циклом
Easing	Характер ускорения и замедления анимации: Linear, Ease In, Ease Out, Ease In Out, Elastic (с перелётом и затуханием) или Bounce (с несколькими отскоками при остановке). Новый эффект Pulse использует предустановленную кривую, отображаемую как Custom.

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

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

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

Внешний вид

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

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

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

Шрифт

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

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

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

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

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

Цвет

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

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

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

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

Оформление

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

Ограничение строк и автоматическое уменьшение

Чтобы текст не выходил за рамки макета, включите Limit lines и задайте Max Lines. Текст, не помещающийся в заданное число строк, обрезается с многоточием (…).

Чтобы длинный текст вписывался в пространство, а не обрезался, включите Auto shrink. Текст будет уменьшаться, пока не уместится в заданное число строк или фиксированную высоту — на любом языке. Используйте эту опцию там, где перевод получается длиннее оригинала: например, в заголовке карточки продукта или на кнопке.

• Auto shrink доступен, когда включён Limit lines, или когда у текста задана Fixed высота и макет Fixed size.
• Текст уменьшается не более чем до 10% от размера шрифта. Текст, который всё равно не помещается, обрезается.
• Заданный размер шрифта не изменяется. В превью отображается тот размер, который текст будет иметь на устройстве.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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