Некоторые из продуктов внутри экосистемы S7, за которые отвечает наша команда, были разработаны и жили на давно существующем UI-Kit, который на данный момент технически устарел и не позволял масштабироваться.
В таких условиях новые компоненты создаются локально без общего видения Kit’а, а информация спецификаций и гайдов может частично или полностью потеряться. Чтобы избежать этого, мы внедрили новую дизайн-систему.
UI-Kit — это библиотека визуальных компонентов: кнопок, полей, иконок, а дизайн-система — полноценная экосистема. Она объединяет визуальные элементы, поведение компонентов, правила, гайдлайны и документацию.
Citra создает связку между дизайнерами и разработчиками, помогая работать быстрее и согласованнее.
Web Showcase — витрина компонентов на базе веб-компонентов S7 Citra. Здесь хранится документация и все актуальные элементы для проектов.
Core — ядро системы, где собраны цветовая палитра, спейсинги, брейкпоинты, сетки, стили, анимации и правила нейминга.
Web Components — библиотека компонентов системы
Палитра построена на токенах с четкими примитивами и семантическими слоями: у каждого цвета есть свое имя и назначение. Это исключает ошибки, например, нельзя случайно поставить цвет границы вместо фонового.
Палитру можно быстро обновить во всех продуктах — поддерживается темизация и замена цветов для внешних проектов.
Иконки строятся по единым принципам и правилам, что упрощает их создание и совместную работу дизайнеров. Поддерживаются сразу несколько размеров, поэтому масштабирование заложено изначально. А любые изменения происходят на нижнем уровне системы, без необходимости вручную обновлять компоненты во всех продуктах.
Слотовые компоненты позволяют менять только нужные внутренние части, сохраняя «родительский» компонент единым для всех продуктов — без создания локальных копий.
Изменения вносятся в систему один раз и сразу обновляются во всех продуктах. Это делает компоненты универсальными и легкими, без лишних скрытых слоев.
Компоненты стали «легче», благодаря чему файл весит меньше, быстрее открывается и работает стабильнее — что особенно важно при лимите в 2 ГБ в Figma.
Обновлять дизайн стало проще, а работа в системе — комфортнее и продуктивнее.