Дизайн-система для корпорации: когда гайдлайна уже недостаточно

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

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

Что входит в полноценную Дизайн-систему?

Многие путают дизайн-систему с обычным UI-китом (файлом в Figma, где нарисованы все кнопочки). Настоящая корпоративная дизайн-система включает три уровня:

1. Дизайн-токены. Базовые переменные: цвета, шрифты, отступы, тени. Они лежат в основе всего. Если корпорация проводит ребрендинг и меняет фирменный синий на фиолетовый, достаточно поменять один токен - и цвет обновится на всех сайтах и во всех приложениях автоматически.
2. UI Kit в Figma. Библиотека компонентов для дизайнеров. Когда дизайнер рисует новый экран, он не рисует инпут для ввода телефона с нуля, он берет готовый компонент Input/Phone, который уже содержит состояния ошибки, фокуса и успешного ввода.
3. Библиотека компонентов в коде. Это самая важная часть. Те же самые кнопки и инпуты из Figma существуют в виде реального кода (например, React-компонентов), выложенного в закрытый репозиторий (Storybook). Фронтендер просто пишет <Button variant="primary">Оплатить</Button>, и кнопка появляется на экране, работая идеально.

Сравнение подходов: Разработка без ДС и с ДС

Когда корпорации ПОРА внедрять дизайн-систему?

Дизайн-система - это дорогое удовольствие. Её разработка и поддержка требуют выделенной команды (Core Team). Поэтому небольшим компаниям с одним сайтом она не нужна. Но есть три четких маркера, когда без неё бизнес начинает терять деньги:

• У вас больше 2-х цифровых продуктов. Например: корпоративный сайт, портал для B2B-партнеров, личный кабинет клиента, внутренний ERP-интерфейс для сотрудников и мобильное приложение.
• Вы работаете с несколькими подрядчиками. Если один сайт вам делает Inhouse-команда, второй - агентство А, а третий - фрилансер Б, то без жесткой дизайн-системы в виде кода они выдадут вам Франкенштейна. Выдав им доступ к вашему Storybook, вы гарантируете, что результат будет в едином стиле.
• Долгий Time-to-Market. Запуск простого промо-лендинга или нового раздела в личном кабинете занимает месяцы из-за долгих циклов дизайна, верстки и тестирования.

Как происходит внедрение?

Процесс создания дизайн-системы мы начинаем с аудита (UI Inventory). Мы собираем скриншоты всех кнопок, форм, таблиц со всех текущих продуктов компании. Часто мы находим по 15 разных стилей кнопок "Сохранить".

Затем мы унифицируем этот зоопарк, сводя к единому стандарту. Разрабатываем UI Kit в Figma, настраиваем дизайн-токены. После этого команда фронтенд-разработчиков переносит это в код, создавая изолированную библиотеку компонентов (Storybook) и покрывая её автотестами. Финальный этап - постепенный перевод существующих продуктов на новые компоненты.

Зоопарк интерфейсов: скрытая статья корпоративных расходов

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

Как выглядит "зоопарк интерфейсов" на практике:

• Двойная работа: Чтобы добавить обычный календарь дат на три разных проекта, три разные команды дизайнеров рисуют его с нуля, а три разные команды программистов пишут для него код. Вы платите за одну и ту же работу трижды.
• Отсутствие преемственности: Кнопка "Отправить" в личном кабинете зеленая и круглая, а на главном сайте - синяя и квадратная. Пользователь дезориентирован, конверсия падает.
• Долгий онбординг: Когда разработчик переходит из одной внутренней команды в другую, ему требуется месяц, чтобы понять логику компонентов нового проекта.

Дизайн-система убивает этот зоопарк на корню. Это единая база знаний и кода. Когда бизнесу нужен новый портал, команда не рисует его с чистого листа, а собирает из готовых "деталей лего" (React-компонентов) за пару недель вместо полугода.