Как появилась Citra?

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


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

Дизайн-система VS UI-Kit

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

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

Структура Citra

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


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


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

Цветовая палитра

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

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

Иконки

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

Слотовые компоненты

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

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

Оптимизация компонентов

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

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

Еще по теме

Похожие бизнес-задачи и решения, которые мы нашли, проверили и внедрили

Система удаленного мониторинга и управления нефтяными скважинами

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

В этом кейсе рассказываем, как совместная команда специалистов заказчика и True Engineering разработали систему удаленного мониторинга и управления нефтяными скважинами.

Корпоративное приложение для 150 000 сотрудников сети быстрого питания: как мы спроектировали единую экосистему сервисов

Как объединить 150 000 сотрудников, если у большинства нет доступа к корпоративным системам с рабочего компьютера? Для сети ресторанов быстрого питания мы спроектировали мобильную экосистему, которая собрала в одном окне ключевые HR-сервисы, коммуникации, льготы и инструменты поддержки с учетом высокой нагрузки, требований безопасности и сценариев использования на личных устройствах.

S7 Airlines: автоматизировали 90% кассовых операций и перевели всю сеть офисов на новую систему за сутки — без потери данных и остановки продаж

Централизованная аутентификация и SSO на базе Keycloak для корпоративных систем

Крупная сеть ресторанов столкнулась с типичной проблемой растущей IT-инфраструктуры: десятки систем с разными механизмами авторизации, множественные интеграции и отсутствие единого управления доступами. Мы построили централизованную систему аутентификации на базе Keycloak, объединив офисные и ресторанные системы в единую точку входа.

Опросы без Google Forms: как построить корпоративный сервис сбора данных под задачи бизнеса

В корпоративной среде обратную связь приходится собирать регулярно - от сотрудников, клиентов, партнеров. Публичные инструменты вроде Google Forms и «Яндекс Форм» удобны для простых задач, но часто не подходят компаниям с высокими требованиями к безопасности и множеством интеграций. Мы рассказываем, как создали сервис опросов, который стал частью корпоративной экосистемы.