МТС Финтех — «Astra» как надстройка над экосистемой: инстансы, бренды и ускорение через шаблоны
в большой экосистеме дизайн-система становится модульной: часть берётся из общего ядра, часть делается локально под домен, а ключевые процессы и инструменты удерживают качество и скорость внедрения.
Главное
в большой экосистеме дизайн-система становится модульной: часть берётся из общего ядра, часть делается локально под домен, а ключевые процессы и инструменты удерживают качество и скорость внедрения.
Фокус: архитектура «надстройки» над общей дизайн-системой (инстансы + собственные компоненты), версионность (Granat 2.0), токены и переключение бренда/темы, процессы качества (XUI review + фронт-ревью), инструменты ускорения (шаблоны и автоподстановка адаптивов), документация (спеки рядом с компонентами + Storybook), поддерживающие библиотеки (иконки, графика, тексты, иллюстрации).
Контекст: ребрендинг МТС сопровождался обновлением дизайн-системы; в финтех-контуре отдельная система оформлена как Astra.
Контекст
1. Контекст: ребрендинг и обновление системы
Интервью начинается с контекста большого ребрендинга МТС: визуальный стиль стал современнее и «харизматичнее», а вместе с ним пересобиралась и дизайн-система интерфейсов. В качестве принципов обновления подчёркиваются доступность, универсальность и возможность относительно легко менять оформление под новые требования.
Позиционирование и цели
в большой экосистеме дизайн-система становится модульной: часть берётся из общего ядра, часть делается локально под домен, а ключевые процессы и инструменты удерживают качество и скорость внедрения.
Состав системы
2. Многосистемность: общая DS и финтех-надстройка Astra
В финтех-контуре существуют два юридических и продуктовых бренда (МТС Банк и МТС Деньги), поэтому система должна поддерживать вариативность при сохранении узнаваемости. Отдельная дизайн-система финтеха получила название Astra. Ключевой архитектурный приём: часть компонентов берётся из общей экосистемной библиотеки (как инстансы), а доменные банковские компоненты хранятся и развиваются локально.
3. Файловая структура: платформы, ассеты, шаблоны, variables
Структура файлов описывается как набор отдельных библиотек: компоненты для веба и приложения, вспомогательные ассеты, шаблоны, архив, веб-блоки для неавторизованной зоны, отдельный файл для variables/редактуры, а также библиотеки иконок и иллюстраций. Такое разнесение помогает масштабировать систему, не превращая её в один тяжёлый файл.
4. Токены, бренды и темы: переключение в один клик
Токенная модель используется как механизм быстрого переключения между брендами и темами. Так как МТС Банк и МТС Деньги отличаются в первую очередь цветовыми решениями, вводится возможность выбрать бренд на уровне токенов — и интерфейс перекрашивается автоматически. Дополнительно в один клик можно переключиться на тёмную тему.
5. Архитектура приложений: Server-Driven UI (в Мой МТС) и доменные различия
В экосистеме Мой МТС применяется Server-Driven UI: экран строится из блоков, которые можно менять на бэкенде, что снижает зависимость от релизов приложения. Для финтеха подчёркивается, что архитектура может быть иной — и это влияет на набор компонентов и способы обновлений.
8. Ускорение работы: шаблон для переноса на веб и автоподстановка адаптивов
Одна из самых прикладных практик кейса — шаблон, который ускоряет перенос сценариев на веб и формирование адаптивов. Принцип: в макете используются локальные родительские компоненты, вставленные во все растяжки, и при замене компонента на веб-аналог он автоматически встаёт во все брейкпоинты. Это снижает ручную работу при переносе больших сценариев (десятки и сотни экранов) и даёт кратное ускорение.
Процессы развития
10. Поддерживающие библиотеки: тексты, иллюстрации, графика, иконки
Кейс подчёркивает, что дизайн-система включает не только UI-компоненты, но и «контентный слой»: библиотека текстов и tone of voice (совместно с редакторами), 3D-коллекции иллюстраций по продуктам, логотипы платёжных систем, флаги и другие графические ассеты. Цель — снизить потребность в ручном согласовании типовых экранов и ускорить сборку интерфейсов.
Документация
9. Документация: спеки рядом с компонентами + Storybook и ссылки на платформы
Документация устроена многослойно. Для дизайнеров и фронтенда спецификация хранится рядом с компонентами в Figma: описание состава, правила использования, примеры. Для разработчиков есть отдельные источники (включая ссылки на iOS/Android) и Storybook, который воспринимается как единая «правда» для дизайнеров и разработки.
Контроль качества
7. Процессы качества: XUI review + фронт-ревью
Кейс описывает многоуровневую систему контроля качества. Помимо ревью лидов существует ревью дизайн-системы (XUI Review), в котором участвуют представители дизайн-системы, исследований и редакторы. После разработки проводится фронт-ревью: сравнение реализации с макетами, фиксация расхождений, проверка состояний. Отдельно отмечается практический приём — просить не только скриншоты, но и скринкасты, чтобы видеть загрузочные и переходные состояния.
Масштабирование и внедрение
6. Организация команды и масштабирование внедрения
Переломным моментом для финтеха стало появление выделенной команды дизайн-системы и выстроенных процессов. До этого команда пыталась собирать банковские интерфейсы напрямую на общей системе, что приводило к рассинхронам и локальным решениям. После появления команды начали аудит продуктов по проникновению DS, выявили бардак в использовании компонентов и низкую миграцию на новую версию.
11. Коммуникации и внедрение: демо раз в две недели
Для распространения обновлений и снижения барьера внедрения проводится регулярное демо дизайн-системы раз в две недели. На демо показывают новые компоненты, изменения и исправленные баги; встреча становится точкой синхронизации для большого числа пользователей системы.
Уникальные практики и «фишки» кейса
-
Your Content / Cart Level Content — компонент-обёртка для переноса сценариевОдин локальный компонент-пустышка, куда подгружается любая внутренняя «начинка» — от карточек до типовых блоков. В паре с web-мастером позволил команде за год перевести все основные банковские сценарии с iOS на веб после санкций. На одном сценарии с сотней экранов получили ускорение в 4–5 раз: работа, которая раньше шла неделю, теперь занимает 5 часов — «утром начала, на обед сходила, к вечеру закончила».
-
Header Product — универсальная «шапка продукта» для всего банкаОдин компонент-шапка покрыл главные экраны всех продуктов: дебетовые и кредитные карты, вклады, накопительные счета, премиум. Слоты — заголовок, подзаголовок, градиент, до двух кнопок, бейджи и статусные баннеры (например, «разблокируйте карту»), карточка товара. Результат — консистентные главные экраны у четырёх продуктовых дизайнеров без синхронизации.
-
Мультибренд и тема одним кликом через токеныУ МТС Банка (красный Гранат) и МТС Деньги (фиолетовый) — идентичные интерфейсы, различаются только цветом карт и кнопок. Переключение бренда и light↔dark реализовано через один токен: «в один клик всё покрасилось». Это дало возможность использовать один набор макетов для двух юрлиц.
-
Градиенты с автоадаптацией под тёмную темуГрадиенты для продуктовых карт собраны вручную пером (не плагинами и не нейронкой): полупрозрачные формы, которые одинаково хорошо выглядят в light и в dark. Подход возник из необходимости — когда каждый продукт требовал уникального акцента, но система не должна «сыпаться» при смене темы.
-
Шаблон фронт-ревью с попиксельной сверкойУнифицированный файл ревью: название задачи → скриншот реализации от разработчика → макет рядом → циферки на каждом отличии по пикселям → статус «поправил / крестик». Отдельно — запрос скринкастов, а не только скриншотов: шиммеры, скелетоны и переходные состояния на статическом скрине не видно.
-
Цветные комментарии в Figma вместо нативных аннотацийРазные цвета комментариев — для разработчиков, для внутренней студии иллюстраторов, для багов. Причина — нативные Figma-аннотации видны только пользователям с Edit-доступом, а у большинства разработчиков только DevMode, поэтому им бы пришлось показывать пустые макеты. Цветная система работает для всех.
-
Библиотека текстов с центром редактурыСовместный файл с редакторами — типовые тексты ошибок, блокировок, успехов, «сервис недоступен» + правила Do/Don't для каждого кейса. Если экран типовой, дизайнер берёт готовый текст и не ставит задачу на редактуру, сокращая цикл согласования.
-
3D-иллюстрации + нейросети для вариацийБаза из 3D-коллекций по продуктам собрана в общую библиотеку. Поверх — дизайнеры вскармливают нужный стиль встроенной в Figma нейросети и получают вариации за минуту вместо недель ожидания задачи у внутренней студии («можно убрать обруч, добавить монетки — получится такое же качество без фона»).
-
Демо дизайн-системы раз в 2 недели на ~100 человекЧасовая встреча в конце каждого спринта: команда DS показывает все новые компоненты (веб + mobile), закрытые баги, точки, где можно начать пользоваться. Превращает DS-команду в публичную фигуру внутри компании и снимает необходимость продавливать внедрение индивидуально.
-
Статусы готовности компонентов + метафора «ещё не дорос»Каждый компонент помечен статусами готовности: дизайн / iOS / Android / веб. Если дизайнер «нечаянно» использовал компонент, которого нет в коде, это становится триггером — идём в продуктовую команду, просим заложить задачу, и через спринт компонент «дорастает» до всех платформ.
Выводы и принципы
12. Что можно перенять другим командам
- В большой экосистеме строить DS как модульную систему: общее ядро + локальные доменные компоненты (инстансы vs оригиналы).
- Использовать токены как механизм управления брендами и темами: переключение “в один клик” снижает стоимость поддержки мультибрендовости.
- Закладывать процессы качества: ревью дизайн-системы + фронт-ревью; проверять сложные состояния через скринкасты, а не только скриншоты.
- Инвестировать в ускорители (шаблоны, автоподстановка адаптивов): они дают кратный эффект при миграциях и переносах сценариев.
- Держать документацию рядом с компонентами и обеспечивать «единую правду» для дизайна и разработки (спеки + Storybook).
- Развивать DS как набор не только UI, но и контентных библиотек (тексты, иллюстрации, ассеты) — это снижает хаос и ускоряет работу команд.
«большой ребрендинг пару лет назад. Хотя нет, даже не знаю, лет пять-шесть, да? А надо посмотреть точную дату.»
«акцент на доступности, на каком-то, не знаю, универсальности и в то же время, чтобы ммм легко можно было менять всё. Если говорить про банк.»
«название нашей НДС-ки Astra. Это буквально две недели назад, представляешь? Мы больше не уныем залетело на огонёк.»
«взяли общую такую лигу, половина самых основных компонентов. Мы занесли их к себе как инстансы.»
«занесён в финтех либо как инстанс. Мы это помечаем вот инстанс оригинального компонента SDS Гранат.»
«основные — это компонент для веб, для апки. Отдельно есть всякие вспомогательные ассеты.»
«возможность приключить просто в токенах бренд, видишь, бренд автогранат красный МТС Moni, МТС Деньги Это понятно, что, допустим, возьмём вот здесь, и мы хотим покраситься в обратно»
«в один клик всё покрасилось. Но на самом деле так можно делать из большей секций. Вот я не знаю, у меня получится так сделать или нет, мне кажется Так стоит, наверное, мне на карту здесь было назначено просто.»
«в один клик покрасить в тёмную тему. Спикер ? : Всё.»
«Server Driving UI. То есть, по факту, это набор блоков, который можно удалённо настраивать, фиксить.»
«автоматически встаёт во все адаптивы, и всё, здесь уже ничего не нужно делать. Просто один клик, и у тебя пять экранов готово.»
«в четыре-в пять раз ускорили работу по переносу сценариев. Вот как те сценарии выглядели у меня.»
«за 5 часов, за 5 часов получилось за рабочий день. Ещё на обед сходила и к вечеру начала утром, вечером закончила.»
«3D-коллекцию нашу. Раньше нужно было искать по разным файлам подходящую картинку, если ты не хотел заказывать у внутренней студии In House Studi а сейчас мы наконец-таки собрали вс»
«нейронок. У нас сейчас дизайнеры научились вскармливать определённый стиль иллюстрации, там, нанобана, условно, который у нас внутри, фигмы встроена.»
«спека, она всегда хранится вот здесь вот рядом с компонентами. У нас есть спецификейшн, и здесь есть, как можно использовать, из каких составных полей состоит компонент.»
«XUI Review. И там смотрят лит дизайн-системы, макеты, смотрит руководитель исследований, руководитель редактуры и там хедов и вообще даже иногда директор департамента смотрит макеты. А после того, как всё разработано, у нас есть фронт-ревью.»
«фронт-ревью. Ну, фронт-ревью — это тоже часто в компаниях бывает, да, мы смотрим Правильно, если разработчики тоже стали, это частая практика. Получается, что у нас три этапа внутренних именно на юмаке.»
«скрин-касты, потому что бывает, что неправильно скрилитоны разрабатывают, загрузочные состояния какие-то, и это только на скрин-касте видно.»
«появилась команда дизайн-системы во главе с Сашей Никулиным. Это очень крутой чувак, он иногда выступает тоже на всяких конфах.»
«аудит всех продуктов на предмет проникновения дизайн-системы. То есть стали смотреть.»
«четыре из 32 команд. Это был очень плохой показатель. Локальные какие-то были, несоответствие дизайна и кода, недоступность интерфейсов, куча разных проблем.»
«раз в две недели обязательно проходит демо-дизайн-системы, такая часовая встреча, где дизайн-система показывает всё, что успела сделать за спринт. Спрингт вот две недели длится.»
«большой ребрендинг пару лет назад. Хотя нет, даже не знаю, лет пять-шесть, да? А надо посмотреть точную дату.»
«акцент на доступности, на каком-то, не знаю, универсальности и в то же время, чтобы ммм легко можно было менять всё. Если говорить про банк.»
«название нашей НДС-ки Astra. Это буквально две недели назад, представляешь? Мы больше не уныем залетело на огонёк.»
«взяли общую такую лигу, половина самых основных компонентов. Мы занесли их к себе как инстансы.»
«занесён в финтех либо как инстанс. Мы это помечаем вот инстанс оригинального компонента SDS Гранат.»
«основные — это компонент для веб, для апки. Отдельно есть всякие вспомогательные ассеты.»
«возможность приключить просто в токенах бренд, видишь, бренд автогранат красный МТС Moni, МТС Деньги Это понятно, что, допустим, возьмём вот здесь, и мы хотим покраситься в обратно»
«в один клик всё покрасилось. Но на самом деле так можно делать из большей секций. Вот я не знаю, у меня получится так сделать или нет, мне кажется Так стоит, наверное, мне на карту здесь было назначено просто.»
«в один клик покрасить в тёмную тему. Спикер ? : Всё.»
«Server Driving UI. То есть, по факту, это набор блоков, который можно удалённо настраивать, фиксить.»
«появилась команда дизайн-системы во главе с Сашей Никулиным. Это очень крутой чувак, он иногда выступает тоже на всяких конфах.»
«аудит всех продуктов на предмет проникновения дизайн-системы. То есть стали смотреть.»
«четыре из 32 команд. Это был очень плохой показатель. Локальные какие-то были, несоответствие дизайна и кода, недоступность интерфейсов, куча разных проблем.»
«XUI Review. И там смотрят лит дизайн-системы, макеты, смотрит руководитель исследований, руководитель редактуры и там хедов и вообще даже иногда директор департамента смотрит макеты. А после того, как всё разработано, у нас есть фронт-ревью.»
«фронт-ревью. Ну, фронт-ревью — это тоже часто в компаниях бывает, да, мы смотрим Правильно, если разработчики тоже стали, это частая практика. Получается, что у нас три этапа внутренних именно на юмаке.»
«скрин-касты, потому что бывает, что неправильно скрилитоны разрабатывают, загрузочные состояния какие-то, и это только на скрин-касте видно.»
«автоматически встаёт во все адаптивы, и всё, здесь уже ничего не нужно делать. Просто один клик, и у тебя пять экранов готово.»
«в четыре-в пять раз ускорили работу по переносу сценариев. Вот как те сценарии выглядели у меня.»
«за 5 часов, за 5 часов получилось за рабочий день. Ещё на обед сходила и к вечеру начала утром, вечером закончила.»
«спека, она всегда хранится вот здесь вот рядом с компонентами. У нас есть спецификейшн, и здесь есть, как можно использовать, из каких составных полей состоит компонент.»
«3D-коллекцию нашу. Раньше нужно было искать по разным файлам подходящую картинку, если ты не хотел заказывать у внутренней студии In House Studi а сейчас мы наконец-таки собрали вс»
«нейронок. У нас сейчас дизайнеры научились вскармливать определённый стиль иллюстрации, там, нанобана, условно, который у нас внутри, фигмы встроена.»
«раз в две недели обязательно проходит демо-дизайн-системы, такая часовая встреча, где дизайн-система показывает всё, что успела сделать за спринт. Спрингт вот две недели длится.»
«За 5 часов получилось. Ещё на обед сходила — утром начала, вечером закончила. Потому что это всё было собрано на суперудобном шаблончике компонентом Your Content.»
«Получилось сделать компонент, который покрыл вообще все основные продукты банковские: заголовок, подзаголовок, Your Content, две кнопочки, бейджики, статусные баннеры.»
«В токенах бренд — видишь, автогранат красный, МТС Деньги — фиолетовый. В один клик всё покрасилось.»
«Мы прямо вот такими циферками смотрим, где различия на пиксель, всё подписываем. Ставим галочку, если поправил, или крестик, если отменили.»
«Скринкасты, потому что бывает, неправильно скилетоны разрабатывают, загрузочные состояния — это только на скринкасте видно.»
«Почти перестала пользоваться внутренней студией — за минуту получается крутую картинку сделать, без ТЗ и ожиданий, пока задача в спринт попадёт.»
«Раз в две недели обязательно проходит демо дизайн-системы, часовая встреча. Приходит человек сто, потому что это приятное событие — ты мучился локально, а DS говорит: всё, теперь бери готовый.»
«Есть компоненты, которые маленькие такие, ещё не доросли до кода. Можно пойти к продуктовой команде и сказать: давайте сейчас разработаем — и ускорим развитие дизайн-системы.»
