Дизайн-система для экосистемы продуктов

Некоторые из продуктов внутри экосистемы S7, за которые отвечает наша команда, были разработаны и жили на давно существующем UI-Kit, который на данный момент технически устарел и не позволял масштабироваться. 


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

UI-Kit — это библиотека визуальных компонентов: кнопок, полей, иконок, а дизайн-система — полноценная экосистема. Она объединяет визуальные элементы, поведение компонентов, правила, гайдлайны 
и документацию.

Citra создает связку между дизайнерами и разработчиками, помогая работать быстрее и согласованнее. 

Web Showcase — витрина компонентов на базе веб-компонентов S7 Citra. Здесь хранится документация и все актуальные элементы для проектов. 

Core — ядро системы, где собраны цветовая палитра, спейсинги, брейкпоинты, сетки, стили, анимации и правила нейминга. 

Web Components — библиотека компонентов системы 

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

Палитру можно быстро обновить во всех продуктах — поддерживается темизация и замена цветов для внешних проектов. 

Иконки строятся по единым принципам и правилам, что упрощает их создание и совместную работу дизайнеров. Поддерживаются сразу несколько размеров, поэтому масштабирование заложено изначально. А любые изменения происходят на нижнем уровне системы, без необходимости вручную обновлять компоненты во всех продуктах. 

Слотовые компоненты позволяют менять только нужные внутренние части, сохраняя «родительский» компонент единым для всех продуктов — без создания локальных копий. 

Изменения вносятся в систему один раз и сразу обновляются во всех продуктах. Это делает компоненты универсальными и легкими, без лишних скрытых слоев.

Компоненты стали «легче», благодаря чему файл весит меньше, быстрее открывается и работает стабильнее — что особенно важно при лимите
в 2 ГБ в Figma.

Обновлять дизайн стало проще, а работа в системе — комфортнее 
и продуктивнее.