Введение
Всем привет! Меня зовут Иван Кузнецов, я руковожу группой «Дизайн и клиентский сервис» в ИТ-команде «Северстали» Если в первой части мы поделились предпосылками, целями и общим видением будущей системы, то сейчас настало время заглянуть «под капот» и рассказать о том, как мы воплотили эти идеи в жизнь. Здесь подробно обсудим архитектурный подход, ключевые принципы построения системы, а также познакомим вас с важнейшим её аспектом – токенной системой, которая обеспечивает единообразие и адаптивность продуктов построенных на её базе.
Архитектура и основные принципы
Изначально мы следовали строгой методологии атомарного дизайна, где все элементы делились на четкие категории: атомы, молекулы, организмы и шаблоны. Такой подход позволял структурировать работу и обеспечивал последовательное построение интерфейсов. Однако по мере реализации проекта возникла необходимость в более гибкой и понятной модели, способной сократить путаницу внутри команды.
Мы пришли к упрощённой модели, в которой система разделена на два крупных блока:
Основа (General) – включает в себя логотипы, иконки, правила типографики, паттерны и сетки. Эти элементы задают визуальную базу и направляют общее восприятие бренда.
Компоненты (Components) – охватывают все остальные элементы, от стандартных кнопок и полей ввода до более сложных объектов, таких как диаграммы Ганта и таблицы. При этом отдельные компоненты могут быть комбинациями уже существующих элементов, например, модальное окно, в составе которого размещена кнопка. Внутри компоненты же подразделяются на Ready to use и In Development, дабы многочисленные команды сразу могли понять какой компонент уже реализован в коде, а где ведутся доработки.
Данная структура позволила устранить избыточную сложность, сделать систему интуитивно понятной и обеспечить простоту навигации для всей команды.
Токенная система
Главным архитектурным решением стала внедренная токенная система, на базе которой выстроены все наши компоненты. Токена система – это набор уникальных атомарных единиц, которые служат строительными блоками для всех цифровых продуктов. Такой подход обеспечивает единый, последовательный и адаптивный дизайн на всех платформах, упрощая процесс разработки и гарантируя качественный пользовательский опыт.
Основной принцип токенной системы заключается в создании масштабируемого и устойчивого к изменениям дизайна. Вместо того чтобы вручную задавать стили для каждого элемента, мы определяем их на уровне токенов, которые затем легко применяются, изменяются и распределяются по всему проекту.
Цветовые токены
Цветовые токены отвечают за единообразие палитры как для светлой, так и для тёмной темы, а также за адаптацию к различным условиям использования. В их состав входят:
фоновые цвета,
обводки,
цвет текста,
цвет иконок,
акцентные цвета.
Цветовые токены разделены на две категории:
Основные цвета (Core) – отражают корпоративную идентичность и могут настраиваться под специфику разных компаний.
Цвета темы (Theme) – производные от основных, используются в UI-компонентах и содержат информацию о светлой и тёмной теме. При разработке интерфейсов всегда применяются цвета из папки Theme, где помимо универсальных токенов (Background, Border, Text) также присутствуют персонализированные для конкретных компонентов.
Изменение основных цветов возможно для адаптации под новые брендовые палитры, а цвета темы остаются неизменными по названию, однако могут ссылаться на соответствующие значения из папки Core.
Размерные токены
Размерные токены делятся на две категории:
Размеры (Size) – константы для создания единообразного пространства, основанные на 4-пиксельной сетке.
Расстояния (Spacing) – определяют отступы и маржины, обладая адаптивными свойствами и включающие в себя элементы из Size.
Эти токены используются для задания параметров компонентов (высота кнопок, размер иконок, отступы, радиусы скруглений) для различных брейкпоинтов:
1920px: экраны с высоким разрешением.
1536px: стандартные настольные экраны.
768px: планшеты и небольшие ноутбуки.
0px: мобильные устройства.
Все значения настраиваются через переменные в Local Variables, что позволяет быстро и эффективно адаптировать дизайн под любые устройства.
Компонентная база
Помимо компонентов мы также озаботились разработкой собственного набора иконок, который одновременно бы отвечал запросам при применении в интерфейсах, а также дружил бы с нашими гайдами. Созданный набор иконок представлен в четырёх размерах: 32, 24, 20 и 16 пикселей. При изменении размеров происходит адаптация детализации, и характерный «фирменный разрез» постепенно исчезает, что позволяет сохранять стилистическую целостность в рамках бренд-стиля «Северстали».
Принцип работы на примере кнопки
Кнопка — один из ключевых элементов любого интерфейса. Она выполняет действие (например, «Отправить», «Сохранить», «Закрыть») или служит для перехода на другую страницу/экран. Мы стремились создать универсальный компонент, который легко адаптируется под различные сценарии и при этом сохраняет единый визуальный стиль.
Основные элементы кнопки
Icon Left — иконка слева от текста (необязательный элемент).
Text — текстовый лейбл кнопки. Может скрываться или заменяться на «icon-only» вариант.
Icon Right — иконка справа от текста (также необязательный элемент).
Container — визуальная «обёртка» кнопки, задающая форму и цвет (может быть с заливкой или без).
Анатомия кнопки
Высота (h): 48 px (фиксированная).
Минимальная ширина (min w): 132 px (фиксированная).
Ширина (w): «hug content» (растягивается под контент, но не меньше 132 px).
Закругление углов (r): 24 px.
Сглаживание углов (c): 2 px.
Внутренние отступы слева (padding-left): 20 px.
Отступ между текстом и иконкой (gap): 8 px.
Внутренние отступы справа (padding-right): 12 px.
Типы кнопок
В нашей системе предусмотрено несколько типов кнопок:
Button Primary
Button Secondary
Button Tertiary
Button Link
Button Link — secondary
Button Warning
Каждый тип кнопки мы сделали отдельным компонентом, а при необходимости замены (например, с Primary на Secondary) используется механизм Swap Instance в Figma. Такой подход показал себя эффективным в плане экономии памяти: для высоконагруженных интерфейсов это критично, так как большое количество вариаций внутри одного компонента часто приводит к росту размера файла и усложняет работу с ним.
Состояния
Кнопка поддерживает стандартные состояния:
Default — начальное состояние кнопки.
Hover — при наведении курсора.
Active / Selected — при нажатии или в момент выбора.
Focus — при фокусе клавиатурой (TAB) или других сценариях взаимодействия.
Disabled — когда действие недоступно или неактивно.
Для каждого состояния предусмотрены свои стили: меняются заливка, обводка, цвет текста и иконки, а также может изменяться курсор. Скриншоты 2 и 3 наглядно демонстрируют, как выглядят эти состояния в разных размерах (XL, L, M, S, XS) и темах (светлая, тёмная, брендовые варианты).
Размеры и респонсивность
В качестве примера мы рассмотрели L, где:
Высота = 48 px
Минимальная ширина = 132 px
Радиус скругления = 24 px
В других размерах эти значения пропорционально меняются, но сохраняют общую стилистику.
Внутренние отступы, размеры шрифта и иконок контролируются через наши токены (например, button/icon-size, button/height, button/padding), что упрощает масштабирование для различных брейкпоинтов (1920, 1536, 768, 0).
Токены цвета
Для каждой кнопки мы определили собственный набор цветовых токенов. Например, для Button Primary это:
button/primary/fill
button/primary/border
button/primary/text
button/primary/icon
Эти токены связаны с глобальными токенами цветовой палитры (Core и Theme). При смене корпоративных цветов или адаптации под другой бренд достаточно скорректировать значения в Core, и все кнопки сразу получат новую цветовую схему.
Интеграция с современными инструментами и рабочими процессами
Одним из важных аспектов нашей дизайн-системы стала налаженная интеграция между дизайном и разработкой, что позволяет оперативно вносить изменения и обновлять компоненты.
Процесс передачи токенов
Передача информации из дизайна в код осуществляется с помощью плагина для Figma Advanced Variable Export. Этот плагин позволяет выгрузить наборы токенов в формате CSS. Далее полученные данные проходят через специально разработанный конвертер, после чего обновляются в кодовой базе и автоматически отражаются на витрине компонентов. Такой подход значительно сокращает время на синхронизацию изменений и позволяет обеспечить постоянное соответствие дизайна и реализации.
Хранение UI Kit
Наш UI Kit дизайн-системы хранится в Figma, что обеспечивает лёгкий доступ и централизованное управление всеми элементами.
Организация файлов в Figma
Заключение
Во второй части нашего рассказа мы углубились в технические детали разработки дизайн-системы. Мы рассмотрели, как изменялся наш архитектурный подход от строгой модели атомарного дизайна к более гибкой и понятной структуре, а также узнали, какое ключевое значение имеет токенная система в обеспечении единообразного и адаптивного дизайна. Интеграция с современными инструментами, такими как Figma и Витрина компонентов, позволила наладить эффективное взаимодействие между дизайнерами и разработчиками, что стало важным фактором в успешной реализации проекта.
Мы надеемся, что описанные принципы и решения окажутся полезными для вас. В следующей части мы продолжим наш рассказ, поделимся примерами использования системы и покажем реальные результаты её внедрения. До встречи!
