Собрал шаблон в Figma для брендирования приложения

Эквио - мобильная платформа обучения персонала, EdTech-продукт для корпоративного сегмента. Приложение выпускается под брендом клиента: в App Store и Google Play оно выглядит как продукт клиента, а не как Эквио. Клиент может настраивать цвета, скругления кнопок, логотипы, фоны и иконку приложения.

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

Материалы жили в разных проектах: экраны, ассеты iOS и Android, веб, сертификат. Презентация на согласование собиралась вручную в стороннем инструменте, набор иконок под разные размеры - через внешний сервис. Цвета проставлялись по экранам вручную. В отдельные дни приходило по 4-5 новых клиентов одновременно.

Главное - ускорить сборку брендированного приложения целиком, а не только подготовку макетов. Для этого нужно было:

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

• Кастомизация ограничена тем, что умеет платформа: цвета, скругления кнопок, логотипы, фоны и иконка приложения. Шаблон не расширяет этот набор.
• Приложение работает только со стилями - переменных в нём нет, поэтому шаблон строится на стилях.
• Функционал у клиентов разный: зависит от тарифа и выбранных разделов. Полный набор экранов в шаблоне держать бессмысленно.
• Две команды разработки, iOS и Android, с разными процессами на своей стороне.

Брендирование - это подстановка значений в конечный набор параметров. Поэтому шаблон работает не как набор макетов, а как источник значений: дизайнер меняет параметры в одном месте, а всё остальное получается из них.

Дизайнер берёт цвета из брендбука клиента и подставляет их в стили шаблона. Названия стилей - результат синхронизации с разработкой: вместе определили, какие цвета нужны, и договорились об именах. iOS- и Android-команды написали плагин, который через API Figma забирает эти значения напрямую из файла.

По словам команд, это было устроено по-разному: у Android данные сразу попадали в сборку, и можно было быстро посмотреть превью приложения с новыми цветами. У iOS часть шагов оставалась ручной. Техническую реализацию с их стороны знаю только со слов команды.

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

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

Экраны сделаны один раз, всё остальное берётся от них.

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

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

Клиент смотрит и согласовывает брендирование до того, как что-либо уходит в разработку.

Раньше набор иконок под разные размеры экрана собирался через внешний сервис: загрузить исходник, получить архив, разложить вручную. В шаблоне один исходник иконки превращается сразу во все размеры, которые требуют iOS и Android. Фреймы названы конечными путями, например res/drawable-xxhdpi/ic_notification, а формат экспорта задан заранее. Достаточно выделить набор и выгрузить его одним действием в готовую структуру.

Приложение уже собрано: разработке остаётся подставить цвета, логотип и фоны. Дальше сборка уходит в App Store и Google Play вместе со скриншотами во всех требуемых размерах, на русском и английском.

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

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

Вместе с разработкой завели параметры authorization_background и authorization_background_splash со значениями top, center, bottom: они задают, от какого края отрисовывается изображение и что обрежется. Отдельный параметр optimize отключает сжатие для картинок с выраженным градиентом, где оно давало артефакты.

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

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

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

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

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

Время на подготовку материалов сократилось примерно вдвое. По количеству сборок раньше за день выходила одна, после шаблона - три-четыре, при желании до пяти.

• Подготовка материалов сократилась с 3-4 часов до часа на типовом клиенте.
• Цикл до согласования сократился с дня-двух до одного прохода.
• Из процесса ушли два внешних инструмента: сервис для генерации размеров иконок и программа для сборки презентаций.

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

Шаблон пережил меня: им до сих пор пользуется другой дизайнер.

Экспорт презентации из Figma. Полноразмерный PDF доходил до 300 МБ - такой файл клиенту не отправишь. Сжатие через сторонние сервисы давало артефакты на изображениях. Рабочий обходной путь - выгрузить слайды в PNG и пересобрать презентацию из картинок - приходилось руками делать то, от чего шаблон и должен был избавить. По моей оценке, это добавляло около 10% времени к циклу, но замеров не делал.

Дело не в макетах, а в том, как Figma экспортирует файлы: это нельзя было починить внутри шаблона.

Часть ручной работы с цветами можно убрать совсем. Шаблон построен на стилях, потому что приложение работает только со стилями. Но внутри Figma можно завести 2-3 базовых цвета клиента, и все 29 стилей брали бы цвет от них через variables. Тогда подготовка свелась бы к вводу пары значений вместо правки каждого стиля отдельно.

Следующий шаг - вынести это из Figma в отдельный сервис. Шаблон уже работает как конфигуратор: набор параметров конечный, правила подстановки и пути выгрузки известны. Дизайнер загружает логотип и фоны, задаёт цвета и получает готовый комплект: ассеты по папкам, презентацию и скриншоты сторов. Сейчас такой инструмент я могу собрать сам через вайб-кодинг, без отдельной команды разработки.