Повторное использование элементов в флоу

Большинство пейволов в приложении используют одни и те же блоки: выбор тарифного плана, таймлайн пробного периода, блок сравнения. Собирать их вручную в каждом флоу долго, а копии неизбежно расходятся. Скилл flow-generator умеет сохранять любой фрагмент флоу в файл и добавлять его в другой флоу — в том же приложении или в совершенно другом, — автоматически подбирая подходящие цвета, шрифты, иконки и привязки продуктов.

Сохранённый файл — это обычный JSON. Храните его рядом с кодом приложения, коммитьте или отправляйте коллегам.

Important

Это часть скилла flow-generator, поэтому устанавливать ничего дополнительно не нужно — выполните шаги по установке flow-generator, и он уже доступен. Скилл сохраняет изменения в флоу на вашем дашборде, поэтому сначала проверяйте его на черновике и смотрите результат во Flow & Paywall Builder перед публикацией.

Для чего это нужно

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

Как использовать

Просто опишите задачу простыми словами. Скилл сделает всё остальное.

Сохранить фрагмент флоу

Save the plan selection from my Premium paywall so I can reuse it.

Скилл записывает один файл и выводит его полный путь, так что вы всегда знаете, какой файл коммитить или отправить. Также он показывает сводку содержимого: сколько элементов попало в файл и сколько цветов, стилей текста, групп и продуктов вместе с ними.

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

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

Добавить в другой флоу

Add the two-plan selection to my onboarding paywall, above the CTA.

Прежде чем что-либо записывать, скилл показывает план: точное место, куда попадёт блок, что он добавляет, какие цвета и стили текста берутся из целевого флоу вместо собственных, и какие идентификаторы нужно переименовать, чтобы избежать коллизий. Также выводится импортируемый текст — чтобы вы сразу заметили формулировки, привязанные к старому флоу.

Всё, что скилл не может разрешить самостоятельно — продукт, которого нет в каталоге этого приложения, переменная без источника — перечисляется отдельно как то, что нужно доделать вам, а не как то, что скилл угадал.

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

Примеры

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

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

Один и тот же блок выбора двух тарифов на трёх пейволах: в фиолетовом, тёмно-синем и зелёном цвете

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

Один и тот же трёхшаговый таймлайн на трёх пейволах с разным текстом и цветами чипов

Блок сравнения условий пробного периода. В нём нет продуктов и переменных, поэтому он переносится между приложениями без изменений.

Одно и то же сравнение Default vs Extended на трёх пейволах: в зелёном, розовом и оранжевом цвете

Как это работает

Сохранённый элемент редко существует сам по себе. Он ссылается на цвета, стили текста, шрифты, иконки, продукты и переменные, которые хранятся в других частях флоу. Скилл делит их на два типа.

То, что можно перенести. Цвета, стили текста, шрифты и иконки путешествуют внутри файла вместе со своими определениями. В целевом флоу:

Целевой флоу	Что происходит
Уже содержит это значение под тем же именем	Использует его
Использует это имя для другого значения	Берёт значение из целевого флоу и сообщает вам об этом
Никогда не слышал о нём	Добавляет определение из файла

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

То, что нельзя перенести. Идентификатор продукта, источник переменной, цель действия Navigate to screen — всё это указывает на что-то конкретное внутри флоу или приложения. Скилл перепривязывает их там, где может, а то, что не получается, перечисляет в разделе NEEDS YOU, не угадывая.

Перед сохранением черновика скилл повторно проверяет весь флоу: все ссылки разрешены, все локали заполнены, идентификаторы не конфликтуют, и результат по-прежнему проходит проверку публикации. Всё нерешённое раскрывается явно — никаких тихих исправлений.

На что обратить внимание

Текст связан с продуктом. Блок, который хорошо читается во флоу, из которого его взяли, может оказаться неуместным во флоу, куда его добавляют. В плане выводится импортируемый текст в разделе WILL SAY, чтобы вы успели заметить это до записи.
Цены — это переменные, а не текст. Если в целевом флоу нет продукта, на который ссылается цена, она отобразится пустой. Об этом говорится в плане.
Размеры могут зависеть от контекста. Элемент, занимавший всё пространство своего старого контейнера, может растянуться в новом. Именно для этого и нужен предварительный рендер.

Ограничения

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