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