Привет друзья! Меня зовут Тима, я дизайнер в дизайн-системе Альфа-Бизнес. Когда в крупном финтех-продукте заходит речь об обновлении иконок, со стороны это кажется легкой творческой задачей на пару недель: сел, порисовал в Figma, выгрузил — готово. Но в реальности бигтеха любая попытка просто «освежить визуал» моментально сталкивается с суровой инфраструктурой, сотнями легаси-компонентов и хаосом, который годами копился в коде и макетах.
В этой статье я расскажу, как банальная задача по редизайну графики превратилась в масштабную пересборку целой подсистемы. Вы узнаете, почему нам пришлось отказаться от привычной сетки размеров, как мы внедрили понятие «сабглифов» для сложных метафор и как написали собственный плагин, чтобы автоматизировать экспорт 2500+ иконок напрямую в код, сэкономив сотни часов разработчикам.
Те, кто уже проходил через подобное в больших продуктах, скорее всего узнают знакомые проблемы. А тем, кто только собирается нырнуть в такое приключение, статья поможет чуть раньше подметить проблемы, которые обычно всплывают сильно позже.
История началась с довольно простой задачи — обновить иконки. Но чем дальше я погружался, тем понятнее становилось, что история здесь шире рядового редизайна.
Зачем всё это
В B2B-продуктах интерфейс почти всегда плотный. Действия, документы, риски, шаблоны, роли, сервисы. В таких интерфейсах как нигде, важны акценты и структура. Особенно это чувствуется на экранах, где есть всё и сразу: таблицы, действия, статусы, сервисы, документы. Там текст перестаёт справляться с навигацией в одиночку.
Пользователю нужно быстро ориентироваться среди похожих сущностей. И тут на помощь приходят иконки. Они становятся визуальными ориентирами, «якорями», которые помогают быстрее разобраться в интерфейсе.
Когда система иконок собрана здраво, интерфейс читается почти автоматически. Взгляд цепляется за знакомые формы, мозг быстрее распознаёт нужные объекты. Когда нет — экран превращается в равномерный шум.
Предвестники изменений
За последний год интерфейсы Альфа-Бизнес качественно шагнули вперёд. Интерфейсы становятся легче, аккуратнее, выразительнее. В дополнении к изменению интерфейсов у Альфы появился свой собственный шрифт — Alfa Interface Sans. Вместе с обновлениями меняется общее ощущение интерфейса: ритм, плотность, работа с воздухом, характер форм.
На этом фоне старые иконки начали «звенеть». Они перестали совпадать по весу, пластике и внутреннему ритму.
Вторым сигналом к обновлению стал нарастающий хаос. Система иконок не ломается резко. Обычно всё начинается с небольших отклонений, которые долго не воспринимаются как проблема, например:
где-то иконка не по гайду заехала в набор (ага, конечно же в виде исключения) и расползлась по интерфейсам;
где-то команда нарисовала странную иконку;
где-то выбрали не ту метафору;
где-то не заменили старую версию.
Постепенно таких шероховатостей становится всё больше и больше. В какой-то момент это начинает влиять на все интерфейсы банка. Оказывается, что одно и то же действие обозначается по-разному, похожие сущности выглядят как разные, а в библиотеке, макетах и коде живут разные версии одних и тех же иконок.
Любая локальная правка добавляет ещё одно исключение, а система продолжает расползаться как масляное пятно, и, к сожалению, это почти невозможно исправить точечно.
Стало ясно, речь уже не про обновление UI. Если просто перерисовать иконки, через какое-то время всё вернётся к тому с чего началось...
Поиск стиля
После того, как мы всё-таки решились на переработку иконок, начался этап, который обычно называют поиском стиля, но на практике это скорее поиск границ системы.
Мы провели несколько дизайн-сессий, где определили:
характер форм;
общий уровень строгости;
детализацию, радиусы и насыщенность линий;
поведение иконок в разных размерах;
работу с деталями и мелкими элементами;
составные метафоры;
совместимость со шрифтом Alfa Sans;
читаемость на плотных B2B-экранах;
поведение набора в новых интерфейсах и концептах.
При этом мы учитывали весь Альфа-Банк целиком, а не только Альфа-Бизнес. Стиль должен масштабироваться на все продукты и хорошо работать на любой платформе.
Проверяли иконки и на базовых глифах и на сложных метафорах. На базовых получается быстрее нащупать интонацию, а сложные быстро показывают, где подход даёт сбой.
В итоге через этот этап прошло больше десяти полноценных стилевых концептов и больше сотни тестовых иконок. Постепенно из этого начал складываться общий визуальный язык.
В поиске баланса
Были решения, которые не всегда совпадали с ожиданиями. Иногда хотелось сделать иконку выразительнее, но она начинала выбиваться из общего ряда, а где-то слишком рациональное решение делало набор излишне сухим.
Обязательно фиксируйте ход мысли и спорные прямо в процессе. На длинной дистанции такая фактура не даст потерять логику при тиражировании.
Стало понятно, что система держится не на яркости отдельных элементов, а на их согласованности. Нужно было поймать баланс между новизной и преемственностью. Слишком резкие изменения ломают привычное восприятие, а слишком осторожные — не дают двигаться вперёд.
В итоге многие решения оказались проще, чем казались на старте, но именно за счёт этой простоты иконки перестают быть отдельными глифами и объединяются в сбалансированную визуальную систему.
Размеры и начертания
Существующая система была перегружена костылями: разные размеры решались через внутреннее масштабирование, дополнительные модификаторы и усложнённую логику внутри библиотеки. Хотелось от этого уйти и сделать поведение иконок более предсказуемым.
Параллельно нужно было подружить набор с новым визуальным языком Альфа-Бизнес и новым Alfa Sans. Мы отдельно примеряли иконки рядом с разными начертаниями шрифта, проверяли. Проверяли, как они ощущаются в плотных таблицах, сайдпанелях, меню, списках и формах.
После серии примерок стало понятно, что достаточно двух базовых размеров и трёх стилистических вариантов. Этого хватало для реальных интерфейсных сценариев без лишней сложности.
Здесь важный момент: иконку нельзя просто масштабировать. При уменьшении или увеличении она начинает выглядеть иначе — меняется толщина линий, радиусы, насыщенность формы, что напрямую влияет на читаемость. Поэтому для каждого размера и каждого стиля мы делали отдельные версии. Метафора оставалась той же, но детали подстраивались под конкретный масштаб.
Также сделали то, что давно нужно было сделать — избавились от маечных размеров (S, M, XL). Архитектура стала проще и набор будет проще масштабироваться.
В итоге система стала проще: вместо множества вариантов — два понятных размера, чёткие правила, меньше технических оговорок. Это дало запас на будущее и позволило не закладывать лишнюю сложность в библиотеку.
Сложные иконки
С ростом набора начали появляться случаи, которые не решаются одной простой метафорой. Похожие сущности, тонкие различия, составные метафоры — всё это требует более гибкого подхода. Если для каждого случая рисовать отдельную иконку, система быстро теряет управляемость.
Поэтому появился промежуточный уровень — сабглифы: небольшие микроиконки, которые я вынес в отдельные компоненты. Их можно комбинировать с базовой формой и тем самым уточнять смысл. Это позволяет не раздувать набор и сохранить его логическую структуру.
Ищите замысловатые и неоднозначные кейсы. В нашем случае такими кейсами были иконки продуктов Альфа-Бизнес. Они где-то разные, где-то похожие и их много. Мы выделили их в отдельную касту иконок (иконки продукта), которые запрещено переиспользовать в другом контексте.
Доработка нейминга
Мы не стали шатать систему нейминга концептуально. Имя импорта иконки формируется из названия, у которого есть устоявшиеся правила. Важно было сохранить этот флоу для дизайнеров и разработчиков, чтобы не ломать существующие процессы ради формального улучшения.
Но и тут без изменений не обошлось. Чтобы не тащить существующие ошибки в новый набор, убрали неоднозначности, подчистили конфликтные кейсы и строже закрепили правила работы с модификаторами. В результате нейминг остался узнаваемым, но стал устойчивее и предсказуемее.
Закрепление правил
Пока над иконками работаешь один или в небольшой команде, многое держится в головах, комментариях в фигме, заметках в тетради. Потом правила неизбежно требуют систематизации.
Дизайнеры в Альфе самостоятельно рисуют новые иконки, если в библиотеке нет необходимой. Необходимо организовать передачу знаний и правил в удобном формате.
Поэтому мы собрали гайд, который работает не только как витрина, но и как инструмент. Его задача — помочь принимать решения без постоянных обсуждений. В итоге родился интерактивный документ на 50 страниц, с чек-листами, полезными ссылками и блок-схемами.
Для тестирования гайда мы собрали группу дизайнеров. Они проверяли, можно ли по нему нормально работать, не конфликтуют ли правила, всё ли понятно. (Ребята, если вы читаете эту статью, спасибо ещё раз!)
В итоге в процессе тиражирования пересобирали гайд раз 10 и это нормально!
Если правило даёт сбой, то значит, менять нужно не иконку или метафору, а само правило. После этого уже стоит обновлять иконку и проверять, на что ещё повлияло новое правило.
Систематизация
Чтобы производство иконок вписалось в продуктовый процесс нужно было, чтобы иконки стали частью продуктового процесса — со своей логикой хранения, проверки и поставки. Вместо формы иконок на первый план выходят процессы.
Для удобства дизайнеров мы решили хранить рядом не слитые исходники иконок в слоях. Их можно использовать как референс или рабочую основу. Иконки больше не нужно рисовать с нуля, можно взять готовую (или её часть) и модифицировать по общей логике.
Параллельно донастроили процесс экспорта в код. Ручной экспорт на таком масштабе быстро становится узким местом, которое отнимает время и приводит к ошибкам.
Ещё разработали отдельный плагин для подготовки иконки к публикации: автоматическая модификация заливки для Android, проверка целостности форм, нейминга и наличия алиасов для поиска. Это сняло с плеч дизайнеров бóльшую часть рутинной проверки и сделало процесс предсказуемее.
Итог
Сейчас отрисовано 2500+ иконок, новые рисуются руками дизайнеров из команд, вопросов в чате стало меньше, а процесс поставки стабильнее.
Но впереди ещё туча работы: глобальная миграция, внедрение в компоненты и проработка анимации.
Если честно, в процессе всё оказалось сложнее, чем выглядело на старте. Местами утомительно, местами монотонно. Особенно когда работаешь с сотнями похожих деталей, и приходится постоянно держать в голове систему целиком.
Но потом пазл начинает складываться, и становится видно, что это было не зря — набор уже не набор, а система.
Подписывайтесь на Телеграм-канал Alfa Digital — там рассказываем о работе в IT, делимся новостями, анонсами митапов и квартирников, рассказываем о технологиях, делимся советами наших экспертов, вакансиями и стажировками, иногда шутим.
Читайте также: