Создайте стиль для хранения настроек текста или заливки (например, цвета, градиента или фонового изображения) и переиспользуйте его в элементах на нескольких экранах. Когда вы редактируете стиль, изменение применяется ко всем элементам и экранам, которые его используют.

У каждого флоу есть свой набор стилей.

Откройте панель Styles , чтобы создавать, просматривать и редактировать стили флоу:

• Text styles: Настройки типографики (шрифт, начертание, размер).
• Color styles: Заливки — цвета, градиенты и изображения. Один цветовой стиль может содержать отдельные версии для светлой и тёмной темы.

Текстовые стили

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

Чтобы создать текстовый стиль:

1. Откройте панель Styles .
2. В заголовке панели нажмите Create style.
3. Установите Type в значение Text, введите название и настройте параметры типографики.
4. Нажмите Create.

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

Чтобы применить текстовый стиль, выберите текстовый элемент и выберите стиль из выпадающего списка шрифтов в разделе Typography.

Чтобы изменить текстовый стиль, нажмите на него в панели Styles, измените настройки и нажмите Save.

Цветовые стили

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

Создание цветового стиля

Чтобы создать цветовой стиль:

1. Откройте панель Styles .
2. В заголовке панели нажмите Create style.
3. Установите Type в значение Color и введите название.
4. Настройте стиль. Вы можете изменить цвет или тип заливки его слоя, а также добавить дополнительные слои поверх него.
5. Нажмите Save.

Чтобы превратить текущее значение слоя заливки или цвета в стиль, нажмите его образец, затем нажмите значок рядом с вкладками Custom и Styles и нажмите Save. Теперь слой заливки или цвет использует этот стиль.

Редактирование цветового стиля

Чтобы отредактировать цветовой стиль:

1. Откройте панель Styles .
2. Выберите вкладку Colors.
3. Нажмите на запись стиля.
4. Каждая версия может содержать несколько слоёв. Нажмите на образец цвета, чтобы задать слой в соответствии с его типом заливки:
   • Сплошной цвет
   • Градиент
   • Изображение или видео

Сплошные цвета

1. Задайте цвет: введите hex-значение или кликните на образец и выберите цвет.
2. Настройте прозрачность с помощью слайдера.
3. Нажмите Save.

Градиенты

1. Выберите тип заливки Gradient.
2. Задайте стопы, цвета стопов и Direction.
3. Нажмите Save.

Изображения и видео

Для элемента Image или Video нельзя задать отдельный файл для тёмной темы. Вместо этого создайте контейнер и задайте его фон через цветовой стиль. В каждой версии стиля настройте слой с изображением или видео:

1. Выберите тип заливки Image или Video.
2. Загрузите исходный файл для локали, выбранной на нижней панели инструментов. Если файл уже загружен, нажмите Replace.
3. Нажмите Save.

Многослойные стили

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

Чтобы добавить слой, кликните по записи стиля. Затем в разделе Properties, Light или Dark нажмите кнопку . Новый слой появится поверх существующих. Чтобы изменить порядок слоёв, перетащите их строки. Настройте новый слой и нажмите Save.

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

• Fill (инпуты и пикеры): Только нижний слой. Остальные слои игнорируются.
• Fill (все остальные элементы): Каждый слой.
• Border (инпуты и пикеры): Только один сплошной цвет или градиент. Слои с изображениями и видео игнорируются.
• Border (все остальные элементы): Сплошные цвета и градиенты. Слои с изображениями и видео игнорируются.
• Цвет текста: Только слои со сплошным цветом. Слои с градиентом, изображениями и видео игнорируются. Если в версии нет слоя со сплошным цветом, текст не имеет цвета в этом режиме и не отображается.
• Цвет иконки, тени и другие цвета: Многослойные стили не поддерживаются. Можно применить только один слой стиля со сплошным цветом.

Применение цветового стиля

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

Чтобы применить стиль сразу ко многим элементам на экране, обратитесь к AI Editor, например: Apply the Card background style to all cards. Чтобы настроить стили и применить их по всему флоу, используйте скилл flow-generator.

К элементу Image или Video нельзя применить цветовой стиль, так как у этих элементов нет заливки. Вместо этого создайте контейнер и задайте ему фон.

Управление стилями

В панели Styles :

• Чтобы переименовать стиль, нажмите на его строку, измените поле Name и нажмите Save.
• Чтобы дублировать стиль, щёлкните по его строке правой кнопкой мыши и выберите Duplicate.
• Чтобы удалить стиль, нажмите на его строку и нажмите Delete style. Если этот стиль используется в каких-либо элементах, выберите стиль, который его заменит.
• Чтобы изменить порядок стилей, перетаскивайте их строки вверх или вниз по списку.
• Чтобы скопировать стили в другой флоу, выделите их строки (Shift+клик для выбора нескольких) и нажмите ⌘C / Ctrl+C. Откройте ту же вкладку (Text или Colors) в другом флоу и нажмите ⌘V / Ctrl+V.

Тёмная тема

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

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