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

Настройка текстовых стилей

Панель Styles содержит готовые текстовые стили: H1, H2, H3, Button Label, Body, Caption и Small Label. Нажмите на любой стиль, чтобы изменить гарнитуру шрифта, начертание, размер, выравнивание, оформление и другие параметры.

Когда вы добавляете текстовый элемент, можно выбрать один из настроенных здесь стилей.

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

1. Нажмите , чтобы открыть панель Styles.
2. На вкладке Text нажмите Create style.

3. Введите название и настройте типографику — семейство шрифтов, насыщенность, выравнивание и другие параметры.

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

   

4. Нажмите Create.

Добавить текст

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

1. Нажмите + в верхнем левом углу. Выберите Text. Выберите один из стилей текста, настроенных заранее или заданных вами.

2. Нажмите на новый элемент и отредактируйте его содержимое в разделе Content на панели Design справа.
3. При необходимости настройте свойства типографики на панели Design. Либо выделите текст в превью, чтобы открыть тултип для быстрой настройки стилей.
4. По желанию на панелях Design и Interaction можно применить любые другие доступные настройки компонентов флоу. Подробнее см. в разделе Стилизация элементов.

Изменение стиля части текста

Чтобы изменить стиль только части текстового элемента:

1. Выделите нужную часть текстового элемента в разделе Content.
2. В появившемся тултипе измените цвет текста, примените жирное начертание, подчёркивание, курсив или зачёркивание, либо добавьте URL.

Предпросмотр обновляется мгновенно.

Свойства типографики

Все текстовые элементы и стили текста имеют одинаковый набор параметров типографики:

• Font family: Выберите гарнитуру — встроенный шрифт или пользовательский шрифт.

  Разные устройства содержат разные шрифты или могут отображать один и тот же шрифт по-разному. Если шрифт не установлен на устройстве, система использует шрифт по умолчанию (SF Pro / Roboto). Чтобы один и тот же шрифт отображался одинаково на всех устройствах, загрузите пользовательский шрифт.

• Weight: Задайте насыщенность шрифта.

• Size: Задайте размер шрифта в пикселях.
• Color: Задайте цвет текста.
• Line height: Задайте межстрочный интервал или оставьте значение Auto.
• Alignment: Задайте горизонтальное (по левому краю, по центру, по правому краю) и вертикальное (сверху, по середине, снизу) выравнивание.
• Decoration: Добавьте подчёркивание или зачёркивание.
• Truncate: Ограничьте количество отображаемых строк. Текст, выходящий за этот предел, будет обрезан. Удобно, когда длина контента варьируется из-за динамических переменных или локализации.

Добавление ссылок

Флоу поддерживают два способа сделать текст кликабельным. Выбор зависит от того, какую роль играет текст:

• Встроенная ссылка — для URL внутри текстового блока, например ссылка «Узнать больше» в абзаце. Всегда открывается во встроенном браузере.
• Действие Open URL — для отдельных элементов, например кнопки «Условия использования». Может открываться как во встроенном, так и во внешнем браузере.

Встроенная ссылка

Чтобы сделать часть текстового элемента ссылкой:

1. Выделите текст в разделе Content.
2. В подсказке форматирования нажмите на иконку ссылки.
3. Вставьте нужный URL во всплывающее окно.

Действие «Открыть URL»

Чтобы превратить кнопку целиком в ссылку:

1. Добавьте Button — или используйте пресет Links: готовая строка с кнопками Restore / Terms of Service / Privacy Policy.

   

2. Выберите кнопку на панели Layers и откройте вкладку Interactions на правой панели.

3. Укажите адрес для действия Open URL.

   Пустое действие Open URL блокирует предпросмотр и публикацию.

   
   

Добавление условного текста

Условный текст меняет содержимое текстового элемента в зависимости от условия. Например, заголовок может показывать одно сообщение, когда пользователь выбирает годовой план, и другое — для месячного. Условный текст работает как условная видимость, но вместо того чтобы показывать или скрывать элемент, он меняет его содержимое.

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

1. Выберите текстовый элемент на холсте.
2. На панели Design в разделе Content выберите Conditional.

3. Настройте условие if. Выберите свойство на вкладке Custom, Products или Elements, задайте оператор и введите значение для сравнения. Подробнее о типах свойств — в разделе Условная видимость.
4. В блоке then введите текст, который будет отображаться, когда условие истинно. Форматирование текста работает так же, как для обычного текста. Чтобы вставить переменную, нажмите { } Add variable.
5. В блоке else введите резервный текст, который будет отображаться, если ни одно условие не совпало.
6. (Опционально) Нажмите + Add else/if, чтобы добавить дополнительные условия, каждое со своим текстом.

Добавление списков

1. Нажмите + в верхнем левом углу. Выберите List и один из шаблонов списка.

2. Перейдите на панель Design справа, чтобы редактировать элементы списка или загрузить изображение в качестве маркера.