Дизайн-система с нуля
Контекст и задача
Дизайн-система 1.0 в НЛМК была перекрашенным Material UI. Задача: уйти от него к собственной дизайн-системе 2.0 для сложных производственных интерфейсов, MES-систем
Команда и роль
2 разработчика, руководитель отдела дизайна и я. На мне: дизайн, архитектура дизайн-системы, дизайн-лидерство и ресурсы
Нейминг, версионирование и документацию прорабатывали вместе с разработчиками
Подход
Начал с исследования: поездки на заводы к людям, которые работают с интерфейсами каждый день, запросы от дизайнеров, разбор дизайн-систем Сбера, Яндекса и Ozon. По итогам составил план из 11 этапов
Система
Сделали 2 параллельные дизайн-системы. Внутренняя: основы, продуктовые компоненты, паттерны, иконки, гайды. Развивается вместе с внутренними системами НЛМК. Открытая: с открытым кодом, о ней ниже
Токены
Ключевое решение: токены на стороне дизайна, варианты компонентов на стороне фронтенда. Токены собраны в Tokens Studio, потому что нативных токенов в Figma тогда ещё не было. Токены в 4 уровня: базовый цвет → палитра от 50 до 900 → семантический токен → токен компонента. Например, base.primary-blue → primary-blue/700 → primary-blue.default → ac.button.main-bg-def. Так же устроены размеры: size.base 16 → size.m 36 → input.m.height. Токены хранятся в репозитории в JSON, у каждого есть описание
Компоненты
46 базовых компонентов в дизайне и 40 в коде. Сложные компоненты собраны из состояний и вариантов: у TreeList их больше 200
Версионирование и обновления
Общий номер версии для дизайна и кода и отдельный суффикс для каждой стороны: v02.11.98.des34 и v02.11.98.fe67. Об обновлениях команды узнают из рассылки: новые компоненты, доработки, ссылки на код и документацию
Открытая часть
Открытая дизайн-система: для дизайнеров и разработчиков вне НЛМК. Лендинг ds.nlmk.com, UI-кит в Figma, Storybook, пакет @nlmk/ds-2.0 в npm, репозиторий на GitHub, лицензия MIT. В ней логотип, палитра с генерацией по HEX-коду бренда, типографика на PT Root UI, иконки, модульная сетка, светлая и тёмная темы
UI-кит в Figma ↗Storybook ↗npm ↗GitHub ↗
Результат
- Экономия от внедрения: около 1 млн долларов в год, оценка
- Индекс удовлетворённости дизайн-системой: 8,1
- 2 дизайн-системы: внутренняя и открытая
- Витрина компонентов в Figma
- Пакет живёт после моего ухода: в npm больше 280 версий, последние в 2026 году
- Свидетельство о государственной регистрации программы для ЭВМ № 2023685643 «Дизайн-система НЛМК» от 29 ноября 2023 г. Правообладатель: ПАО «НЛМК», авторы: 2 разработчика, руководитель отдела дизайна и я
