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

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

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

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

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

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

Опишите задачу обычными словами. Остальное сделает навык сам.

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

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.

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

Anything it can’t resolve by itself — a product missing from this app’s catalog, a variable with no source here — is listed separately, as something for you to finish rather than something it guessed at.

Read the plan, then say go. The skill writes the draft and renders the screen so you can see the result.

Примеры

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

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

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

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

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

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

Что переносится вместе с элементом. Цвета, текстовые стили, шрифты и иконки сохраняются внутри файла вместе с их определениями. В месте назначения:

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

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

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

Что проверить

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

Ограничения

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